JavaScript基础

一，JavaScript的简介

1. 什么是JavaScript？是基于对象和事件驱动的语言，应用于客户端

基于对象：

· java是面向对象，使用对象需要创建

· js里面提供好了一些对象，直接使用

事件驱动：每次滑动鼠标，变换一张图片

客户端：指的是浏览器

2.JavaScript的特点（3个)

(1)交互性

(2)安全性：JavaScript不能访问本地硬盘

(3)跨平台性：

在java里面跨平台，通过虚拟机实现的

JavaScript跨平台，只要在系统里面安装了支持JavaScript的浏览器，就可以运行JavaScript

3. java和JavaScript的区别

(1)java是由sun公司，现在是oracle；JavaScript是网景公司

(2)java面向对象的语言，js是基于对象的语言

(3)java跨平台依靠虚拟机实现，JavaScript只要浏览器就可以运行

(4)JavaScript是弱类型语言，java是强类型语言

比如：在java中定义int x ="10";就是错误的

(5)java运行先编译通过虚拟机运行，JavaScript直接使用浏览器运行

4. JavaScript由3部分组成

ECMAScript：由ECMAScript组织制定语句，语法

BOM： broswer object model：浏览器对象模型

DOM： document object model：文档对象模型

二，js和html的结合方式

有2种结合方式：

第一种：使用html中的标签<script type="text/javascript">js代码</script>

第二种：使用html的标签，引入外部的.js文件<script type="text/javascript"></script>

不能在标签内结束；不要在标签内写内容，不会被执行到

.js文件有2种注释：java的单行注释和多行注释

三，js的变量声明和数据类型

1. 在js中声明变量都是使用关键字var

2. js的原始类型：

(1)在java里面有基本数据类型：8个

(2)在js有原始类型：5个

string类型：var str = "str";

number数字类型：var a = 10;

boolean布尔类型（true false）：var c = true;

null（特殊的引用类型，表示对象引用为空）：var date = null;

undefined（表示定义了一个变量，但是没有赋值）：var a;

(3)typeof(变量名称)：查看当前变量的类型

四，js的引用类型和类型转换

· 引用对象：

object 对象：所有对象都是由这个对象继承而来

Boolean 对象： Boolean原始类型的引用类型

Number 对象：Number原始类型的引用类型

· 类型转换

转换成字符串

转换成数字： parseInt() 和 parseFloat()

强制类型转换：

Boolean(value) - 把给定的值转换成Boolean型

Number(value) - 把给定的值转换成数字(可以是整数或者浮点型)

String(value) - 把给定的值转换成字符串

五，js的语句

· 在java中使用的switch语句、if语句、for语句、while语句、do while语句在js中都一样使用。需要注意的是，在js中所有的变量定义都是var

· java里面的switch语句，在JDK1.7之后，数据类型支持string类型

六，代码练习：向页面输出99乘法表

1. document.write可以直接向页面输出html代码

2. html中的属性和属性值之间可以使用双引号，也可以使用单引号

3. 代码：

document.write("<table border='1' bordercolor='blue'>");//循环9行for(var i=1;i<=9;i++) {<span style="white-space:pre"></span>document.write("<tr>");<span style="white-space:pre"></span>//循环每行的部分<span style="white-space:pre"></span>for(var j=1;j<=i;j++) {<span style="white-space:pre"></span>document.write("<td>");<span style="white-space:pre"></span>//向页面输出内容<span style="white-space:pre"></span>document.write(j+"*"+i+"="+i*j);<span style="white-space:pre"></span>document.write("</td>");<span style="white-space:pre"></span>}<span style="white-space:pre"></span>document.write("</tr>");}document.write("</table>");

七，js的运算符--和java基本一致

1. 算术运算符

+ - * / ......

2. 赋值运算符

+=的含义：x+=y相当于 x=x+y

3. 比较运算符

4. 逻辑运算符

5.和java中不一样的内容：

(1)在js里面不区分整数和小数，所以：var a = 123/1000*1000;结果在java里面是0，在js中是123

(2)字符串的相加和相减操作：如果是字符串和数字相加则是拼接操作，如果是相减则是真正的相减操作，如果不是数字则提示NaN

var a = "12";document.write(a+1);//输出121document.write(a-1);//输出11var b = "a";document.write(b-1);//输出NaN

(3)在js中boolean类型也可以参与运算，true代表1，false代表0

(4)==和===是有区别的：==比较的是值，===比较的是值和类型

