JavaScript复习——01....大致的了解

宇宙歆儿

浏览: 102708 次
性别:
来自: 上海

最近访客更多访客>>

songzhihuis

罗伯特X

thinking

116856645

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html+css+js_zhuhw

JavaScript简介 JavaScript 使用 JavaScript 输出

本篇是供自己方便使用

一、JavaScript简介

星期一, 十二月 14, 2015 09:52:13

JavaScript 是属于网络的脚本语言！

JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

一、java简介

1.1提示：您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

1.2alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。

1.3您会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。

DOM（文档对象模型）是用以访问 HTML 元素的正式 W3C 标准。

<p id ="demo">
javascript html 改变内容
</p>
function myFunction() {
x = document.getElementById("demo");//查找元素
x.innerHTML = "hello javascript";//改变内容
}
<button type = "button" onclick = "myFunction()">click this</button>

1.4JavaScript：改变 HTML 图像

本例会动态地改变 HTML <image> 的来源 (src)

代码案例:
<html>
<head>
	<title>js_lightbulb</title>
	<meta http-equiv="Context-Type" content="text/html";charset="utf-8" />
</head>
<body>
<script type="text/javascript">

	function changeImage() {
		element = document.getElementById("myimage")
		if(element.src.match(1)){
           element.src = "E:/zhuhw_study/js/jpg/2.jpg";
		}else {
			element.src = "E:/zhuhw_study/js/jpg/1.jpg";
		}
	}
</script>>
<img  id = "myimage" onclick="changeImage()" src="E:/zhuhw_study/js/jpg/2.jpg">
<p>js一个函数控制</p>>
</body>
</html>

1.5JavaScript：改变 HTML 样式
<!DOCTYPE html>
<html>
<head>
	<title>JavaScript：改变 HTML 样式</title>
</head>
<body>
<script type="text/javascript">
	function changeStyle() {
	x = document.getElementById("demo1");
               x.style.color = "#ff0000";
	}
</script>

<p id="demo1">
hello JavaScript！
</p>
<button onclick="changeStyle()");
">点击</button>
</body>
</html>

1.6JavaScript 常用于验证用户的输入。

isNaN() 函数用于检查其参数是否是非数字值。

<html>
	<head>
		<title>JavaScript 常用于验证用户的输入</title>
	</head>
	<body>
		<script type="text/javascript">
				function myF(){
						y = document.getElementById("text1").value;
						if (y =="" || isNaN(y) ) {
							alert("Not Numeric");
						};
				}
		</script>
		<p>校验输入书否是数值</p>
		<input  id = "text1"  type ="text" />
		<button onclick="myF()">提交</button>
	</body>
</html>

二、JavaScript 使用

1、HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

2、<head> 或 <body> 中的 JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

3.外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

3.1代码案例:

<html>
	<head>
	    <title>应用外部的js</title>
	</head>
	<body>
		<p id = "p1">引用外部的js文件进行改变文本的字体颜色</p>
		<button onclick="myfunction()">点击</button>
		<script src = "E:/zhuhw_study/js/myScript.js"></script>
	</body>
</html>
   外部js 
    function myfunction() {
	x = document.getElementById("p1");
	x.style.color = "#ff0000";
}

注意：

外部脚本不能包含 <script> 标签。

三、JavaScript 输出

警告

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：

<html>
		<head></head>
		<body>
			<p>此文档会被覆盖，因为在加载后会使用document.write()方法</p>
			<button onclick="myFF()">提交</button>
			<script type="text/javascript">
					function myFF() {
						document.write("糟糕，文档被覆盖了呢");
					}
			</script>
		</body>
	</html>

0
顶

0
踩

分享到：

JavaScript复习——02....大致的了解 | day_01servlet

2015-12-15 09:54
浏览 858
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论