JavaScript
JavaScript概述
JavaScript是干什么的?
-
HTML 定义了网页的内容
-
CSS 描述了网页的布局
-
JavaScript 指定了网页的行为
js特点
- JavaScript 是脚本语言,不需要编译,是解释运行的语言。
- JavaScript 是可插入 HTML 页面的编程代码,可由所有的现代浏览器执行。
- JavaScript 是基于对象,弱类型的语言。
- JavaScript 很容易学习。
js优点
- 交互性:可以与用户进行动态交互。
- 安全性:只能在浏览器内运行,不能访问本地硬盘或其他资源。
- 跨平台:有浏览器即可运行,与操作环境无关。
在html中引入js代码
- 直接在html中书写js代码:在html中可以在script标签内部直接书写js代码,通常写在head中!
- 引入外部的js文件
- 如果js代码特别多的情况下,可以将js代码抽取到一个独立的文件中,在html中通过script标签引入该js文件
- 注意: script标签如果是用来引入外部的js文件,标签内部不要再书写js代码,并且标签不要自闭,否则可能会导致引入失败
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<!-- 第一种方式 -->
<script type="text/javascript">
// 定义一个函数fn1,并弹出提示框
function fn1() {
alert("为什么要点我");
}
</script>
<!-- 第二种方式 -->
<!-- <script></script> 之间不能有任何东西-->
<script type="text/javascript" src="1.js"></script>
</head>
JavaScript语法
-
注释
- 单行注释: // 注释内容
- 多行注释: /* 注释内容 */
-
数据类型
-
基本数据类型:数值类型(number)、字符串类型(string)、布尔类型(boolean)、undefined类型、null类型
-
数值类型
- 在js中, 所有的数值底层都是浮点型, 在需要时,整型和浮点型会自动的进行类型的转换。例如:
2.4+3.6=6
Infinity
正无穷大 -Infinity
负无穷大NaN (not a number)
非数字 :NaN和任何数值都不相等, 包括它本身;如果要判断一个值是否是非数字,不能用 NaN == xx 来判断, 而是应该使用isNaN(xx)
进行判断。- 在js中, 为number类型提供了对应的包装对象 –
Number
。
- 在js中, 所有的数值底层都是浮点型, 在需要时,整型和浮点型会自动的进行类型的转换。例如:
-
字符串类型
-
在js中,字符串类型是基本数据类型的一种,字符串常量,可以用单引号或者双引号引起来
例如:
var s1 = "aaa"; var s2 = 'bbb';
-
在js中,为string类型提供了对应的包装对象 –
String
-
-
布尔类型
-
boolean,值为true或false
-
在js中,为boolean类型提供了对应的包装对象 –
Boolean
。
-
-
undefined
- undefined类型的值只有一个,就是
undefined
表示变量未定义。如果声明了一个变量,但是没有初始化值,该变量的值就是undefined
例如:var a;
则a的值即为undefined。
- undefined类型的值只有一个,就是
-
null
- null类型的值也只有一个,就是null,表示此处的值现在为空。常用来作为函数的返回值, 表示该返回值是一个没有任何内容的空对象
-
复杂数据类型
- 复杂数据类型:
对象 (普通对象 数组 函数)
- 复杂数据类型:
-
js中的数据类型的转换
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
,转对象会抛出异常!
- 转数值为
<!-- 数据类型转换 -->
<script type="text/javascript">
//1.数值类型
//1.1.弹出数字6与字符串"66"的和
alert(6+"66");
//1.2.对数字进行判断,若为0或NaN(false),则弹出"世界如此美好!" 若为其他数字,则弹出"我却如此暴躁!"(true)
if (0){
alert("我却如此暴躁!")
}
else{
alert("世界如此美好!")
}
//2.字符串
//2.1.弹出字符串"1000"与数字334的差
alert("1000" - 334) // 666
//2.2.字符串判断,若为空字符串(""),弹出"师傅,大师兄说的对!",若为非空字符串,弹出"大师兄,师傅被妖怪抓走了!"
if(""){
alert("大师兄,师傅被妖怪抓走了!")
}
else{
alert("师傅,大师兄说的对!")
}
//3.布尔类型
/* 已知:var a = [3>2>1, 1<2<3] 则a[0]和a[1]的值分别是什么?*/
var a = [3>2>1, 1<2<3]
alert(a[0]) // false 3>2 true true > 1 --- > 1> 1 false
alert(a[1]) // true 1<2 true true < 3 --- > 1 <3 true
</script>
变量的定义
- 在js中有数据类型,但是变量不区分类型,所以称js是一门弱类型的语言。
- 在js中通过var关键字声明变量,变量不区分类型,可以指向任意类型的值!
- 例如:
var s1 = "aaa";
var i = 100;
运算符
- jS中的运算符和java中的运算符大致相同
- JS中与java运算符不同之处:
- 比较运算符除了
==
,还有===
==
在进行比较时, 如果两端的值不是同一种数据类型, 先自动转成同一种数据类型,再进行比较, 如果转换之后再比较,相等则返回true,不相等则返回false;===
为严格相等,在进行比较时, 如果两端的值不是同一种数据类型,直接返回false;如果是同一种类型再次比较值是否相等,是则返回true,不是则返回false
- typeof: 用来返回变量/常量/表达式的数据类型
格式:var x = 123; typeof x
- delete: 用来删除数组中的元素或者删除对象中的属性或方法
<!-- 运算符演示 -->
<script type="text/javascript">
//1.分别用"=="和"==="判断数字666和字符串"666"是否相等
alert(66 == "66") // true
alert(66 === "66") // false
//2.分别对x进行不同的赋值,利用typeof查看x的数据类型
var x = 12.3
alert(typeof x) // number
x = "12.3"
alert(typeof x) // string
x = true
alert(typeof x) // boolean
//3.问题:判断typeof 6+"66" 的值是什么?
alert(typeof 6 + "66") // number66
alert(typeof (6 + "66")) // string
//4.删除下面数组中的第二个元素
var arr = [111,"abc",true];
alert(arr) // 111,abc,true
delete arr[1]
alert(arr[1]) // undefined
</script>
语句
- js中的语句和java中的语句也大致相同
-
if条件语句:如果判断条件不是布尔类型,会自动转换成布尔值
-
switch语句:语法和Java中大致相同,并且也支持字符串类型
-
循环语句
-
while(){}
-
do{}while()
-
for(){}
语法和Java中的很相似,但是js中不支持增强for循环
-
函数
-
通过function关键字来定义一个函数
function 函数名(形参列表){ // 函数体 }
调用函数: 函数名(实参列表)
-
通过函数表达式来定义一个函数
var fn = function (形参列表){ // 函数体 }
调用函数: 函数名(实参列表)
<script type="text/javascript">
// 分别用两种方式定义一个方法,将姓名与年龄作为参数传入,调用方法时弹出姓名与年龄
//方式一
function fn1(name, age){
return name + ":" + age;
}
var c = fn1("lili",20);
alert(c);
//方式二
var fn2 = function(name, age){
alert(name + ":" + age);
}
fn2("Sam",18);
</script>
数组
-
通过Array()构造函数来创建数组
var arr1 = new Array(); //创建一个空数组 var arr2 = new Array(10); //创建一个长度为10的空数组 var arr3 = new Array("aa", 55, true); //创建一个具有指定初始值的数组
-
通过数组直接量来创建数组
var arr4 = []; //创建一个空数组 var arr5 = ["x", 100, false]; //创建一个具有指定初始值的数组
-
数组中的细节问题:
- 数组的长度可以被任意改变
var arr =["aa", "bb", "cc"]; arr.length=1; //["aa"]
- 如果数组中某一个位置没有元素, 该位置的值为undefined
var arr =["aa", "bb", "cc"]; arr[10]; //undefined
- js中的数组可以存放任意类型的数据
var arr = ["x", 100, false];
js中的对象
内置对象
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)
:从下标startIndex开始,返回第一次出现子字符串的位置。var str = "abcdeabc"; str.indexOf("bc",2); // 6
-
str.lastIndexOf(substring, startindex)
: 从startindex开始,从后向前返回最后出现子字符串的位置。var str = "abcdeabc"; str.lastIndexOf("bc",7); // 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)
: 查找与正则表达式匹配的第一个子字符串的位置。
-
RegExp 对象(正则表达式)
-
创建:
var reg1 = new RegExp("", ""); var reg2 = /xxx/;
-
标识符:
g --- > Global
全局查找i --- > IgnoreCase
忽略大小写 -
如果正则需要从头到尾都匹配,需要以
"^"
开头,以"$"
结尾 -
reg.test(str)
: 检查字符串是否符合该正则, 如果符合返回true,不符合返回false
<script type="text/javascript">
//一、字符串String
//1.将字符串中所有的"java"提取到一个数组中
var str = "zhang,java,wang,JAVA,li,java,zhao";
var reg1 = /java/;
// g表示全局匹配
var reg2 = /java/g;
// match返回根据正则匹配的值
alert(str.match(reg1)); // java
alert(str.match(reg2)); // java, java
//2.将字符串中所有的"java"不分大小写提取到一个数组中
// i表示不区分大小写
var reg3 = /java/ig;
alert(str.match(reg3)); // java,JAVA,java
//3.将所有的"java"不分大小写,全部换成"C++"
// str.replace(regexp, replaceText)
var str2 = str.replace(reg3,"c++")
alert(str2) // zhang,c++,wang,c++,li,c++,zhao
//4.查找第一个"java"出现的位置(不分大小写)
// str.search(regexp): 查找与正则表达式匹配的第一个子字符串的位置。
var index = str.search(reg3)
// alert(index) // 6
//5.检查str字符串是否符合如下正则
var reg3 = /wang/;
var reg4 = /^wang$/;
// alert(reg3.test(str)); // true
// alert(reg4.test(str)); // false
var reg5 = /^[a-z]{5},.*/
// alert(reg5.test(str)); // true
</script>
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)
: 返回排序后的数组。
var arr = ["aaa",123,"x",true,8]; alert(arr.sort().reverse()); // 倒序 x,true,aaa,8,123
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()
: 把日期(一个数值)转变成本地日期格式字符串 -
data.getFullYear()
: 获取日期对象中所表示时间的年份 -
data.getMonth()
: 获取日期对象中所表示时间的月份,返回一个 0 到 11 之间的整数,0表示一月 -
data.getDate()
: 获取日期对象中所表示一个月的日期值,返回值是一个处于 1 到 31 之间的整数,代表了相应的日期值。 -
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
-
Math对象
-
常用属性和方法:
Math.PI
: 返回圆周率的值Math.exp(number)
: 返回 e(自然对数的底)的幂。Math.abs(number)
: 返回数字的绝对值。Math.ceil(number)
: 向上取整Math.floor(number)
: 向下取整Math.round(number)
: 四舍五入到整数Math.random()
: 返回介于 0 和 1 之间的伪随机数。
//1.返回一个1-100之间的随机整数 var num = Math.ceil(Math.random()*100); //2.返回一个30-50直接的随机数 var num = Math.round(Math.random()*20 + 30);
全局对象
-
全局对象没有语法。直接调用其方法。
-
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
-
自定义对象
-
方式一:构造函数定义对象
function Person(){} // 定义一个空的Person对象 function Person2(参数1,参数2...){ 对象内容... } //定义一个带参数的对象
-
方式二:对象直接量(*)— json格式
var p3 = { "key1" : "value1", "key2" : "value2"......... }
-
对象中取值:
P3.key1
或者p3["key1"]
var p2 = { "name" : "lili", "age" : 25, "gender" : "女", "boyfrided": {"name":"Sam","age":18,"gender":"男"} } alert(p2.boyfrided.name) // Sam alert(p2["boyfrided"]["name"]) // Sam
DHTML
-
DHTML概述
-
DHTML: Dynamic HTML 动态的 html
-
DHTML并不是一门新的技术, 而是将现有的HTML, CSS, JavaScript整合在一起, 形成了DHTML技术.
-
DHTML分为BOM和DOM。
-
BOM:Browse Object Modle 即浏览器对象模型,其中封装了浏览器操作相关对象。
-
DOM:Document Object Modle 即文档对象模型,将整个HTML文档按照文档结构组织成了树形结构。
-
-
-
BOM
-
Window 对象: 此对象为全局对象,因此,调用方法或属性时,可以省略window。
- 常用事件:
onclick
事件 – 当窗口被点击时触发
onfocus
事件 – 当窗口获得焦点时触发
onblur
事件 – 当窗口失去焦点时触发
onload
事件 – 当整个html文档加载完之后立即触发 - 常用方法:
alert()
– 消息对话框
confirm()
– 确认对话框,返回boolean
- 常用事件:
-
location对象
- 属性:
href
– 获取或设置浏览器地址栏url
- 属性:
<html> <head> <title></title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <!-- BOM --> <script type="text/javascript"> //window对象 //1.在按钮点击时弹出提示框 function clickfn(){ alert("点我,点我,点我"); } //2.输入框1获得焦点时弹出提示框 function focusfn(){ alert("获得焦点") } //3.输入框2失去焦点时弹出提示框 function blurfn(){ alert("格式不正确") } //4.弹出输入框3中的value值 // 当整个文档加载完成后再触发 onload = function(){ // document.getElementById 获取元素 var r1 = document.getElementById("input3"); alert(r1.value); } //5.点击删除商品按钮,弹出提示是否删除,如果确定,则弹出商品已删除,否则弹出商品还在 function delfn(){ var r2 = confirm("是否删除"); // 确定为返回true,取消返回false if (r2){ // true alert("商品已删除"); } } //location对象 //1.弹出当前url alert(location.href); //2.将页面url设置为"http://www.baidu.com" location.href = "http://www.baidu.com"; // 跳转到了百度页面 </script> </head> <body> <input type="button" name="test1" value="按钮" onclick="clickfn()"/><br /><br /> 输入框1:<input type="text" name="test2" onfocus="focusfn()"/><br /><br /> 输入框2:<input type="text" name="test3" onblur="blurfn()"/><br /><br /> 输入框3:<input type="text" name="test4" id="input3" value="第三个输入框"/><br /><br /> <input type="button" name="test5" value="删除商品" onclick="delfn()"/> </body> </html>
-
-
DOM
-
获取元素
document.getElementById("id值")
: 通过id值获取指定id的元素document.getElementsByName("name属性值")
: 通过name属性获取指定name值的所有元素组成的集合数组document.getElementsByTagName("元素名")
: 通过元素的名称获取指定元素名的所有元素组成的集合数组value属性
: 获取或设置输入框的value值innerText
: (部分浏览器不支持) 获取或设置元素内的文本内容innerHTML
: 获取或设置元素的html内容
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>如何通过document获取数据</title> <style> input{ margin: 5px 5px;} </style> <script> /* --通过ID获取并弹出用户名输入框的值-- */ function getId(){ var r1 = document.getElementById("username") alert(r1.value) r1.value = "002" } /* --通过name属性获取并弹出密码输入框的值-- */ function getPwd(){ var r2 = document.getElementsByName("password")[0]; alert(r2.value) } /* --通过元素名称获取并弹出确认密码输入框的值-- */ function getCpwd(){ var r3 = document.getElementsByTagName("input")[2]; alert(r3.value) } /* --获取元素内容-- */ function getPvalue(){ var r4 = document.getElementById("pid"); // alert(r4.innerHTML); // <font color="red">这是P标签中的文字</font> alert(r4.innerText); // 这是P标签中的文字 // 将文字改为绿色 r4.innerHTML = "<font color='green'>这是P标签中的文字</font>" } </script> </head> <body> 用户名:<input type="text" name="username" id="username" value = "001"/><br /> 密码:<input type="password" name="password" id="password" /><br /> 确认密码:<input type="password" name="rd" id="password2" /><br /> <hr /> <input type="button" value="通过ID获取并弹出用户名输入框的值" id="b1" onclick = "getId()"/> <input type="button" value="通过name属性获取并弹出密码输入框的值" id="b2" onclick = "getPwd()"/> <input type="button" value="通过元素名称获取并弹出确认密码输入框的值" id="b3" onclick = "getCpwd()"/> <hr /> <p id="pid"><font color="red">这是P标签中的文字</font></p> <input type="button" value="获取P中的文字" onclick = "getPvalue()"/> </body> </html>
-
元素的增删改
docuemnt.createElement("元素名")
: 创建一个元素body.appendChild(Div)
: 往body中追加一个子元素body.removeChild(oDiv)
: 删除oDiv子元素body.replaceChild(newDiv, oDiv)
: 用newDiv替换已有的子元素oDivbody.insertBefore(oDiv1, oDiv)
: 往body中插入一个子元素oDiv1, 子元素是插入在oDiv的前面oDiv.cloneNode([boolean])
: 克隆oDiv元素,参数默认值为false,表示只克隆元素本身,不克隆oDiv内的所有子孙元素,如果希望克隆元素还克隆元素内容所有子孙元素, 可以传入参数true
<script type="text/javascript"> /* --添加节点: 添加一个div元素到body的最后面-- */ function cereatfun(){ var body = document.getElementsByTagName("body")[0]; // 创建了一个游离的div var newdiv = document.createElement("div"); newdiv.innerHTML = "这是一个新的div"; // 将游离的div添加到body上 body.appendChild(newdiv); } /* --删除节点: 删除body中id值为 div_3 的div元素-- */ function delfun(){ var body = document.getElementsByTagName("body")[0]; var div3 = document.getElementById("div_3"); body.removeChild(div3); } /* --更新节点: 用新节点替换id值为 div_2 的div元素 -- */ function replfun(){ var body = document.getElementsByTagName("body")[0]; var div2 = document.getElementById("div_2") var newdiv = document.createElement("div") newdiv.innerHTML = "替换的div" body.replaceChild(newdiv,div2) } /* --克隆节点、插入节点到第二个元素的前面--*/ function clonefun(){ var body = document.getElementsByTagName("body")[0]; var div4 = document.getElementById("div_4") var clonediv = div4.cloneNode(true); var div2 = document.getElementById("div_2") body.insertBefore(clonediv,div2); } </script>
-