zoukankan      html  css  js  c++  java
  • JavaScript学习总结

    JavaScript是由NetScape发明的;语法和Java非常类似;但是注意的一点是:Java和JavaScript没有任何关系。

    JavaScript中有许多内置对象,不需要用户创建;


    HTML使用小技巧:

    (1)如果想要输出一个空的表格,则需要<td>&nbsp</td>

    (2)在Editplus中支持快速浏览制作的网页,快捷键是CTRL+B;



    一、使用JavaScript



    如果要在HTML中引入JavaScript,则有两种方式:


    (1)内部引入:JS代码直接在HTML中编写;


    导入的结构如下:

    <script language="JavaScript">
        ....
    </script>

    一般JS代码都放在head标签中;


    (2)外部引入:JS代码在外部编写后导入到HTML中;

    <script language="JavaScript" src="1.js">
    ....
    </script>


    二、JavaScript语法


    1.跳出提示框 alert


    在JavaScript中,使用的最多的就是alert,此语句会使得浏览器弹出一个提示框;

    alert("Hello world!!!" );就能弹出一个Hello world!!!的提示框;

    <html>
    	<head>
    		<title></title>
    		<script language="JavaScript">
    			alert("欢迎光临!");
    			alert("谢谢!");
    		</script>
    	</head>
    </html>


    2.页面输出内容  document.write()


    此语句也是非常常用的,可以直接向页面输出内容;比如:

    document.write("<h3>Hello world!!!</h3>");   就可以在页面中显示Hello world!!!

    此语句和JSP中的out.println()非常类似;


    <html>
    	<head>
    		<title></title>
    		<script language="JavaScript">
    			document.write("<h3>Hello world!!!</h3>");
    		</script>
    	</head>
    </html>


    3.定义变量 var


    这个特性和python是很类似的,Java中,有许多特定的数据类型,但是在JS中,只需要将任何类型的值赋予var即可;

    例如:

    (1)var num1 = 5;   num1的类型就是整数;

    (2)var str1 = "Hello world!!!";  str1的类型就是字符串;

    <html>
    	<head>
    		<title></title>
    		<script language="JavaScript">
    			var num1 = 5;
    			var str1 = "Hello world!!!";
    			alert(num1);
    			alert(str1);
    		</script>
    	</head>
    </html>


    4.字符串比较


    在JavaScript中,比较字符串是否相等只需要通过==即可;而不需要equals();


    5.函数声明


    在JavaScript中,函数声明非常简单,形式如下:

    function(参数...){

    [返回值;]

    }

    注意:

    (1)参数也不能声明类型,只需要写明参数的名称即可;

    (2)函数声明并看不出是否有返回值,在实现中,如果有返回值,则return;

    <html>
    	<head>
    		<title></title>
    		<script language="JavaScript">
    			function fun(i){
    				alert("欢迎"+i);
    			}
    			fun("xiazdong");
    		</script>
    	</head>
    </html>

    6.数组 Array


    这里的数组也是没有类型的;只需要var arr = new Array(...);即可;数组的初始化有两种方式:

    (1)静态初始化:var arr = new Array("1","2","3");     直接赋值;

    (2)动态初始化:var arr = new Array(length);       只声明长度;后来在赋值;

    如果是动态初始化,一开始数组的元素内容是“undefined”;

    输出数组内容:注意:arr.length返回数组长度;

    for(i=0;i<arr.length;i++){

    arr[i]  ....

    }

    <html>
    	<head>
    		<title></title>
    		<script language="JavaScript">
    			var arr = new Array(3);
    			var str = "";
    			for(i=0;i<arr.length;i++){
    				arr[i]=i;
    			}
    			for(i=0;i<arr.length;i++){
    				str=str+arr[i]+"、";
    			}
    			alert(str);
    		</script>
    
    	</head>
    </html>


    三、JavaScript事件


    JavaScript的事件增加了动态效果,并且一般来说,触发事件后,都会调用某个函数,以完成功能;

    "#"表示当前页;

    1.body包含的事件


    (1)onLoad:打开网页时调用;
    (2)onUnLoad:关闭网页时调用;


    2.表单提交事件 onSubmit


    当点击表单的submit按钮时,就会除触发onSubmit事件,并调用某函数,通常此事件用于验证操作;

    补充:

    在JavaScript中获得表单控件的值:可以通过层层递进的方式获得;

    document是文档的根节点;

    比如:

    <form action="" method="post" onSubmit="fun(this)" name="f">
    			<input type="text" name="name"/><br />
    			<input type="radio" name="radiobutton"/>男<br />
    			<input type="radio" name="radiobutton"/>女<br />
    			<input type="button" value="显示" onClick="show()"/>
    		</form>

    (1)获得文本控件的值:document.f.name.value即可获得;

    (2)获得单选按钮中的“男”按钮的值:document.f.radiobutton[0].value;

    (3)获得单选按钮中的“女”按钮的值:document.f.radiobutton[1].value;

    (4)判断单选按钮中的“男”按钮是否选中:document.f.radiobutton[0].checked;


    3.单击事件  onClick


    当单击某个控件,则触发该事件;

    (1)在<a href>中触发onClick;

    (2)在button中触发onClick;


    4.下拉列表事件  onChange


    此事件在下拉列表的值改变时触发;

    <html>
    	<head>
    		<title></title>
    		<script language="JavaScript">
    			function fun(v){
    				alert(v);
    			}
    			
    		</script>
    		<form action="" method="post"  name="f">
    			EMAIL:<input type="text" name="name"/><br />
    			<select name="favor" onChange="fun(this.value)">
    				<option value="a">a</option>
    				<option value="b">b</option>
    				<option value="c">c</option>
    
    			</select>
    			<input type="submit" value="提交"/>
    		</form>
    	</head>
    	<body >
    		
    	</body>
    </html>

    5.失去焦点事件   onblur


    此事件用于失去焦点时调用;比如<input type="text" onblur="  fun()"/>的意思是当这个文本框失去焦点时即调用。


    四、JavaScript中的正则表达式


    在JavaScript中也支持正则,但是使用语法与Java稍微不同;

    /正则/.test(字符串);

    比如email的验证:

    /^\w+@\w+.\w+$/.test(value);

    <html>
    	<head>
    		<title></title>
    		<script language="JavaScript">
    			function validate(f){
    				var email = f.name.value;
    				if(/^\w+@\w+.\w+$/.test(email)){
    					return true;
    				}
    				else{
    					return false;
    				}
    			}
    			
    		</script>
    		<form action="" method="post" onSubmit="return validate(this)" name="f">
    			EMAIL:<input type="text" name="name"/><br />
    			
    			<input type="submit" value="提交"/>
    		</form>
    	</head>
    	<body >
    		
    	</body>
    </html>

    以上完成了一个简单的验证操作;注意:

    观察onSubmit事件,如果需要让返回值有用,需要return;

    f.name.focus();可以使文本框获得焦点;

    f.name.select();可以选中文本框中的文本;


    五、window对象


    1.打开新窗口:window.open函数


    比如:

    window.open("http://www.google.com","width=500,height=500,resizable=no");  打开谷歌网页,并且控制网页大小、尺寸;

    window.open("http://www.google.com");普通方法打开网页;

    <html>
    	<head>
    		<title></title>
    		<script language="JavaScript">
    			function fun(url){
    				window.open(url,"页面标题","width=500,height=500,resizable=no");
    			}
    
    		</script>
    		
    	</head>
    	<body >
    		<form action="" method="post">
    			<select name="favor" onChange="fun(this.value)">
    				<option value="#">====请选择====</option>
    				<option value="http://www.baidu.com">百度</option>
    				<option value="http://www.google.com">谷歌</option>
    			</select>
    		</form>
    	</body>
    </html>


    2.确认窗口:window.confirm()


    比如:

    var flag = window.confirm("确认?"); 如果选是,则返回true;否则返回false;

    <html>
    	<head>
    		<title></title>
    		<script language="JavaScript">
    			function fun(){
    				if(window.confirm("确认")){
    					alert("是");
    				}
    				else{
    					alert("否");
    				}
    			}
    			fun();
    		</script>	
    	</head>
    	<body >	
    	</body>
    </html>

    3.页面重定向


    通过window.location属性能够完成页面的转换;

    只需要window.location="http://www.google.com"就能够将当前网页跳转到谷歌;

    <html>
    	<head>
    		<title></title>
    		<script language="JavaScript">
    			function fun(url){
    				window.location=url;   //将当前的网页的地址变换
    			}
    		</script>
    		
    	</head>
    	<body >
    		<form action="" method="post">
    			<select name="favor" onChange="fun(this.value)">
    				<option value="#">====请选择====</option>
    				<option value="http://www.baidu.com">百度</option>
    				<option value="http://www.google.com">谷歌</option>
    			</select>
    		</form>
    	</body>
    </html>


    4.在子窗口中操作父窗口 opener


    通过window.opener.document可以获得父窗口的文档对象;

    window.opener.location可以获得父窗口地址;

    window.opener.location.reload();重新加载父窗口;

    父窗口:

    <html>
    	<head>
    		<title></title>
    		<script language="JavaScript">
    			function fun(){
    				window.open("demo03.html","页面标题","width=500,height=500,resizable=no");
    			}
    		</script>
    		
    	</head>
    	<body >
    		<form action="" method="post">
    			<input type="button" value="打开子窗口" onClick="fun()"/>
    		</form>
    	</body>
    </html>

    子窗口:

    <html>
    	<head>
    		<title></title>
    		<script language="JavaScript">
    		function fun(){
    			window.opener.location="http://www.baidu.com";
    		}
    		</script>
    	</head>
    	<body >
    		<input type="button" value="跳转到百度" onClick="fun()"/>
    	</body>
    </html>




    作者:xiazdong
    出处:http://blog.xiazdong.info
    本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。
  • 相关阅读:
    洛谷 P3366 【模板】最小生成树
    libfreenect
    openni2 和opencv读取数据
    kinect数据读取
    kinect for windows sdk
    caffe android lib
    Hlsl2glsl
    手势识别半自动标注结果视频
    CLM
    10位算法大师
  • 原文地址:https://www.cnblogs.com/xiazdong/p/3058115.html
Copyright © 2011-2022 走看看