JavaScript总结

wangprince2017 2018-07-14

展开全文

目录(?)[+]

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

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

HTML使用小技巧：

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

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

一、使用JavaScript

如果要在HTML中引入JavaScript，则有两种方式：

（1）内部引入：JS代码直接在HTML中编写；

导入的结构如下：

[javascript] view plain copy

1. <script language="JavaScript">

2. ....

3. </script>

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

（2）外部引入：JS代码在外部编写后导入到HTML中；

[javascript] view plain copy

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

2. ....

3. </script>

二、JavaScript语法

1.跳出提示框 alert

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

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

[javascript] view plain copy

1. <html>

2. <head>

3. <title></title>

4. <script language="JavaScript">

5. alert("欢迎光临！");

6. alert("谢谢！");

7. </script>

8. </head>

9. </html>

<!doctype html>

<head>

alert("欢迎光临");

alert(" 谢谢!");

</script>

</head>

<body>

</body>

</html>

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

此语句也是非常常用的，可以直接向页面输出内容；比如：

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

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

[javascript] view plain copy

1. <html>

2. <head>

3. <title></title>

4. <script language="JavaScript">

5. document.write("<h3>Hello world!!!</h3>");

6. </script>

7. </head>

8. </html>

3.定义变量 var

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

例如：

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

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

[javascript] view plain copy

1. <html>

2. <head>

3. <title></title>

4. <script language="JavaScript">

5. var num1 = 5;

6. var str1 = "Hello world!!!";

7. alert(num1);

8. alert(str1);

9. </script>

10. </head>

11. </html>

<!doctype html>

<head>

var Number=5;

var String="Hello World";

alert(Number);

alert(String);

</script>

</head>

<body>

</body>

</html>

4.字符串比较

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

5.函数声明

在JavaScript中，函数声明非常简单，形式如下：

function(参数...){

[返回值;]

}

注意：

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

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

[javascript] view plain copy

1. <html>

2. <head>

3. <title></title>

4. <script language="JavaScript">

5. function fun(i){

6. alert("欢迎"+i);

7. }

8. fun("xiazdong");

9. </script>

10. </head>

11. </html>

<!doctype html>

<head>

function fun(i){

alert("欢迎---"+ i);

}

fun("王闯同学")

</script>

</head>

<body>

</body>

</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] ....

}

[javascript] view plain copy

1. <html>

2. <head>

3. <title></title>

4. <script language="JavaScript">

5. var arr = new Array(3);

6. var str = "";

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

9. arr[i]=i;

10. }

11.

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

13. str=str+arr[i]+"、";

14. }

15.

16. alert(str);

17.

18. </script>

19.

20. </head>

21. </html>

<!doctype html>

<head>

var arr =new Array(5);

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>

<body>

</body>

</html>

三、JavaScript事件

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

"#"表示 当前页；

1.body包含的事件

(1)onLoad：打开网页时调用；

(2)onUnLoad：关闭网页时调用；

2.表单提交事件 onSubmit

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

补充：

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

document是文档的根节点；

比如：

[html] view plain copy

1. <form action="" method="post" onSubmit="fun(this)" name="f">

3. <input type="text" name="name"/><br />

4. <input type="radio" name="radiobutton"/>男<br />

5. <input type="radio" name="radiobutton"/>女<br />

6. <input type="button" value="显示" onClick="show()"/>

8. </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

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

[javascript] view plain copy

1. <html>

2. <head>

3. <title></title>

4. <script language="JavaScript">

5. function fun(v){

6. alert(v);

7. }

9. </script>

10. <form action="" method="post" name="f">

11. EMAIL:<input type="text" name="name"/><br />

12. <select name="favor" onChange="fun(this.value)">

13. <option value="a">a</option>

14. <option value="b">b</option>

15. <option value="c">c</option>

16.

17. </select>

18. <input type="submit" value="提交"/>

19. </form>

20. </head>

21. <body >

22.

23. </body>

24. </html>

<!doctype html>

<head>

function fun(v) { alert(v);

// body...

}

</script>

电子邮件Email: <input type="text" name="email"> <<br>

最爱Favorite:<select name="favor" onchange="fun(this.value)">

<option value="banana">香蕉</option>}

</select>

</form>

</head>

<body>

</body>

</html>

5.失去焦点事件 onblur

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

四、JavaScript中的正则表达式

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

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

比如email的验证：

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

[javascript] view plain copy

