JavaScript笔记

###第七天 *********************************************************************************************

# JavaScript（JS）

- HTML：组织内容
- CSS：显示效果
- JavaScript: 页面中的动作效果

## Java 和 JavaScript

Java和JavaScript只有4个字母一样！没有任何关系的两个语言！

历史上网景公司推出脚本语言时候，为了蹭当时Java语言的热度，故意起名为JavaScript。

JavaScript的API方法仿照了部分Java API设计。

目前JavaScript是俗称，其官方标准名称 ES Script。

## 什么是Java Script

JavaScript是运行在浏览器中的脚本语言。被浏览器事件驱动，可以访问浏览器提供了对象，在浏览器中编程控制浏览器中显示的页面效果。

> JS 可以在Node.js 环境中执行，是服务端的JS

> 脚本语言: 没有编译器，直接解释执行的语言称为脚本语言。

## JavaScript Hello World！

1. HTML
2. 在网页中添加JS代码，处理事件
3. 在浏览器中显示HTML
4. 利用事件触发执行JS

案例：

## JS 有3种嵌入方式

1. 内联式：直接写到HTML标签事件中，不推荐使用。 JS脚本和HTML混合，不利于软件的开发和维护。
2. 内部式：使用 Script 标签声明，JS脚本在当前HTML有效。
3. 外部式：使用 Script 标签引入js文件，用于多个HTML文件共享一个JS脚本文件。

内部式JS 案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//网页加载期间执行的 JS 脚本
console.log("Hello World");
//声明一个JS函数（方法）
function hello(){
console.log("Hello!");
}
</script>
</head>
<body>
<h1>内部式JS</h1>
<div onclick="hello()">演示</div>
</body>
</html>

外部式：

![](1.png)

案例：

1. 编写JS文件 js/hello.js：

function demo(){
console.log("demo");
}

2. 编写测试页面 jsdemo02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript"
src="js/hello.js"></script>

<script type="text/javascript">
//网页加载期间执行的 JS 脚本
console.log("Hello World");
//声明一个JS函数（方法）
function hello(){
console.log("Hello!");
}
</script>
</head>
<body>
<h1>内部式JS</h1>
<div onclick="hello()">演示</div>
<h1>外部式JS</h1>
<div onclick="demo()">演示外部式JS</div>
</body>
</html>

## JS 中声明变量

语法：

var 变量名;

JS 的变量的语法很“自由”

1. 可以不声明使用！
2. 建议声明变量再使用，声明时候使用var。
3. JS变量没有明确类型，赋值啥类型就是啥类型。
- 甚至可以改变类型赋值。
4. 如果不初始化直接使用，其值是“未定义”。

> JS 有两种实验方式： Console实验，JS脚本实验

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function test(){
var a = 5;
console.log(a);
b = 6; //JS可以不声明直接赋值使用！自动声明
console.log(b);
var c;
console.log(c);//未定义
c = 7;
console.log(c);
c = "test"; //变量可以更改类型赋值
console.log(c);

//?c存储的数据类型？
}
</script>
</head>
<body>
<h1>测试变量的声明</h1>
<p onclick="test()">测试</p>
</body>
</html>

## 检查变量中数据的类型

JS 中使用typeof()函数检查变量引用的数据的类型

案例:

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function test(){
var s = "abc";
var c = 8;
var n = 3.14;
console.log(typeof(s));
console.log(typeof(c));
console.log(typeof(n));
}
</script>
</head>
<body>
<h1>测试变量引用数据的类型</h1>
<div onclick="test()">测试</div>
</body>
</html>

## JS 中的数据类型

![](2.png)

1. JS 中数据都是对象，对象分为几种
- JS内嵌对象，也称为JS的内置对象，或者JS的基本类型
- number string
- 由“宿主”环境提供的对象
- window document
- 自定义对象
- 使用JS语法创建的对象
2. 特殊值，特殊值用于表示没有变量没有引对象的情况
- null
- 未定义

## JS 内置对象

JS 内置对象，是JS本身内置的对象。也称为JS的基本数据类型，与Java不同这些类型是对象！

### number

JS中是对象，是浮点数，计算结果是浮点结果。没有整数！！

直接赋值为数的，都是number类型。包含number类型方法。

number类型包含方法：

- num.toFixed(2) 将num转换为字符串，保留两位小数。