var a = 10;if(a=="10") {<span style="white-space:pre"></span>document.write("== yes");//输出}if(a==="10"){<span style="white-space:pre"></span>document.write("== = yes");//不输出}

八，js的数组

· 什么是数组？定义一个变量只能存储一个值，想要存多个值，可以使用数组进行存储

· js里面定义数组的方式：

1. var arr = [];

2. var arr=["a",1,2,true];//可以存储任意类型

3. var arr = new Array(3);//数组长度为3

4. var arr = new Array(3,4,5);//往数组里面存了3个元素

· 查看数组的长度：length

· 获取数组里面的值：

for(var i=0;i<arr.length; i++) {<span style="white-space:pre"></span>var a = arr[i];<span style="white-space:pre"></span>document.write(a);<span style="white-space:pre"></span>document.write("<br/>");}

· 数组的长度：在js中数组的长度是可变的

· 数组的长度是最大的下标+1，之间如果没有赋值直接默认是空字符串

九，js的string对象

1. 字符串数组：创建字符串var a = "abc"; var b = new String("bb");

2. 属性length获取字符串的长度

3. 方法：

第一类：与html相关的方法（设置字符串的样式的方法）= bold() 使用粗体显示字符串。 ** document.write(a.bold());= fontcolor() 使用指定的颜色来显示字符串。 ** document.write(a.fontcolor("red"));= fontsize() 使用指定的尺寸来显示字符串。 ** document.write(a.fontsize(7));= link() 将字符串显示为链接 ** document.write(a.link("04-练习99乘法表.html"));第二类：与java相似的方法（在java里面也有类似的方法）= charAt() 返回在指定位置的字符。 如果位置不存在字符，返回空字符串""** var str = "abcdefg";document.write(str.charAt(1));= concat() 连接字符串 ** document.write(str.concat(str1));= indexOf() 检索字符串，得到检索的字符的位置，如果没有找到返回-1 ** var str2 = "ABCD";document.write(str2.indexOf("R"));= split() 把字符串分割为字符串数组 ** var str3 = "a-b-c";var arr = str3.split("-");document.write("length: "+arr.length);= substr() 从起始索引号提取字符串中指定数目的字符。 = substring() 提取字符串中两个指定的索引号之间的字符 ** var str4 = "MARYJACKLUCY";document.write(str4.substr(2,3));  //RYJ, 第一个参数表示从哪个位置开始，第二个参数表示向后取几个位置的值document.write("<br/>");document.write(str4.substring(2,3)); //R ，第一个参数表示从哪个位置开始，第二个参数到哪个位置结束（不包含这个位置） [2,3)

十，js的Array对象

1. 创建数组

2. 属性 length设置或返回数组中元素的数目

3. 方法

= concat()：连接数组** var arr2 = [6,7,8];document.write(arr1.concat(arr2));= join()：把数组根据指定字符进行分割** var arr3 = new Array(3);arr3[0] = "mary";arr3[1] = "jack";arr3[2] = "lucy";document.write(arr3);document.write("<br/>");document.write(arr3.join("-"));= pop() 删除并返回数组的最后一个元素 ** var arr4 = ["aa","bb","cc"];//输出数组的原始的值document.write("old: "+arr4);//输出执行pop方法之后的返回值document.write("<br/>");document.write("return: "+arr4.pop());//输出执行pop方法之后新的数组内容document.write("<br/>");document.write("new: "+arr4);= push() 向数组的末尾添加元素，并返回新的长度 ** var arr5 = ["zhangsan","lisi","wangwu"];//输出数组的原始的值document.write("old: "+arr5)document.write("<br/>");//输出执行push()方法之后的返回值document.write("return: "+arr5.push("lucy"));//输出执行push()方法之后新的数组内容document.write("<br/>");document.write("new: "+arr5);** 向数组里面使用push方法添加一个数组document.write("<hr/>");var arr6 = ["AAA","BBB"];var arr7 = ["CCC","DDD"];//输出数组arr6的原始的值document.write("old: "+arr6)//输出执行push()方法之后的返回值document.write("<br/>");document.write("return: "+arr6.push(arr7));//输出执行push()方法之后新的数组内容document.write("<br/>");document.write("new: "+arr6);//遍历数组for(var i=0;i<arr6.length;i++) {alert(arr6[i]);}= reverse() 颠倒数组中元素的顺序 ** var arr8 = ["zhaoliu","wanger","niuqi"];document.write(arr8);document.write("<br/>");document.write(arr8.reverse());

十一，js的Math对象

1. 进行数学运算，在Math对象里面的方法，直接使用Math.方法名进行调用

2. 方法

= ceil(x) 对一个数进行上舍入。= floor(x) 对一个数进行下舍入。 = round(x) 把一个数四舍五入为最接近的整数 = random() 返回 0 ~ 1 之间的随机数 ** 代码var a = 10.2;//ceil(x) 对一个数进行上舍入。document.write(Math.ceil(a)); //11document.write("<hr/>");//floor(x) 对一个数进行下舍入。document.write(Math.floor(a));document.write("<hr/>");//round(x) 把一个数四舍五入为最接近的整数document.write(Math.round(a));document.write("<hr/>");//random() 返回 0 ~ 1 之间的随机数 document.write(Math.random());//生成0-9之间的随机数 0.0 -- 0.9之间的值document.write("<hr/>");document.write(Math.floor(Math.random()*10));

十二，js的Date对象

1. 进行日期操作的对象

2. 使用Date对象： new Date()
3. 方法：

= toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。 ** //得到当前的时间var date = new Date();document.write(date.toLocaleString());= 得到当前的年 getFullYear() 从 Date 对象以四位数字返回年份 ** document.write(date.getFullYear());= 得到当前的月 getMonth() 从 Date 对象返回月份 (0 ~ 11) ** document.write(date.getMonth()+1);= 得到当前的星期 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6) ** 如果当前的星期是星期日，返回的是0 ** document.write(date.getDay())= 得到当前的日 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31) = 得到当前的小时  getHours()= 得到当前的分   getMinutes()= 得到当前的秒 getSeconds()** document.write(date.getHours());document.write("<br/>");document.write(date.getMinutes());document.write("<br/>");document.write(date.getSeconds());= 得到毫秒数 getTime() 返回 1970 年 1 月 1 日至今的毫秒数

十三，js的RegRxp对象

1. RegRxp对象表示正则表达式

2. 正则表达式：规定字符串出现的规范

3. 使用： new RegExp("正则表达")

4. 方法：

test() 检索字符串中指定的值，如果存在则返回true，如果不存在匹配的字符返回false

5. 代码：

//创建正则表达式对象var reg = new RegExp("[a]");//创建一个字符串var name = "lisi";//使用正则对象匹配字符串var flag = reg.test(name);document.write(flag);

十四，js的bom对象

1. script标签放置位置

· 建议方法到</body>后面，html的解析是从上到下解析的，如果在head里面就获取不到输入项里面的值，因为还没解析到输入项，所以肯定得不到值

2. 什么是bom：浏览器对象模型

navigator：浏览器的信息

screen：屏幕信息

history：访问地址的历史信息

location：设置url，href设置或者返回完整的URL

window对象：是窗口对象，是顶层对象

· 方法：

setInterval("执行的js代码",毫秒数) 在指定的时间内，重复执行js代码** 有两个参数*** 第一个参数要执行的js代码（js的方法），第二个参数是时间（毫秒数）** 代码setInterval("alert('setinterval');",3000);setTimeout("执行的js代码",毫秒数) 在指定的时间之后，执行js代码，执行一次** 有两个参数*** 第一个参数要执行js代码（js的方法），第二个参数是时间（毫秒数）** 代码setTimeout("alert('settimeout');",3000);clearInterval(id) 取消由 setInterval() 设置的 timeout。clearTimeout(id) 取消由setTimeout() 方法设置的 timeout。

十五，js的全局变量和局部变量

1. 全局变量：在js里面，如果在一个script标签里面定义变量，在页面中其他script标签里面都可以使用

2. 局部变量：在js方法里面定义一个变量，这个变量只能在方法里面使用

3. 浏览器的调试工具：F12

十六，js的全局函数

1. 不属于任何对象，可以直接使用

2，主要的函数方法：

eval(): 把字符串当成js代码执行** var str = "alert('123456');";//alert(str);eval(str);isNaN() 检查某个值是否是数字** 如果是数字返回 false,如果不是一个数字返回 true。parseInt() 解析一个字符串并返回一个整数** var str1 = "123";alert(parseInt(str1)+1);encodeURI() 把字符串编码为 URI** var str2 = "abc测试中文";var encodestr2 = encodeURI(str2);document.write(str2);document.write("<br/>");document.write(encodestr2);decodeURI() 解码某个编码的 URI** var decodestr2 = decodeURI(encodestr2);