1. <html>

2. <head>

3. <title></title>

4. <script language="JavaScript">

5. function validate(f){

6. var email = f.name.value;

7. if(/^\w+@\w+.\w+$/.test(email)){

8. return true;

9. }

10. else{

11. return false;

12. }

13. }

14.

15. </script>

16. <form action="" method="post" onSubmit="return validate(this)" name="f">

17. EMAIL:<input type="text" name="name"/><br />

18.

19. <input type="submit" value="提交"/>

20. </form>

21. </head>

22. <body >

23.

24. </body>

25. </html>

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

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

<!doctype html>

<head>

function validate(f){

var email =f.name.value;

if(/^\w + @\w + .\w+ $/.test(email) ) return true;

else return false;

}

</script>

电子邮件Email: <input type="text" name="email"> <br>

</form>

</head>

<body>

</body>

</html>

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");普通方法打开网页；

[javascript] view plain copy

1. <html>

2. <head>

3. <title></title>

4. <script language="JavaScript">

5. function fun(url){

7. window.open(url,"页面标题","width=500,height=500,resizable=no");

8. }

10. </script>

11.

12. </head>

13. <body >

14. <form action="" method="post">

15. <select name="favor" onChange="fun(this.value)">

16. <option value="#">====请选择====</option>

17. <option value="http://www.baidu.com">百度</option>

18. <option value="http://www.google.com">谷歌</option>

19. </select>

20. </form>

21. </body>

22. </html>

<!doctype html>

<head>

function fun(url){

window.open(url, "页面标题","width=500, height=100")

}

</script>

</select>

</form>

</head>

<body>

</body>

</html>

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

比如：

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

[javascript] view plain copy

1. <html>

2. <head>

3. <title></title>

4. <script language="JavaScript">

5. function fun(){

6. if(window.confirm("确认")){

7. alert("是");

8. }

9. else{

10. alert("否");

11. }

12. }

13. fun();

14. </script>

15. </head>

16. <body >

17. </body>

18. </html>

<html>

<head>

function fun(){

if(window.confirm("确认")) alert("Yes");

else alert("no");

}

fun();

</script>

</head>

</html>

3.页面 重定向

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

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

[javascript] view plain copy

1. <html>

2. <head>

3. <title></title>

4. <script language="JavaScript">

5. function fun(url){

6. window.location=url; //将当前的网页的地址变换

7. }

8. </script>

10. </head>

11. <body >

12. <form action="" method="post">

13. <select name="favor" onChange="fun(this.value)">

14. <option value="#">====请选择====</option>

15. <option value="http://www.baidu.com">百度</option>

16. <option value="http://www.google.com">谷歌</option>

17. </select>

18. </form>

19. </body>

20. </html>

<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://sina.com.cn"> 新浪</option>

</select>

</form>

</body>

</html>

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

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

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

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

父窗口：

[javascript] view plain copy

1. <html>

2. <head>

3. <title></title>

4. <script language="JavaScript">

6. function fun(){

7. window.open("demo03.html","页面标题","width=500,height=500,resizable=no");

8. }

1. </script>

3. </head>

4. <body >

5. <form action="" method="post">

6. <input type="button" value="打开子窗口" onClick="fun()"/>

7. </form>

8. </body>

9. </html>

子窗口:

[javascript] view plain copy

1. <html>

2. <head>

3. <title></title>

5. <script language="JavaScript">

8. function fun(){

9. window.opener.location="http://www.baidu.com";

10. }

1. </script>

1. </head>

3. <body >

4. <input type="button" value="跳转到百度" onClick="fun()"/>

5. </body>

6. </html>

本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。

转藏分享

QQ空间 QQ好友新浪微博微信

献花（0） +1

来自： wangprince2017 > 《Web编程基础--HTML CSS JavaScript》

举报/认领

0条评论

发表

请遵守用户评论公约

类似文章 更多

wangprince2017

关注对话

TA的最新馆藏

[转] 一亩邓州玉米能赚多少钱？
[转] 袁绍、袁术家族是怎样做到「四世三公」的辉煌地位的？
[转] 邓州安众村，你可是汉安众县城故址地？
[转] 【中州作家】刘海武:情萦迪陂寺
[转] 【中州作家】赵显三：图书馆里诗意浓
[转] “茅奖”得主周大新：失独父亲，痛写人生

喜欢该文的人也喜欢更多

热门阅读换一换