一、JavaScript的简介
【1】是基于对象和驱动的的语言,应用于客户端。
1.基于对象:提供了好对象,可以直接拿来使用。
2.事件驱动:html做网站静态效果,javascript做动态效果。
3.客户端:专门指的是浏览器。
【2】js的特点
1.交互性:信息的动态交互。
2.安全性:js不能访问本地磁盘的文件。
3.跨平台性:只要是支持js的浏览器都可以运行js脚本。
【3】js和java的区别
1.javascript是基于对象的,而java是面向对象的。
2.java是强类型语言,javascript示弱类型语言。
【4】js的组成部分
1.ECMAScript:
ECMA:欧洲计算机协会,由他们定义了js的标准语法等。
2.BOM:浏览器对象模型(Broswer Object Model)
3.DOM:文档对象模型(Doucument Object Model)
二、js和html的结合方式
【第一种】使用标签<script type="text/javascript"></script>
<html> <head> <title>javascript实例一</title> </head> <body> <script type="text/javascript"> alert("js和html结合方式一"); </script> </body> </html>【第二种】使用<script>标签,引入外部的js文件
三、js的原始类型和声明变量
js中声明变量使用的关键字是:var
【1】原始类型
1.string:字符串
2.number:数字类型
3.boolean:true和false
4.null:表示对象的引用为空,所有对象的引用都是object
5.undifined:定义了一个变量,但是没有赋值,例如:var b;
【2】typeof(),可以查看当前变量的数据类型。
<html> <head> <title>javascript实例二</title> </head> <body> <script type="text/javascript"> //声明字符串 var str = "123"; //声明数字类型 var num = 123; var type = typeof(num); alert(type);//结果:number //声明布尔类型 var b = true; </script> </body> </html>
四、js中的控制语句
【1】if判断语句
在Javascript中,不为空的字符串,不为0的数字,不为null的对象,不为undefined的对象属性,布尔型true,当它们单独作为判断式中的一个表达式时,js认定它们为true,反之为false。
【2】switch语句
【3】循环语句 for 、while、do-while
<html> <head> <title>javascript实例三</title> </head> <body> <script type="text/javascript"> //if判断语句 var b = 6; if(b == 6) { alert("变量b的值是:" + b); } else { alert("other"); } //switch语句 var a = 3; switch(a) { case 3: alert(3); break; case 4: alert(4); break; default: alert("other"); } //for循环变量 for(var i=0;i<3;i++) { alert(i); } </script> </body> </html>
五、js中的运算符
【1】js中的运算符和java中的运算符基本上相同。
【2】注意几个细节
1.js中不区分整数和小数
2.字符串的相加和相减操作,如果做相加操作,做的是字符串的连接操作;如果做的是相减操作,做的是减法运算。
3.NaN表示不是一个数字。
4.boolean类型也可以进行相加、相减操作。如果设置成true,相当于值为1;如果设置成false,相当于值为0。
【3】引入知识:document.write(),是直接想页面输出语句,可以想页面输出变量、固定值和html代码。
<html> <head> <title>javascript实例四</title> </head> <body> <script type="text/javascript"> var j = 123; /** * j/1000*1000在java中的结果是0。但在js中是不同的, * 在js中不区分整数和小数 */ alert(j/1000*1000); //结果123 var flag = true; alert(flag + 1); //结果2 alert(flag - 1); //结果0 //字符串的相加、相减操作 var b = "123"; alert(b + 1); //结果1231 alert(b - 1); //结果121 </script> </body> </html>
六、JavaScript在页面打印乘法表
<html> <head> <title>javascript实例四</title> </head> <body> <script type="text/javascript"> for(var i = 1; i < 10 ; i++) { for(var j = 1; j <= i ; j++) { document.write(j + "x" + i + "=" + j * i); document.write(" "); } document.write("</br>"); } </script> </body> </html>
七、js中的数组
【1】定义方式(三种)
1.第一种: var arr = [1,2,3] var arr2 = [1,"ab",4]
2.第二种:使用js内置对象Array
var arr = new Array(2);表示定义了一个数组,该数组的长度为2
arr[0] = 1;arr[2] = 2;
3.第三种:使用js内置对象Array
var arr = new Array(1,2,3);表示定义了一个数组,数组里面的元素为1、2、3
【2】注意几点:(1) 数组具有length属性,可以查看数组的长度 (2)数组的长度是可以改变的 (3)数组中可以存放不同类的元素
八、js中函数的定义
这里只介绍两种常用的方式:
【1】使用关键字 function
<html> <head> <title>javascript实例五</title> </head> <body> <script type="text/javascript"> //调用函数 test(4,3); //定义函数 function test(a,b) { alert(a+b); } </script> </body> </html>【2】匿名函数
<html> <head> <title>javascript实例六</title> </head> <body> <script type="text/javascript"> //定义函数 var sub = function(a,b) { alert(a - b); } //调用函数 sub(5,1); </script> </body> </html>
九、js中的全局变量和局部变量
【1】全局变量:在script标签里定义一个变量,这个变量在页面中js部分都可以使用。(在方法外部使用,在方法内部使用,在另外一个
script标签中使用)
【2】局部变量:在方法内部定义一个变量,只能在方法内部使用。
【3】补充一点:
建议把<script>标签放到<body>后面,为什么建议这样呢?假如现在有这样一个需求:在js里面获取input中的值,如果把script放到
head里面是会出问题的,html的解析是从上到下解析的,script标签放到head里面,直接利用js取input里面的值是取不到的,因为页面还没解析到input这一行。
<html> <head> <title>javascript实例七</title> <script type="text/javascript"> var v = document.getElementById("name"); alert(v.value); </script> </head> <body> <input type="text" name="name" id="name" value="aaa"/> </body> </html>此时并不能获取input的值。