JavaScript 简介
1.JavaScript概述
1.1.什么是js
html：定义网页的内容
css：描述了网页的布局
JavaScript：指定了网页的行为
1.2.js的历史
1995年5月，网景公司，叫Brendan Eich的哥们，10天，LiveScript
1995年12月，改名为JavaScript
1996年8月，微软，Jscript
1997-1999年，ECMA国际组织，ECMAScript，基于已有的JavaScript和Jscript，提出了标准的Script语法规则，JavaScript和Jscript都遵循这套标准。
1999-以后，ECMAScript不断的更新
1.3.js的特点
1）脚本语言，不需要编译，解释运行
2）可以插入到html中的编程代码,所有浏览器都支持
3）基于对象，弱类型的语言
4）很容易学习
1.4.js的优点
交互性：可以与用户进行动态交互
安全性：只能在浏览器内部运行，不能访问本地硬盘或者其他资源
跨平台：无论任何平台，只要有浏览器，就能运行
面试题：javascript是一种什么样的语言
答：解释性脚本语言，代码不进行预编译
主要用来向HTML页面添加交互行为
可以直接嵌入HTML页面，也可单独写成js文件并引入
跨平台性，在绝大多数浏览器支持下，可以在多种平台下运行，linux,windows
2.引入js（案例1）
2.1.通过script标签引入
一般在head中添加此标签
2.2.引入外部的js文件
如果js代码特别多，可以通过script标签引入外部的js文件
注意：
1）引入js文件的script标签中，不要添加任何其他js代码
2）这个script标签不要自闭
<!DOCTYPE HTML> <html> <head> <title></title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <!-- 第一种方式 --> <script type="text/javascript"> function fn1(){ alert("你还真敢点"); } </script> <!-- 第二种方式 --> <script type="text/javascript" src="demo.js"></script> </head> <body> <input type="button" value="按钮" onclick="fn2()"/> </body> </html>
demo.js 中：
function fn2(){ alert("你怎么又点了") }
3.语法
3.1.注释
单行注释：//注释内容
多行注释：/* 注释内容 */
3.2.数据类型
3.2.1.基本数据类型（案例2）
>number数值类型
>string字符串
>boolean布尔值
>undefined类型
>null类型
（1）数值类型
在js中, 所有的数值底层都是浮点型¸ 在需要时, 整型和浮点型会自动的进行类型的转换.
例如：2.4+3.6=6
特殊值：
Infinity 正无穷大
-Infinity 负无穷大
NaN (not a number) 非数字 ：NaN和任何数值都不相等, 包括它本身. 如果要判断一个值是否是非数字, 不能用 NaN == xx 来判断, 而是应该使用 isNaN(xx) 进行判断。
在js中, 为number类型提供了对应的包装对象 – Number。
（2）字符串类型
在js中, 字符串类型是基本数据类型的一种, 字符串常量, 可以用单引号或者双引号引起来！
例如：var s1 = “aaa”; var s2 = ‘bbb’;
在js中, 为string类型提供了对应的包装对象 – String。
（3）布尔类型
boolean, 值为true或false
在js中, 为boolean类型提供了对应的包装对象 – Boolean。
（4）undefined
undefined类型的值只有一个, 就是undefined. 表示变量未定义。如果声明了一个变量, 但是没有初始化值, 该变量的值就是undefined
例如：var a; 则a的值即为undefined。
（5）null
null类型的值也只有一个, 就是null, 表示此处的值现在为空。常用来作为函数的返回值, 表示该返回值是一个没有任何内容的空对象
3.2.2.复杂数据类型
复杂数据类型：对象（普通对象，数组，函数..）后面讲
3.2.3.数据类型的转换
在js中，在需要的时候，数据类型会自动进行转换，转换规则为：
数值类型:
转字符串类型, 直接转成对应值的字符串, 3 --> "3"
转布尔类型, 0和NaN转成false, 其他数值转成true
在需要时, 会自动转成对应的包装对象 100 --> new Number(100)
字符串:
空字符串(""): 转数值为0, 转布尔值为false
非空纯数值字符串("123"): 转数值为对应的数值, 转布尔值为true
非空非数值字符串("abc"): 转数值为NaN, 转布尔值为true
在需要时, 会自动转成对应的包装对象. "aaa" --> new String("aaa")
布尔类型:
true: 转数值为 1, 转字符串为"true"
false: 转数值为 0, 转字符串为"false"
在需要时, 会自动转成对应的包装对象.
undefined
转数值为NaN, 转字符串为"undefined", 转布尔值为false, 转对象会抛出异常!
null
转数值为 0, 转字符串为"null", 转布尔值为false, 转对象会抛出异常!
/** * */ ////引入js,在 Html 的头部中的 script标签中引入使用-------------------- function fn2() { alert("你怎么又点了"); document.write(Date()); } ////对数组中的数据类型进行定义-------------------------------------- /*var a = [3>2>1,1<2<3,7>8>9,9<8<7] alert(a[0]) //为false alert(a[1]) //为true alert(a[2]) alert(a[3]) */ ////定义变量----- //直接赋值，类型自动定义,后面都没有加 ; var i = 3 var j = "abc" var k ='3' //跟Java中输出类似，还有一个弹出式的对话框alert()也是这么使用： document.write(i+","+j+k) //alert(i + "," + j + k) ////运算符，跟Java类似，但有两个 == 和 === 需要进行区别一下----- /*alert(666 == "666") //返回 true，因为类型不一样，会先将666隐式转换，再与 "666" 判断，但是类型相同就直接比较 alert(666 === "666") *///返回false，严格相同，类型不同就直接返回false,相同再比较，相同返回true,不同返回false //返回对应值的类型 /*var x = true alert(typeof x) //返回 boolean alert(typeof 6 +"66") //进行了拼接，返回 number66 */ //删除数组， //会把这个地方给空出来,是一个 undefined 类型的 /*var a = [1,2,3,true,"nihao"] delete a[1] alert(a[1])*/ /////分支结构 /*if(6){ alert("我却如此暴躁") }else{ alert("世界如此美好") } if("123"){ alert("大师兄，师傅被妖怪抓走了") }else{ alert("师傅，大师兄说得对") } */ ///////函数------------------------------------------------- //定义方法不需要类型 /*function fn1(name, age) { alert(name + ":" + age) } fn1("tangdiao",18) //或者,将方法名放到前面去 fn2 = function(name, age){ alert(name + "," + age) } fn2("tangdiao",2)*/ //////数组-------------------------------------------------- //创建数组 //数组中可以定义任意类型的数据， //数组的长度是可变的 /*var arr1 = new Array()//创建空数组 var arr2 = new Array(10) var arr3 = new Array("123",3,true,'g') //arr3.length = 5 alert(arr3)*/ ////////内置对象---------------------------------------------- ///字符串对象---------------------- //创建字符串 /*var str = new String("nihao") var str2 = "jiezheyangdingyi" alert(str + "," + str2) alert(str.length + str.charAt(2))//返回字符串的长度5和任意一个数据的位置h //还有一些方法用的时候调用就是了 */ ///RegExp 对象（正则）-------------- //标识符: g -> Global 全局查找 i -> IgnoreCase 忽略大小写 //如果正则需要从头到尾都匹配，需要以"^"开头，以"$"结尾。 var rg1 = new RegExp("","") var rg2 = /xxxx/;//这里需要加上 ;结束 //检查字符串 str = "123" rg2.test(str) ///Array 对象--------------------- var arr1 = new Array() var arr2 = ["123",5,true,'y',9] //一些属性和方法 //alert(arr2.length) //返回字符串的长度 var arr3 = new Array(1,3,4) //alert(arr3.concat(arr1,arr2)) //返回 1，3，4，123,5,true,y,9 将几个数组合并，返回一个新的数组，长度增大了 //alert(arr2.join("-"))//返回 123-5-true-y-9，返回一个 String 类型的，但是原先的数组不会改变 //alert(arr2.reverse()) //返回 9，y,true,5,123，在 java中需要一个循环，前后颠倒 //alert(arr2.slice(1,4)) //返回 5，true,y,含头不含尾 //alert(arr2.splice(1,3,"zzz")) //返回 5，true,y 是删掉的元素，原先的位置就一个 zzz 了 //alert(arr2.pop()) //返回 9，是被移除了 //alert(arr2.push("l")) //返回6，是数组长度，最后一个元素为l //alert(arr2.shift()) //返回 123,是被移除了 //alert(arr2.unshift("nihao1")) //返回 6，数组长度，第一个为 nihao1 //alert(arr2.sort()) //返回排序后的数组 ///Date对象-------------------- var date1 = new Date() //alert(date1) //返回 Wed Aug 15 2018 10:25:08 GMT+0800（中国标准时间） //alert(new Date(2018,8,15)) //指定日期，注意月是从 0 开始，这里就是 9 月 //alert(date1.toLocaleString()) //返回 2018/8/15 10：30，转为本地时间的格式 //还有几个是获取年月日，星期几，毫秒数的，用的时候查看一下就行了 ///Math 对象------------------ //可以直接拿来使用！！ //alert(Math.PI) //返回圆周率的值：3.141592653 //alert(Math.exp(1)) //自然对数e的几次幂，这里是1次，为：2.7182818 //alert(Math.abs(-7)) //返回一个数的绝对值 //alert(Math.ceil(3.1415)) //向上取整，为 4 //alert(Math.floor(3.1415)) //向下取整，为3 //alert(Math.round(3.1415)) //四舍五入为整数，这里是 3 ///全局对象（gloabal）------------- //alert(typeof parseFloat("3.14")) //将这个字符串转化为 float,为数字 3.14 //alert(typeof parseInt("9.99")) //将这个字符串转化为整型，为 9 //alert(isNaN("abcd")) //返回 true //alert(isNaN("123")) //返回 false，判断一个值是否为非数字，不是数字就返回true,是数字就返回 false //eval("alert(1 + 2)") //加不加引号都差不多，将里面的按代码执行，为 3 ///自定义对象-------------------- /*function Person(){} var p3 = { "name":"tangdiao", "age":18, "run":function(){ alert(this.name + this.age) } } //取值 alert(p3.name) alert(p3["name"]) alert(p3.run()) //调用有方法的后面需要加上（），不然就是取那个字符串的值 function Person2(name,age){ this.name = name, this.age = age, this.run = function(){ alert(name + ":" + age) } } var p1 = new Person2("唐雕",19) alert(p1.name) alert(p1.age) p1.run()*/ //////DHTML------------------------------------------- /////BOM--------------- ///Window对象 function clickfn(obj){ if(obj.value == "123"){ obj.value = "456" }else{ obj.value = "123" } } //获得焦点触发 //需要在html的onfocus()事件关联这个方法 function focusfn(obj){ obj.value = "请输入密码" } //失去焦点触发， //需要在html的onblur()事件关联这个方法 function blurfn(obj){ obj.value = "你离开了" } //这个方法只需要在js文件下定义，不需要到html中再写 //在页面加载完毕就触发这个事件 /*onload = function(){ var inp = document.getElementById("input3") alert(inp.value) }*/ //confirm提示框的使用 function confirmfn(){ if(confirm("是否删除商品")){ alert("商品已删除") }else{ alert("商品还在") } } //location对象----------- //获取当前的url（该html本地路径） /*alert(location.href) alert("此页面将要跳转到tmooc") location.href = "http://www.tmooc.cn/" */ //Dom 对象--------------- //对元素进行增删改 //id function demo1(){ var inp = document.getElementById("input2") alert(inp.value) inp.value = "兰姐" } //name //注意：这里是Elements， //还有匹配的后面要有一个[],定义查出来的第几个 function demo2(){ var inp = document.getElementsByName("name1")[0] alert(inp.value) } //tagname** function demo3(){ var inp= document.getElementsByTagName("name")[0] alert(inp.value) } //font** function demo4(){ var inp = document.getElementById("input1").getElemetsByTagName("font") alert(inp.innerHtml) inp.innerHtml = "<font color = 'green'>我要变身啦！！</font>" }
3.3.如何定义变量
在js中有数据类型，但是变量不区分数据类型，所以，js是弱类型语言
在js中声明变量，可以通过var关键字声明
例如：var i = 5; var a = “abc”;
3.4.运算符（案例3）
js中的运算符和java中的运算符基本一致
不同点：
==：如果数据类型不同，会先转换数据类型，再比较，如果类型相同，直接比较
===:严格相等，如果数据类型不同，则直接返回false，如果类型相同，才会进行比较。
typeof：可以返回变量、常量、表达式的数据类型
格式：var x = 123 typeof x
delete：删除数组中的元素或者对象的属性
格式：var arr = [123,”abc”,true] delete arr[1]
|
//1.分别用"=="和"==="判断数字666和字符串"666"是否相等 //alert(666 == "666")//true //alert(666 === "666")//false
//2.分别对x进行不同的赋值，利用typeof查看x的数据类型 var x = true; //alert(typeof x)
//3.问题：判断typeof 6+"66" 的值是什么？ //alert(typeof 6+"66")
//4.删除下面数组中的第二个元素 var arr = [111,"abc",true]; alert(arr) delete arr[1] alert(arr) alert(arr[1])//undefined |
3.5.语句
js的语句和java的语句基本一致
if语句：
判断时，会先将数据类型转换为boolean值
switch语句
和java中一样，也支持字符串
循环语句
while、do...while、for，语法与java一致
注意：js不支持增强for循环
3.6.函数(案例4)
定义方式一：通过function关键字定义
格式： function 函数名(形参列表){
函数体
}
调用：函数名(参数)
定义方式二：通过函数表达式定义
格式：var fn2 = function(形参列表){
函数体
}
调用：函数名(参数)
|
//方式一 function fn1(name,age){ alert(name+":"+age) } //fn1("尼古拉斯赵四",18);
//方式二 var fn2 = function(name,age){ alert(name+":"+age) } fn2("小沈阳",17); |
3.7.数组
创建一：通过构造函数创建数组
var arr1 = new Array() //创建空数组
var arr2 = new Array(10) //创建长度为10的空数组
var arr3 = new Array(123,”abc”,true) //创建有初始值的数组
创建二：通过数组直接量创建
var arr4 = [] //创建空数组
var arr5 = [“aaa”,111,false] //创建有初始值的数组
注意：
1)数组可以存放任意数据类型
如：var arr5 = [“aaa”,111,false]
2)数组的长度可以随便改变
如：var arr5 = [“aaa”,111,false] arr5.length = 1;
3)如果数组中的某一位置没有元素，这个位置的值为undefined
如：var arr5 = [“aaa”,111,false] arr5[10]
3.8.内置对象（案例5）
3.8.1.String对象
创建：
var str1 = new String(“xxx”); //创建字符串对象
var str2 =“xxx”; //创建字符串基本类型，但是也可以
常用属性和方法：
str.length 返回字符串长度。
str.charAt(index) 返回指定索引位置处的字符。
例如：var str = "abcdeabc"; str.charAt(3) // d
str.indexOf(subString, startIndex) 返回第一次出现子字符串的位置。
例如：var str = "abcdeabc"; x.indexOf("bc",2) // 6，从第3个开始数
str.lastIndexOf(substring, startindex) 返回最后出现子字符串的位置。
例如：var str = "abcdeabc"; x.lastIndexOf("bc",8); // 6，从后往前数
str.split(delimiter) 将字符串按照指定字符分割为字符串数组。
例如：var str = "a:b:c:d"; str.split(":") //返回为一个数组[a,b,c,d]
str.slice(start, end) 提取字符串的某个部分，含头不含尾。
例如：var str = "abcdeabc"; str.slice(2,4); // cd
str.substr(start, length) 返回从指定位置开始的指定长度的子字符串。
例如：var str = "abcdeabc"; str.substr(2,4); //cdea
str.toLowerCase( ) 字符串中的字母转换为小写。
例如：var str = "ABCDE"; str.toLowerCase(); //abcde
str.toUpperCase( ) 字符串中的字母转化为大写。
例如：var str = "abcde"; str.toUpperCase(); //ABCDE
str.match(regexp) 在字符串中查找指定匹配正则表达式的值。
str.replace(regexp, replaceText) 字符串中匹配正则的值替换为其他值。
str.search(regexp) 查找与正则表达式匹配的第一个子字符串的位置。
3.8.2.RegExp对象（正则）
创建：
var reg1 = new RegExp("", "");
var reg2 = /xxx/;
标识符: g à Global 全局查找 i à IgnoreCase 忽略大小写
如果正则需要从头到尾都匹配，需要以”^”开头，以”$”结尾。
reg.test(str); 检查字符串是否符合该正则, 如果符合返回true, 不符合返回false！！！
3.8.3.Array对象
创建：
var arr1 = new Array();
var arr2 = [];
常用属性和方法：
arr.length 返回数组中元素的个数
例如：var arr = ["a","b","c"]; arr.length; // 3
arr.concat(arr1,arr2,arr3...) 将多个数组合并成一个
例如：
var arr1 = ["a","b","c"]; var arr2 = ["d","e","f"]; var arr3 = ["x","y","z"];
arr1.concat(arr2,arr3); // ["a","b","c","d","e","f","x","y","z"]
arr.join(string) 将数组中所有元素按照指定字符串连接成一个字符串
例如：var arr = ["aaa",123,true]; arr.join("-"); // aaa-123-true
arr.reverse( ) 返回一个元素顺序被反转的 Array 对象。
例如：var arr = ["a","b","c"]; arr.reverse(); //["c","b","a"]
arr.slice(start, end) 返回一个数组的一段，含头不含尾。
例如：var arr = ["a","b","c",1,2,3]; arr.slice(2,4); // ["c",1]
arr.splice(start, deleteCount,value...)
从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。
例如：var arr = ["a","b","c","d","e","f"]; arr.splice(2,2,"zzz");
// 返回值为["c","d"]，arr则变为["a","b","zzz","e","f"]，中间被替换
arr.pop( ) 移除数组中的最后一个元素并返回该元素
例如：var arr = ["aaa",123,"x",true,8]; arr.pop();
//返回值为 8，arr则变为["aaa",123,"x",true]
arr.push(value) 在数组的末尾加上一个或多个元素，并返回新数组的长度值
例如：var arr = ["aaa",123,"x",true,8]; arr.push("last")
//返回值为6，arr则变为 ["aaa",123,"x",true,8,"last"]
arr.shift( ) 移除数组中的第一个元素并返回该元素
例如：var arr = ["aaa",123,"x",true,8]; arr.shift()
//返回值为 "aaa" ，arr则变为[123,"x",true,8]
arr.unshift(value) 为数组的开始部分加上一个或多个元素,并且返回该数组的新长度
例如：var arr = ["aaa",123,"x",true,8]; arr.unshift("first")
//返回值为6，arr则变为["first","aaa",123,"x",true,8]
arr.sort(sortfunction) 返回排序后的数组。
3.8.4.Date对象
创建：
var date1 = new Date(); // 当前时间
var date2 = new Date(年,月,日[,时,分,秒]); //指定时间，可以只有年月日
注意：当创建指定时间的时候，月是从0开始，例如：
var date2 = new Date(2008,7,8,20,0,0);
这个时间是2008年8月8日晚上8点整
常用方法：
data.toLocaleString() 把日期(一个数值)转变成本地日期格式字符串
例如：var date2 = new Date(2008,7,8); date2.toLocaleString();
// "2008/8/8 上午12:00:00"
data.getFullYear() 获取日期对象中所表示时间的年份
例如： var date = new Date(2008,7,8); date.getFullYear(); // 2008
data.getMonth() 获取日期对象中所表示时间的月份，返回一个 0 到 11 之间的整数，0表示一月。
例如：var date = new Date(2008,7,8); date.getMonth(); // 7
data.getDate() 获取日期对象中所表示一个月的日期值，返回值是一个处于 1 到 31 之间的整数，代表了相应的日期值。
例如：var date = new Date(2008,7,8); date.getDate(); // 8
data.getDay() 获取日期对象中所表示一个周的日期值。 返回的值是一个处于 0 到 6 之间的整数，0表示周日，6表示周六。
例如：var date = new Date(2008,7,8); date.getDay(); // 5，表示周五
data.getTime() 返回从 1970 年 1 月 1 日至指定时间的毫秒数。
例如：var date = new Date(2008,7,8); date.getTime(); //1218124800000
3.8.5.Math对象
Math可以直接拿来用！
常用属性和方法：
Math.PI 返回圆周率的值，约等于 3.141592653589793。
例如：var num = Math.PI; // num 的值为3.141592653589793。
Math.exp(number) 返回 e（自然对数的底）的幂。
例如：Math.exp(1) // e1 约等于2.718281828459045
Math.abs(number) 返回数字的绝对值。
例如：Math.abs(-5) // 5
Math.ceil(number) 向上取整
例如：Math.ceil(3.14) // 4
Math.floor(number) 向下取整
例如：Math.floor(3.14) // 3
Math.round(number) 四舍五入到整数
例如：Math.round(5.67) // 6
Math.random() 返回介于 0 和 1 之间的伪随机数。
3.8.6.全局对象（global）
全局对象没有语法。直接调用其方法。
parseFloat(numString) 将字符串转换成浮点数。
例如：parseFloat("13.14") // 返回number类型的13.14
parseInt(numString) 将字符串转成整数，非四舍五入。
例如：parseInt("9.99") // 返回number类型的9
isNaN(numValue) 判断一个值是否为非数字。
例如： isNaN("abc") // true
isNaN("123") // false
eval(codeString) 判断一个字符串并将其以脚本代码的形式执行
例如：eval("alert(1+2)"); //会直接将"alert(1+2)"当作代码执行，弹出3
|
//一、字符串String //1.将字符串中所有的"java"提取到一个数组中 var str = "zhang,java,wang,JAVA,li,java,zhao"; var reg1 = /java/g //alert(str.match(reg1));
//2.将字符串中所有的"java"不分大小写提取到一个数组中 var reg2 = /java/gi //alert(str.match(reg2))
//3.将所有的"java"不分大小写，全部换成"C++" //alert(str.replace(reg2,"C++"))
//4.查找第一个"java"出现的位置(不分大小写) //alert(str.search(reg2))
//二、正则 //检查str字符串是否符合如下正则 var reg3 = /wang/; var reg4 = /^wang$/;
//alert(reg3.test(str)) //alert(reg4.test(str))
//三、数组 //对arr进行排序，思考排序后的顺序 var arr = ["aaa",123,"x",true,8]; //var str = arr.pop(); //alert(str) //alert(arr) //var i = arr.push("last") //alert(i) //alert(arr)
var arr1 = arr.sort() //alert(arr1)
var date = new Date(2008,7,8) //alert(date) var date1 = date.toLocaleString(); //alert(date1)
//四、Math对象 //1.返回一个1-100之间的随机整数 //alert(Math.PI) //alert(Math.ceil(Math.random()*100)) //2.返回一个30-50直接的随机整数 //alert(Math.round(Math.random()*20+30))
eval("alert(1)") |
3.9.自定义对象（案例6）
方式一：通过构造函数定义
格式：function Person(){} //创建一个空对象
function Person2(参数1，参数2..){
对象内容....
}
方式二：通过对象直接量定义
格式：var p3 = {
“name”:”张三”,
“age” : 18,
“run” : function(){}
}
对象中取值：
p1.key 或 p1[“key”]
|
//1.分别用两种方式定义一个对象，包含姓名和年龄，以及弹出姓名年龄的方法 //方式一 function Person(){} var p1 = new Person(); p1.name="刘能"; p1.age = 19; p1.run = function(){ alert(this.name+":"+this.age) } //alert(p1.name) //p1.run();
function Person2(name,age){ this.name = name; this.age = age; this.run = function(){ alert(this.name+"--"+age) } } var p2 = new Person2("宋小宝",20); //p2.run() var a = "name" //alert(p2[a])
//方式二 var p3 = { "name" : "小沈龙", "age" : 16, "run" : function(){ alert(this.name+"#"+this.age) } } p3.run(); |
<!DOCTYPE HTML> <html> <head> <title></title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <!-- js内置对象 --> <script type="text/javascript"> //一、字符串String //1.将字符串中所有的"java"提取到一个数组中 var str = "zhang,java,wang,JAVA,li,java,zhao"; var reg1 = /java/g //alert(str.match(reg1)); //2.将字符串中所有的"java"不分大小写提取到一个数组中 var reg2 = /java/gi //alert(str.match(reg2)) //3.将所有的"java"不分大小写，全部换成"C++" //alert(str.replace(reg2,"C++")) //4.查找第一个"java"出现的位置(不分大小写) //alert(str.search(reg2)) //二、正则 //检查str字符串是否符合如下正则 var reg3 = /wang/; var reg4 = /^wang$/; //alert(reg3.test(str)) //alert(reg4.test(str)) //三、数组 //对arr进行排序，思考排序后的顺序 var arr = ["aaa",123,"x",true,8]; //var str = arr.pop(); //alert(str) //alert(arr) //var i = arr.push("last") //alert(i) //alert(arr) var arr1 = arr.sort() //alert(arr1) var date = new Date(2008,7,8) //alert(date) var date1 = date.toLocaleString(); //alert(date1) //四、Math对象 //1.返回一个1-100之间的随机整数 //alert(Math.PI) //alert(Math.ceil(Math.random()*100)) //2.返回一个30-50直接的随机整数 //alert(Math.round(Math.random()*20+30)) eval("alert(1)") </script> </head> <body> js内置对象演示 </body> </html>
4.DHTML
4.1.DHTML概述
DHTML: Dynamic HTML 动态的 html
DHTML并不是一门新的技术, 而是将现有的HTML, CSS, JavaScript整合在一起, 形成了DHTML技术.
DHTML分为BOM和DOM。
BOM：Browse Object Modle 即浏览器对象模型，其中封装了浏览器操作相关对象。
DOM：Document Object Modle 即文档对象模型，将整个HTML文档按照文档结构组织成了树形结构。
4.2.BOM
4.2.1.window对象
此对象是全局对象，可以直接调用方法或者属性
常用事件：
onclick事件 - 当窗口被电击时触发
onfocus事件 - 当窗口获取焦点时触发
onblur事件 - 当窗口失去焦点时触发
onload事件 - 当整个html文档加载完之后触发
常用方法：
alert() - 弹出提示框
confirm() - 弹出确认框，电击确定，返回true，反之为false
location对象
属性
href - 可以获取或者设置浏览器的地址栏
|
//window对象 //1.在按钮点击时弹出提示框 function clickfn(){ alert("恭喜，您点中了") }
//2.输入框1获得焦点时弹出提示框 function focusfn(){ alert("获得焦点了") }
//3.输入框2失去焦点时弹出提示框 function blurfn(){ alert("失去焦点了") }
//4.弹出输入框3中的value值 //获取输入框3的input按钮 onload = function(){ var inp = document.getElementById("input3"); //alert(inp.value) }
//5.点击删除商品按钮，弹出提示是否删除,如果确定，则弹出商品已删除，否则弹出商品还在 function delfn(){ if(confirm("是否删除")){ alert("商品已删除") }else{ alert("商品还在") }
}
//location对象 //1.弹出当前url //alert(location.href)
//2.将页面url设置为"http://www.baidu.com" alert("此页面将要跳转到tmooc") location.href = "http://www.tmooc.cn" |
4.3.DOM
4.3.1.获取元素
document.getElementById("id值"); 通过id值获取指定id的元素
document.getElementsByName("name属性值"); 通过name属性获取指定name值的所有元素组成的集合数组
document.getElementsByTagName("元素名"); 通过元素的名称获取指定元素名的所有元素组成的集合数组
value属性： 获取或设置输入框的value值
innerText： (部分浏览器不支持) 获取或设置元素内的文本内容
innerHTML： 获取或设置元素的html内容
4.3.2.对元素进行增删改
dom案例一：
|
/* --通过ID获取并弹出用户名输入框的值-- */ function demo1(){ var inp1 = document.getElementById("username") alert(inp1.value) inp1.value = "兰姐" } /* --通过name属性获取并弹出密码输入框的值-- */ function demo2(){ var inp2 = document.getElementsByName("password")[0] alert(inp2.value) } /* --通过元素名称获取并弹出确认密码输入框的值-- */ function demo3(){ var inp3 = document.getElementsByTagName("input")[2] alert(inp3.value) } /* --获取元素内容-- */ function demo4(){ var p = document.getElementById("pid").getElementsByTagName("font")[0] //alert(p.innerText) alert(p.innerHTML) p.innerHTML = "<font color='green'>我要变身了。。。</font>" } |
一个面试题：添加 删除 替换 插入到某个节点的方法
答：添加：obj.appendChild(childNode)
删除：obj.removeChild(childNode)
替换：obj.replaceChild(newChild,oldChild)
插入：obj.innersetBefore(newChild,oldChild)
