JavaScript学习总结

最新推荐文章于 2024-08-12 09:24:46 发布

gougoucai

最新推荐文章于 2024-08-12 09:24:46 发布

阅读量324

点赞数

分类专栏： web客户端文章标签： javascript html fun input action email

web客户端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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" οnblur=" 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>

转自:http://blog.csdn.net/xiazdong?viewmode=contents

gougoucai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习总结

JavaScript是由NetScape发明的；语法和Java非常类似；但是注意的一点是：Java和JavaScript没有任何关系。JavaScript中有许多内置对象，不需要用户创建；HTML使用小技巧：(1)如果想要输出一个空的表格，则需要&nbsp(2)在Editplus中支持快速浏览制作的网页，快捷键是CTRL+B;
复制链接

扫一扫

专栏目录