其它方法请参考对应的手册： [http://doc.tedu.cn/w3/jsref/jsref_obj_number.html](http://doc.tedu.cn/w3/jsref/jsref_obj_number.html)

### string

任何JS字符串都是string类型。 JS string类型包含的API方法与Java String的方法类似。

具体请参考： [http://doc.tedu.cn/w3/jsref/jsref_obj_string.html](http://doc.tedu.cn/w3/jsref/jsref_obj_string.html)

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function test(){
var num = 3.1415926;
//Fixed 固定的，返回固定小数点位数
//输出价格等情况
console.log(num.toFixed(2));
console.log(num.toFixed(4));
var str = "tedu.cn";
var n = str.indexOf("cn");
console.log(n);//5
var c = str.charAt(5);
console.log(c);//c
var b = str.blod();
console.log(b);
}
//显示加粗的文字
function demo01(){
var str = "测试";
var msg = str.bold();
//用id在document对象中找到 div元素
var div=document.getElementById("msg");
//innerHTML 读写 div元素内部的内容
div.innerHTML=msg;
}
//显示红色的文字
function demo02(){
var str = "测试";
var msg = str.fontcolor("red");
//用id在document对象中找到 div元素
var div=document.getElementById("msg");
//innerHTML 读写 div元素内部的内容
div.innerHTML=msg;
}
</script>
</head>
<body>
<h1>Number 和 String</h1>
<p onclick="test()">测试</p>
<h1>页面局部刷新</h1>
<div onclick="demo02()" >red</div>
<div id="msg" onclick="demo01()">Test</div>
</body>
</html>

### boolean

Boolean 只有两个值 true, false

### Date

Date 类型用于表示时间，其中封装了时间毫秒数。

最重要方法：

- toLocaleString() 返回当前系统的时间字符串。
- getTime() 返回时间毫秒数

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function test(){
//创建Date类型时候内部包含当前时间毫秒数
var d = new Date();
//获取时间毫秒数
var time = d.getTime();
//转换为本地时间字符串
var str = d.toLocaleString();
console.log(d);
console.log(time);
console.log(str);

var s = document.getElementById("msg");
s.innerHTML=str;
}
</script>
</head>
<body>
<h1>Date类型</h1>
<div onclick="test()">测试</div>
<span id="msg"></span>
</body>
</html>

### Array

数组，JS中的数组与Java中的ArrayList基本一样，是长度可变的数据结构。一个数组中可以存储多种数据类型的元素。

1. 声明数组：

var arr = [];
var ary = [1,2,3,4];

2. 向数组追加元素：

arr.push(2,5);
arr[arr.length] = 8;

3. 向数组前面插入元素：

arr.unshift(8);

4. 删除元素

arr.splice(2,2);//从位置2开始连续删除两个元素。

测试案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function test(){
var arr = []; //new Array()
arr.push(8,9); //在数set组末尾追加元素
arr[arr.length]=10; //在数组末尾追加元素
arr[arr.length]="Hello";//在数组末尾追加元素
//在数组中删除元素，第一个参数是起始位置，
//第二个参数是位置
arr.splice(2,1);
console.log(arr);
}
</script>
</head>
<body>
<h1>Array测试</h1>
<div onclick="test()">test</div>
</body>
</html>

### 特殊值

null：表示变量没有引用任何对象。

undefined：变量声明以后，还没有初始化之前的不确定情况！

无论是 null 还是 undefined 都表示有变量，无对象，此时调用属性或者方法将出现"错误"

> 编程时候，表示“没有” 一般使用 null。

#####隐式转换如果带有非数字则会转换成NaN,如"18a"=NaN ________________________________________________
#####显式转换如果带有数字则会转成数字,如parsInt("18a")=18
## 自动类型转换（隐式类型转换）

JS 发明之初是为了美工使用，就是为了方便使用。

1. 数字自动转换为字符串；

var a1 = 56;
var a2 = "66";
console.log(a1+a2); //"5666"

2. boolean 类型自动转换为数字，true 为 1， false 为 0

var a1 = 56;
var b1 = true;
var b2 = false;
console.log(a1+b1);//57
console.log(a1*b2);//0

3. 0, ""， null，undefined，NaN 自动作为 false，反之为true

var n;
if(n){
console.log("true");
}else{
console.log("false");
}

4. 数字与 undefined 运算时候结果是 NaN
- NaN: Not a Number, 不是一个数！

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function test(){
var n;
if(n){
console.log("true");
}else{
console.log("false");
}
n = 0;
if(n){
console.log("true");
}else{
console.log("false");
}
n = null;
if(n){
console.log("true");
}else{
console.log("false");
}
n = "";
if(n){
console.log("true");
}else{
console.log("false");
}
}

function print(n){
if(n){
console.log("true");
}else{
console.log("false");
}
}
function test2(){
print(5);
print("abc");
print([1,2,3]);
}
</script>
</head>
<body>
<h1>特殊值作为false使用</h1>
<div onclick="test()">测试</div>
<h1>非"空"作为 true 使用</h1>
<div onclick="test2()">测试</div>
</body>
</html>

NaN案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

function test(){
var total;
// undefined 参与计算，结果为 NaN
// 如果计算结果为 NaN 则参数计算的数据有 undefined
var sum = total * 0.8;
console.log(sum);
//NaN 可以作为false
if(sum){
console.log("true");
}else{
console.log("false");
}
}

</script>
</head>
<body>
<h1>NaN现象</h1>
<p onclick="test()">Test</p>
</body>
</html>

### 运算符

运算符与 Java 基本相同。

1. JS中没有整数，除法是浮点除法，不整除。利用parseInt函数实现取整数

7/2 得 3.5
parseInt(7/2) 得到 3

2. == 不区别数据类型判断相等， === 称为“全等” 数据类型一样，数值一样

var a = 55;
var b = 55;
var c = '55';
console.log(a==b); //true
console.log(a==c); //true
console.log(a===b);//true
console.log(a===c);//false

3. != 和 !== 自行实验

练习：

1. 利用Math.random() 生成一个1~100之间的随机数。作为半径计算圆面积。在页面的 span 元素中显示出来。
- 要求：在控制台和HTML文件两种方式实现。
2. 编写案例，实验全部的知识点。
3. 创建一个数组，添加一组数据，找出其中最大的数据。
- 提示：JS 的for循环与Java一样
4. 创建一个数组对数组元素进行冒泡排序。

###注意
parseInt("180px")
180
parseInt("px180")
NaN
"180px"-10
NaN

###第八天 ******************************************************************************************

###JavaScript
- 给页面添加动态效果或动态内容

####变量声明和赋值
- 弱类型
int x = 10;
String s = "abc";
var x = 10;
var s = "abc";
x="mm";
####数据类型
1. 数值类型number
var x =10; typeof x;
2. 字符串类型string
var s = "abc";
3. 布尔值类型 boolean
var b = true/false; typeof b;
4. 对象类型 null
Person p = new Person();
var p = new Person();
5. 未定义 undefined
var a;
#####数据类型的隐式转换
1. String类型的隐式转换
- String转布尔值：空字符串"" 转成false 其它全部true
- String转数值：能转直接转，不能转转成NaN(Not a Number) 任何数和NaN进行任何运算结果都是NaN var x = "abc"-18;
2. 数值类型的隐式转换
- 数值转字符串：直接转 18-> "18" var x = "abc"+18;
- 数值转布尔值： 0和NaN转成false 其它是true
3. 布尔值类型的隐式转换
- 转字符串：直接转 true-> "true"
- 转数值: true->1 false->0
4. undefined的隐式转换
- 转字符串：直接转
- 转数值： NaN 20+undefined=NaN
- 转布尔值: false
5. null的隐式转换
- 转字符串：直接转
- 转数值： 0 20+null var moveTime = setInterval(function(){
var arr = document.getElementsByTagName("img");
for(var i=0;i<arr.length;i++){
var img = arr[i];
//得到原来left值
var oldLeft = parseInt(img.style.left);
oldLeft-=2;
//如果图片移出
if(oldLeft<=-200){
oldLeft=(arr.length-1)*200;
//让定时器停止
clearInterval(moveTime);
}
//把值在赋值回去
img.style.left=oldLeft+"px";

}
},10);
- 转布尔值： false

####运算符 + - * / % ==
- 大体和Java相同
1. ==和===，==会先统一类型，然后再比较值是否相等， ===先比较类型是否相等如果相等再比较值是否相等 "18"===18
2. java: 3/2=1 js:3/2=1.5 4/2=2; js中除法运算会自动转换整数和小数
3. typeof typeof 66 + 6 = "number6"

####语句：if else if while for switch case
- 和java基本相同
1. if和while括号里面的内容如果不是布尔值会自动转成布尔值
2. for里面int i 改成 var i 不支持增强for循环(foreach)

####方法声明
- java中声明有返回值有参数（字符串和整数）
public String run(String name,int age){
return name+age;
}
- JavaScript方法声明的格式一： function 方法名(参数列表){ 方法体 }
- 第二种：
var 方法名 = function（参数列表）{方法体}
- 第三种：
var 方法名 = new Function("参数1","参数2","方法体");

###字符串相关
1. 把字符串转成数值
parseInt("3.1") 3 parseInt(3.1) 3
parseFloat("3") 3
Number("3") 3
2. 字符串创建方式var moveTime = setInterval(function(){
var arr = document.getElementsByTagName("img");
for(var i=0;i<arr.length;i++){
var img = arr[i];
//得到原来left值
var oldLeft = parseInt(img.style.left);
oldLeft-=2;
//如果图片移出
if(oldLeft<=-200){
oldLeft=(arr.length-1)*200;
//让定时器停止
clearInterval(moveTime);
}
//把值在赋值回去
img.style.left=oldLeft+"px";

}
},10);
var str = "abc";
var str = new String("abc");
3. 转大小写
str.toUpperCase();
str.toLowerCase();
4. 获取字符串中某个字符串出现的位置
- str.indexOf("a"); 第一个出现的位置
- str.lastIndexOf("a"); 最后一个出现的位置
5. 替换字符串
str.replace(old,new); //只能替换第一个
6. 拆分字符串 a,b,c a b c
var arr = str.split(",");
###数值相关
1. 四舍五入 toFixed(num)
3.1415926.toFixed(2);
###数组相关
1. 创建数组数组内什么类型都可以保存
var arr = ["张飞",18,false];
var arr = new Array();
2. 往数组中添加内容
arr.push("aaa");
3. 获取和修改长度 js数组长度可以修改
var arr = ["张飞",18,false];
arr.length=1;
4. 数组取值和Java一样
5. 数组反转 a b c
arr.reverse();
6. 数组排序默认排序规则是通过Unicode编码挨个字符进行排序
arr.sort();
- 自定义排序
var moveTime = setInterval(function(){
var arr = document.getElementsByTagName("img");
for(var i=0;i<arr.length;i++){
var img = arr[i];
//得到原来left值
var oldLeft = parseInt(img.style.left);
oldLeft-=2;
//如果图片移出
if(oldLeft<=-200){
oldLeft=(arr.length-1)*200;
//让定时器停止
clearInterval(moveTime);
}
//把值在赋值回去
img.style.left=oldLeft+"px";

}
},10);
var arr = [3,2,33,31,18,22];
/*自定义排序方法 */
function mysort(a,b){
//return a-b;//升序
return b-a;//降序
}
var mysort = new Function("a","b","return a-b");
//排序
arr.sort(mysort);
alert(arr);
###日期相关
- 服务器时间和客户端时间

1. 获取客户端当前时间
var d1 = new Date();
2. 把字符串时间转成日期对象
var d2 = new Date("2018/9/30 15:48:50");
3. 从日期对象中获取时间戳 (时间戳：距1970年1月1日 08：00：00到现在的毫秒数)
d2.getTime();//获取
d2.setTime(1000); //修改
4. 获取时间分量（年，月，日，时，分，秒，星期几）
d1.getFullYear();
d1.getMonth(); //从0开始
d1.getDate();
d1.getHours();
d1.getMinutes();
d1.getSeconds();
d1.getDay();
5. 获取年月日和获取时分秒
d.toLocaledDateString();
d.toLocaledTimeString();

###页面相关
var div = document.getElementById("d1");
var ipt = document.getElementById("i1");
div.innerHTML="xxx";
ipt.value //获取文本框的内容
ipt.value="xxx"; //修改文本框的内容

###正则表达式
- . :匹配任意字符除了换行
- \w : 匹配任意数字字母下划线
- \d : 匹配任意数字
- \s : 匹配任意空白
- ^ :开头
- $ ：结尾
- 应用场景： 1. 查找内容 2. 校验文本
1. 创建正则表达式的两种方式：
- var reg = /规则/模式; （模式：i忽略大小写 g：全局查找）
举例：以m开头
var reg = /^m/;
以x结尾
reg = /x$/;
包含两位数字 34
reg = /\d{2}/;
以三位数字开头
reg = /^\d{3}/;
以y开头z结尾中间包含5位数字
reg = /^y\d{5}z$/;
6-10位数字字母下划线 230948234897238947238947
reg = /^\w{6,10}$/;
- var reg = new RegExp(规则,？模式); 如果规则中出现\ 需要转义\\
reg = new RegExp("^\\w{6,10}$");
####和正则相关的方法
1. 查找内容 exec()
var str = "you can you up no can no b b";
var reg = /no/g;
alert(reg.exec(str));//no
alert(reg.exec(str));//no
alert(reg.exec(str));//null
2. 校验 test()
var str = "you can you up no can no b b";
var reg = /^you/;
alert(reg.test(str));
3. 字符串和正则相关的方法
- 查找内容 match()
var str = "you can you up no can no b b";
var reg = /no/g;
var arr = str.match(reg);//得到查找的所有内容
- 查找替换 replace
var str = "you can you up no can no b b";
var reg = /no/g;
str.replace(reg,"不");

###第九天 ****************************************************************************************************

####课程回顾
1. JavaScript 给页面添加动态效果
2. 引入方式：三种
- 内联：在标签的事件中添加js代码
- 内部：在head标签里面添加script标签
- 外部：在单独的js文件中写js代码通过script标签的src属性引入
3. 数据类型：
- 字符串string
- 数值number
- 布尔值boolean
- 对象类型object 特殊值null
- 未定义类型undefined
4. 变量声明和赋值
- js属于弱类型的语言，声明变量时不需要指定类型都使用var
5. 数据类型间的隐式转换
- 字符串：转数值（能转直接转，转不了转成NaN），转布尔值（""转false其它转true）
- 数值：转字符串（直接转）转布尔值（0和NaN转false 其它true）
- 布尔值：转字符串（直接转）转数值（true转1 false转0）
- null：转字符串（直接转）转布尔值false 转数值0
- undefined：转字符串（直接转）转布尔值 false 转数值NaN
6. 运算符 + - * / == ===
1. ==先统一类型再比较值 ===先比较类型再比较值
2. 除法会自动转换整数和小数
3. typeof typeof 66+6 ="number6"
7. 语句 if else if while do while for switch case
1. if和while括号里面的内容如果不是布尔值会自动隐式转换成布尔值
2. for循环中int i改成var i 不支持foreach
8. 方法声明
1. function 方法名（参数列表）{方法体}
2. var 方法名 = function(参数列表){方法体}
3. var 方法名 = new Function（"参数1","参数2","方法体");
9. 字符串相关
1. 转数值 parseInt parseFloat Number
2. 创建字符串 var str = "abc"; var str = new String("abc");
3. str.indexOf("a") str.lastIndexOf("a")
4. str.toUpperCase() str.toLowerCase();
5. str.replace(old,new);
6. var arr = str.split(",");
10. 数组相关
1. var arr = [1,2,3]; var arr = new Array();
2. arr.push();
3. arr.length=3;
4. 取值和java一样
5. 反转 arr.reverse();
6. 排序 arr.sort(mysort)
function mysort(a,b){ return a-b/b-a;}
11. 日期相关
1. 创建客户端日期对象
var d = new Date();
2. 把字符串时间转成日期对象
var d = new Date("2018/12/6 09:17:33");
3. 获取和设置时间戳
d.getTime() d.setTime(1000);
4. 获取时间分量
d.getFullYear();
d.getMonth();
d.getDate();
d.getHours();
d.getMinutes();
d.getSeconds();
d.getDay();
5. 获取年月日获取时分秒
d.toLocaledDateString();
d.toLocaledTimeString();
12. 正则表达式
. 任意字符除了换行
\w 任意数字字母下划线
\d 任意数字
\s 任意空白
^ 开头
$ 结尾
- var reg = /规则/模式;
- var reg = new RegExp(规则,?模式);
- 查找 reg.exec(str);
- 校验 reg.test(str);
- 字符串查找 var arr = str.match(reg);
- 字符串的查找替换 str.replace(reg,new);

13. 和页面相关的内容
1. 通过id查找元素对象
var div = document.getElementById("d1");
2. 获取和设置文本框的文本内容
input.value="abc";
3. 修改或添加元素的html内容
div.innerHTML+="<h1>abc</h1>";
4. 修改元素的class值
div.className="abc";

####事件取消
- 在事件中执行return false; 则可以把当前事件取消掉

- 表单提交事件： onsubmit

- 元素隐藏显示
visibility=hidden/visible 不脱离文档流
display:none隐藏脱离文档流

###JavaScript中的自定义对象

- 自定义对象两种方式：
1. 通过声明方法的方式创建对象
function Person(name,age){
//声明属性并赋值
this.name=name;
this.age=age;
//声明方法
this.run=function(){
alert("name:"+name+"age:"+age);
}
}
//创建person对象
var p = new Person("关羽",20);
p.run();
2. 通过声明变量的形式创建对象

/* 第二种创建对象的方式 */
var p2 = {
"name":"曹操",
"age":18,
"run":function(){
alert("name"+this.name
+" age:"+this.age);
}
}
//调用方法
p2.run();

###DHTML
- Dynamic（动态）HTML，并不是新的d1.innerHTML技术，是把html+css+JavaScript 一起实现出来的页面称为DHTML页面
- DHTML内容包括 BOM和DOM
- BOM Browser（浏览器）Object（对象）Model（模型）浏览器对象模型，包括和浏览器相关的内容
- DOM Document（文档）Object（对象） Model（模型）文档对象模型，包括和页面相关的内容
####BOM相关
- window对象是内置对象，window对象内部的属性和方法称为全局属性和全局方法，调用时可以省略window.
举例： window.alert("xxx");
isNaN() parseInt parseFloat Number()
- window里面常用的属性：
1. history（历史）
history.length 历史页面数量
history.back() 返回上一页面
history.forward() 前往下一页面
history.go(num) 1前往下一页面 0代表刷新 -1返回上一页面 -2返回上两个页面
2. location（位置）
location.href 获取和修改浏览器访问的地址
location.reload() 重新加载
3. screen （屏幕）
screen.width/height 获得屏幕的分辨率
screen.availWidth/availHeight 获得屏幕可用宽高
4. navigator （导航、帮助）
navigator.userAgent(得到浏览器的版本信息)
- window中的一些常用方法
1. isNaN() 判断变量是否是NaN
2. parseInt() parseFloat() 把字符串转成数值
3. 弹出框： alert();
4. 确认框： confirm();
5. 弹出文本框： prompt();
- window相关的事件
1. 点击事件 onclick
2. 页面加载完成事件 onload 使用频率很高
3. 获取焦点事件 onfocus
4. 失去焦点事件 onblur

####eval()d1.innerHTML
- 可以将字符串以js代码的形式执行
eval("alert('xxx')");
alert("xxx");

####代码介绍
demo01 9宫格作业
demo02 登录校验高级版
demo03 自定义对象第一种方式
demo04 自定对象第二种方式
demo05 通过location.href 实现页面跳转练习
demo06 window的四个事件
demo07 相对高级版计算器

####
在浏览器中可以直接这样通过style来对样式赋值
d1.style.co
undefined
d1.style.color="red"
"red"
d1.style.border="blue";
"blue"
d1.style.border="1px solid blue";
"1px solid blue"
d1.style.backgroundColor="green";
"green"

#### 点击事件
var h = document.createElement("h3");
undefined
h.innerHTML="加油"
"加油"
document.body.appendChild(h)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击事件</title>
<script type="text/javascript">
//窗口点击事件
onclick = function(){
/* alert("点击了"); */

}
alert("aa");
//页面加载完成事件
onload = function(){
alert("加载完成");
//如果页面初始化时要对面中的元素进行修改，一定把修改代码写在onload里面
d1.value = "XXX";
}
alert("bb");
/* d1.value = "XXX"; */

//获取焦点,想做的事情可以写在这里，用户停留在这个界面才会运行这个
onfocus = function(){
console.log("获取焦点");###第九天
}
//失去焦点
onblur = function(){
console.log("失去焦点");
}
</script>
</head>
<body>
<input type="text" id="d1">
</body>
</html>

###第十天 ***********************************************************************************************

##定时器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

</style>
<script type="text/javascript">
var x = 0;
onclick = function(){
x+=10;
myimg.style.marginLeft=x+"px";
}
/*开启定时器*/

setInterval(function(){
x+=10;
myimg.style.marginLeft=x+"px";
if(x>500){
x=0;
}
},1000);
</script>
</head>
<body>
<div id="d1">你好吗</div>
<img id="myimg" src="liuyu.gif">
</body>
</html>

###注意
parseInt("180px")
180
parseInt("px180")
NaN
"180px"-10
NaN

###

var h = document.createElement("h3");
h.innerHTML="加油"
document.body.appendChild(h)

### 第十天

###给元素对象添加样式
div.style.样式名称="样式的值";

###元素隐藏的两种方式
1. visibility="hidden" //不脱离文档流元素隐藏后仍然占位置
2. display="none" //脱离文档流不占位置

###Low轮播图实现步骤：
1. 在页面中添加一个div 在div里面添加三个img
2. 通过内部样式让img和div设置相同宽200高150
3. 在script标签中添加定时器每隔1秒执行代码
4. 声明一个全局的count，在定时器中自增并且对3取余数
5. 在定时器中获取所有图片并且遍历
6. 遍历时判断i的值是否等于第4步得到的余数，如果相等让当前遍历的图片元素显示，如果不等则让图片隐藏

####定时器
1. var timer = setInterval(方法,时间间隔) 每隔一段时间调用一次方法
停止：clearInterval(timer)
2. setTimeout(方法,时间间隔) 隔一段时间调用一次方法（只执行一次）

###DOM 文档对象模型(包含和页面相关的内容)
- 学习DOM主要学习的就是如何对页面中的元素进行增删改查操作
####查找页面中的元素
1. 通过id查找元素
var div = document.getElementById("id");
2. 通过标签名查找元素
var arr = document.getElementsByTagName("标签名"); 获取这个文件下所有的"标签名"标签
var u l= li.getElementsByTagName("标签名")[0]; 获取li下第一个的"标签名"标签 ,因为获取的是一个数组
3. 通过class查找元素
var arr = document.getElementsByClassName("class");
4. 通过name属性值查找元素
var arr = document.getElementsByName("name");
5. 获取页面中body元素
document.body
6. 获取元素的上级元素
div.parentElement
###创建元素对象
var h3 = document.createElement("h3");
h3.innerHTML="我是h3";
###添加元素
document.body.appendChild(h3);
###插入元素
父元素.insertBefore(新元素,弟弟元素);
###删除元素
父元素.removeChild(删除的元素);
删除的元素.parentElement.removeChild(删除的元素);

###事件的动态绑定
- 通过js代码给元素添加事件称为事件的动态绑定，动态绑定的事件方法中的this代表事件源（添加事件的标签）

###小练习——————————————————————————————————————
1、在一个200X150的div中滚动显示图片
2、在一个div中显示一个简易时钟
3、一个1000X1000的div中随机出现40X30的图片，在div中任何位置中出现，鼠标点击图片，点击的那张图片消失，
并且在div上方显示小图片出现的数量

###第十一天 ***********************************************************************************************

###JavaScript中的事件处理
- 事件包括：鼠标事件、键盘事件、状态改变事件
- 鼠标事件：点击事件：onclick 鼠标移入:onmouseover 鼠标移出：onmouseout 鼠标按下：onmousedown 鼠标松开： onmouseup 鼠标移动：onmousemove
- 键盘事件：键盘按下:onkeydown 键盘松开: onkeyup
- 状态改变事件： onchange(value值改变事件) onload(页面加载完成事件)
onfocus（获取焦点事件） onblur(失去焦点事件) onsubmit（表单提交事件） onresize(窗口尺寸改变事件)
####事件的绑定
1. 在元素内添加事件方法中的this代表的是window对象
<input id="btn" type="button" value="点我试试"
onclick="alert('试试就试试')">
2. 通过js代码添加事件（动态绑定）动态绑定时方法中的this代表事件源

/* 给按钮动态绑定点击事件 */
btn2.onclick = function(){
alert("动态绑定成功！");
}
####事件的取消
- 在事件中执行 return false;则可以取消掉当前的事件
####Event事件对象
- event对象中保存着和事件相关的信息
- 在鼠标事件中通过event可以得到鼠标的坐标 event.clientX/Y
- 在键盘事件中通过event可以得到键盘每个键的编码 event.keyCode
- 在事件中可以通过event对象得到事件源

//获取事件源
//alert(event.target.nodeName);
//获取事件源存在兼容性问题
//alert(event.srcElement.nodeName);
//通过以下写法解决兼容性问题以下写法只要有一个成功即可
var obj = event.target||event.srcElement;
alert(obj);
####事件冒泡（事件传递）
如果一个区域内有多个元素的事件响应，则响应顺序是从最底下的元素往上级元素传递，这个传递过程类似气泡从下到上，所以称为事件冒泡。
- 应用场景：如果页面中的多个元素需要添加事件，只需要在多个元素共同的祖先元素上添加事件，则多个元素都具备点击事件，通过event获取事件源来区分到底点的是哪一个
function myfn(){
var obj = event.target||event.srcElement;
if(obj.nodeName=="DIV"){
alert("点击了div")
}else if(obj.nodeName=="P"){
alert("点击了P");
}else{
alert("点击了按钮");
}
}
</script>
</head>
<body>
<div onclick="myfn()">
<p>
<input type="button" value="按钮">
</p>
</div>

###第十一天 ***********************************************************************************************
###课程回顾
1. 数据类型
- 字符串 string
- 数值 number
- 布尔值 boolean
- 对象类型 object typeof null object
- 未定义 undefined
2. 变量声明和赋值
- js属于弱类型语言
- var x = 10; x=true;
3. 数据类型间的隐式转换
- 字符串：转数值（能转直接转，不能转 NaN） "18a" 转布尔值(""转false其它true) if("abc")
- 数值：转字符串直接转转布尔值（0和NaN是false 其它是true）
- 布尔值：转字符串直接转转数值（true是1 false是0）
- undefined：转字符串直接转，转布尔值false ，转数值NaN
- null：转字符串直接转，转布尔值false，转数值0
4. 运算符
- ==和=== ==先统一类型再比较值 ===先比较类型如果类型统一再比较值
- teypeof 66 + 6 = "number6";
- 除法会根据结果自动转整数和小数
6. 语句
- for循环把 int i 改成 var i 不支持foreach
- if和while括号里面的内容如果不是布尔值会自动隐式转换成布尔值
7. 方法声明
- 第一种： function 方法名(参数列表){方法体}
- 第二种：var 方法名 = function(参数列表){方法体}
- 第三种： var 方法名 = new Function("参数1","参数2","方法体");
8. 字符串相关：
- 创建字符串 var s = ""; var s = new String();
- 字符串转数值 parseInt() parseFloat() Number()
- 获取字符串出现的位置 str.indexOf("a") str.lastIndexOf("a");\
- 转大小写 str.toUpperCase() str.toLowerCase();
- 拆分字符串 var arr = str.split(",");
- 替换字符串 str.replace("old","new");
9. 数组相关
- 创建数组 var arr = ["abc",true,18]; var arr = new Array();
- 添加内容 arr.push(20);
- 获取数据和Java一样
- 数组反转 arr.reverse();
- 数组排序 arr.sort(); 通过Unicode编码进行排序
自定义排序：
function 方法名(a,b){return a-b升序/b-a降序;}
10. 四舍五入 3.1415926.toFixed(3);
11. 正则表达式：
- 两种创建方式：
1. var reg = /规则/模式; 模式：i忽略大小写 g全局查找
2. var reg = new RegExp("规则",?"模式");
- 查找： reg.exec(str); //每次执行只查找到一个找不到后会返回null
- 校验： reg.test(str);
- 查找： str.match(reg); //查找到所有符合规则的内容返回值为数组
- 查找替换： str.replace(reg,"new");
12. 页面相关
- 通过id获取元素对象 var d = document.getElementById("id");
- 获取和设置文本框的内容 input.value="abc";
- 给元素添加文本内容 d.innerText = "<h1>abc</h1>";
- 给元素添加文本或html内容 d.innerHTML="<h1>abc</h1>";
13. 日期相关、
- 创建日期对象 var d = new Date();//得到客户端当前时间
- 把字符串时间转成时间对象 var d = new Date("2018/10/20 23:18:33");
- 获取和设置时间戳 d.getTime(); d.setTime(1000);
- 获取时间分量： getFullYear/Month/Date/Hours/Minutes/Seconds/Day()
- 获取年月日和获取时分秒 d.toLocaleDateString() d.toLocalTimeString();

###给元素对象添加样式
div.style.样式名称="样式的值";

###元素隐藏的两种方式
1. visibility="hidden" //不脱离文档流元素隐藏后仍然占位置
2. display="none" //脱离文档流不占位置

###DOM 文档对象模型(包含和页面相关的内容)
- 学习DOM主要学习的就是如何对页面中的元素进行增删改查操作
####查找页面中的元素
1. 通过id查找元素
var div = document.getElementById("id");
2. 通过标签名查找元素
var arr = document.getElementsByTagName("标签名");
3. 通过class查找元素
var arr = document.getElementsByClassName("class");
4. 通过name属性值查找元素
var arr = document.getElementsByName("name");
5. 获取页面中body元素
document.body
6. 获取元素的上级元素
div.parentElement
###创建元素对象
var h3 = document.createElement("h3");
h3.innerHTML="我是h3";
###添加元素
父元素.appendChild(h3);
###插入元素
父元素.insertBefore(新元素,弟弟元素);
###删除元素
父元素.removeChild(删除的元素);
删除的元素.parentElement.removeChild(删除的元素);

###事件的动态绑定
- 通过js代码给元素添加事件称为事件的动态绑定，动态绑定的事件方法中的this代表事件源（添加事件的标签）

###鼠标大战僵尸步骤：
1. 开启定时器每隔1秒执行一次，在定时器里面创建img图片设置图片为zomb0.png,然后把图片添加到body里面
2. 通过css让img标签的定位方式为绝对定位，设置图片的宽80 高90
3. 在创建完img标签的位置设置img图片的位置left为屏幕的宽度，top为屏幕高的随机值
4. 开启另外一个定时器，每秒执行100次，在定时器里面获取所有img，然后遍历，获取每一个img标签修改其left值让left值-2 再赋值回去，则可以实现僵尸移动的功能

###js中的事件
- 什么是事件：指一些特定的时间点，事件包括：鼠标事件、键盘事件、状态改变事件。
- 鼠标事件： onclick(点击事件) onmouseover(鼠标移入事件) onmouseout(鼠标移出事件), onmousedown(鼠标按下) onmouseup(鼠标松开) onmousemove(鼠标移动)
- 状态改变事件： onload(页面加载完成事件) onfocus(获取焦点事件) onblur(失去焦点事件) onsubmit(提交事件) onchange(value值改变事件) onresize(窗口尺寸改变事件)
- 键盘事件： onkeydown(键盘按下事件) onkeyup(键盘抬起事件)
###事件绑定
1. 标签内部通过事件属性添加事件，事件方法中的this代表Window对象
2. 动态绑定事件，好处：可以让js代码和html代码分离，动态绑定事件的方法中的this代表事件源
###事件取消
- 在事件中执行return false；则可以取消当前事件
###事件对象event
1. 在鼠标事件中可得到鼠标的坐标 event.clientX/Y()
2. 在键盘事件中可以得到键盘按键的编码 event.keyCode();
3. 在任何事件中可以得到事件源 event.target event.srcElement
var obj = event.target||event.srcElement;
###事件传递(事件冒泡)
- 如果一个范围有多个事件需要响应，则响应顺序为从底层往上层传递，这个过程类似于冒泡效果，所以又称为事件冒泡

posted @ 2019-04-01 18:04 滑稽的鼠标阅读(250) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

水滴石穿——非一日之功

沐昱

网址：wwfww.cn

JavaScript笔记

公告