`

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

阅读更多

本篇是供自己方便使用

一、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
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics