javaWeb学习笔记 --- JavaScript
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 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; // 3arr.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-truearr.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" /> <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); // 这是P标签中的文字 alert(r4.innerText); // 这是P标签中的文字 // 将文字改为绿色 r4.innerHTML = "这是P标签中的文字" } 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>
-
总结
