javascript 在html中 javascript在html的作用

JavaScript

• 作用：给页面添加动态效果和动态数据 ， html负责搭建页面结构和内容，css美化页面

JS历史

1995年由网景（NetScape）公司发布，LiveScript，同年更名为JavaScript，和Java语言没啥关系，为了蹭热度

JS特点

1. 属于脚本语言，不需要编译，由浏览器解析执行
2. js语言可以嵌入到html页面中
3. js语言基于面向对象
4. js属于弱类型的语言
5. 交互性高
6. 安全性高 js语言只能访问浏览器中的各种数据，不能访问浏览器以外的数据

JS语言的引入方式

• 内联：在元素的事件属性中添加js代码，当事件触发时js代码执行
• 内部：在html页面中添加

JS语法

数据类型

• JavaScript中只有对象类型
• 常见的对象类型

1. 数值类型 number
2. 字符串类型 string
3. 布尔值类型 boolean
4. 未定义类型 undefined
5. 自定义类型 object

变量的声明和赋值

• js属于弱类型语言
• java： int x = 10;
• js: var x = 10; var s = “abc”; var b = true/false;

常见类型介绍

1. 数值类型

• js中数值类型的底层都是浮点数，在使用过程中会自动转换整数或小数
  java int x =5 int y= 2 int z = x/y; z=2
  js var x = 5 var y = 2 var z = x/y; z=2.5
• NaN: Not a Number 不是一个数， 用于判断变量是否是数值类型 ， 使用 isNaN(变量) 进行判断 isNaN(x) 返回值是true或false ，true代表不是数，false代表是数

2. 布尔值类型
   var b = true/false;
3. 字符串
   var s = “abc”;
   var s = ‘abc’;
4. 未定义类型undefined

• 当一个变量只声明不赋值的情况下，则此变量为未定义类型
  ###各种类型间的隐式转换

5. 数值类型

• 转字符串： 直接转 24-> “24”
• 转布尔值： 0和NaN转成false 其它转成true

6. 布尔值类型

• 转字符串： 直接转 true->“true” “abc”+true
• 转数值： true->1 false->0 18+true=19

7. 字符串类型

• 转数值： 能转直接转 不能转转成NaN
  加法会把数值转字符串 “20”+5 = “205”
  减乘除会把字符串转成数值 “20”-5 = 15
  任何数值和NaN进行任何运算 结果都是NaN
• 转布尔值： 空字符串转false 其它true

8. 未定义undefined

• 转数值： NaN
• 转字符串： 直接转 “abc”+undefined “abcundefined”
• 转布尔值： false if(undefined){alert(“aaa”)}

9. null

• 转数值： 0
• 转布尔值： false
• 转字符串： 直接转 “abc”+null = “abcnull”

运算符 + - * / % = > < >= <= == !=

• 和Java大体相同
• 和= ： == 先统一类型再比较值 ===先比较类型 如果类型相等再比较值
• 除法运算 会自动转换整数和小数
• typeof x; typeof 66 + 6 = “number6”

语句 if else while do while for switch case

• 和Java大体相同***
• 不同点：

1. if 和 while 括号里面的内容 如果不是布尔值会自动隐式转换成布尔值
2. for循环中int i改成var i 不支持增强（新）for循环

方法声明

• java： public void 方法名(参数列表){方法体}
• js： function 方法名(参数列表){方法体}

- 常见的四种方法：

1. 无参无返回值
2. 无参有返回值
3. 有参无返回值
4. 有参又返回值

- 三种声明方法的格式：

1. function 方法名(参数列表){方法体}
2. var 方法名 = function(参数列表){方法体};
3. var 方法名 = new Function(“参数1”,“参数2”,“方法体”);

和页面元素相关的方法

1. 通过id获取页面元素的方法
   var d = document.getElementById(“d1”);
2. 获取和修改元素的文本内容
   d.innerText
   d.innerText = “abc”;
3. 获取和修改文本框的值
   var i = document.getElementById(“i1”);
   i.value 获取
   i.value=“xxx”;
4. 获取和修改元素的html内容
   d.innerHTML
   d.innerHTML="< h1 >abc</ h 1 >";
   追加 d.innerHTML+="< h1>abc</ h1>";
   （此处多加了空格的）

String相关

1. 创建字符串

• var s1 = “abc”; //单引号和双引号都可以
• var s2 = new String(“abc”);

2. 把字符串转成数值

• parseFloat(“8”) 8
• parseInt(8.5) 8
• Number(“8.5”) 8.5 作用和parseFloat类似

3. 字符串转大小写

• 转大写 str.toUpperCase();
• 转小写 str.toLowerCase();

4. 获取字符串出现的位置

• str.indexOf(‘b’) 第一个出现的位置 从0开始
• str.lastIndexOf(‘b’) 最后一个出现的位置

5. 截取字符串

• str.substring(start,?end);

6. 替换字符串

• str.replace(old,new); 只替换第一个

7. 拆分字符串

• var arr = str.split(".");
• 
  

数学相关

1. 随机数 Math.random() 0-1 *3
   3-5 0-2 + 3
   25-36 0-11 +25
   100-200 0-100 + 100
   parseInt(Math.random()*101)+100
   6-9
   parsetInt(Math.random()*4)+6;
2. 四舍五入
   num.toFixed(m); m代表保留几位小数
   18.23456.toFixed(4); 18.2346

数组相关

1. 创建数组

• var arr1 = [“小明”,18,true];
• var arr2 = new Array();

2. 往数组中添加内容

• arr.push(“刘德华”);
• arr.push(18);

3. 数组遍历 和Java一样
   var arr = [“小明”,18,true];
   for(var i=0;i<arr.length;i++){
   alert(arr[i]);
   }
4. 获取和修改数组长度

• java数组的长度不可变
  arr.length//获取
  arr.lenght=3;

5. 数组反转 arr.reverse();
6. 数组排序 arr.sort(); 默认排序规则是 以Unicode编码进行排序，比完第一个再比第二个

• 自定义排序：

•  var arr = [18,11,26,22,2,7,3];
 //自定义排序方法
 function mysort(a,b){
 return b-a;//代表升序 b-a代表降序
 }
 alert(arr.sort(mysort));

• arr.sort(new Function(“a”,“b”,“return a-b;”));
• 
  

日期相关

• 服务器时间和客户端时间

1. 获取客户端时间
   var d = new Date();
2. 把字符串时间转成时间对象 2019/5/8 14:37:30
   var d = new Date(“2019/5/8 14:37:30”);
3. 获取和设置时间戳(距1970年1月1日 08:00:00)
   d.getTime();
   d.setTime();
4. 获取时间分量
   d.getFullYear();// 年
   d.getMonth(); 月 从0开始 +1
   d.getDate(); 日
   d.getDay(); 星期几
   d.getHours(); //小时
   d.getMinutes(); 分钟
   d.getSeconds(); 秒
5. 获取年月日 和 获取时分秒
   d.toLocaleDateString();
   d.toLocaleTimeString();

正则表达式

• 应用场景：

1. 查找内容
2. 校验文本

• . ：匹配任意字符 除了换行
• \w : 匹配任意数字、字母、下划线
• \d : 匹配任意数字
• \s : 匹配任意空白
• ^ : 开头
• $ : 结尾
• 举例：

3. 以m开头 ^m
4. 以n结尾 n$
5. 包含两位数字 \d{2}
6. 只有两位数字 ^\d{2}$
7. 以3个数字开头 ^\d{3}
8. 以x开头以y结尾中间有5个数字 ^x\d{5}y$
9. 以m开头中间有3-5个数字n结尾 ^m\d{3,5}n$
10. 6-10位数字字母下划线组成 ^\w{6,10}$
    - 创建正则对象的两种方式

1. var reg = /规则/模式; （两种模式：i忽略大小写，g全局查找）
   reg = /^\w{6,10}$/;
2. var reg = new RegExp(“规则”,？“模式”);
   reg = new RegExp("^\w{6,10}$");
   - 正则对象相关的方法
3. 查找内容的方法 reg.exec(str)
   var str = “you can you up no can no b b”;
   var reg = /no/;

• 如果没有g则每次找到的都是第一个
  reg.exec(str);
• 如果添加了g则从全文中查找 每次查找下一个,直到找不到的时候返回null
  var reg = /no/g;
  reg.exec(str);

4. 校验方法 reg.test(str);
   var reg = /^you/;
   reg.test(str);
   - 字符串中和正则相关的方法
5. 查找内容 str.match(reg)

• 此查找方法如果是全局查找会一次性把查找到的所有返回到一个数组中

6. 替换方法 str.replace(reg,new);
   reg = /no/g;
   str.replace(reg,“不”);

修改元素的class属性值

• div.className=“xxx”;

如何让页面中元素隐藏

1. display：none 元素隐藏并且脱离文档流，如果再显示回来的话需要改回元素的默认值
2. visibility:hidden(隐藏)/visible(显示) 隐藏元素不脱离文档流

自定义对象

/* function Person(name,age){
	//添加属性
	this.name=name;
	this.age=age;
	//添加方法
	this.run = function(){
		alert("我叫："+this.name+
				"今年"+this.age);
	}
}
//实例化对象
var p = new Person("张三",5);
p.run(); */

function Person(){}
var p = new Person();
//动态添加属性和方法
p.name = "张三";
p.age = 18;
p.run = function(){
	alert("我叫："+this.name+
			"今年"+this.age);
}
//调用 
//p.run();
//第二种实例化对象的方式 
var p2 = {
		"name":"李四",
		"age":18,
		"run":function(){
			alert("我叫："+this.name+
					"今年"+this.age);
		}
}
p2.run();

DHTML

• 简介： Dynamic（动态） HTML，并不是新的技术，是把通过html、CSS、JavaScript结合到一起开发的页面称为动态的html
• DHTML包括：BOM、DOM
• BOM： Browser 浏览器 Object对象 Model模型，包含和浏览器相关的内容
• DOM：Document 文档 Object对象 Model模型，包含和页面相关的内容

BOM浏览器对象模型

window对象

window对象里面的属性称为全局属性，方法称为全局方法，调用时可以省略

window里面常见的方法

1. parseInt() 和 parseFloat()
2. alert() 提示框
3. confirm() 确认框
4. prompt() 弹出文本框
5. isNaN()

window中常用的属性

1. location 位置

• location.href 获取和修改浏览器的访问地址
  获取 location.href
  修改 location.href=“http://www.tmooc.cn”;
• location.reload(); 刷新

2. history 历史 当前窗口历史

• history.length 页面数量
• history.back() 返回上一页面
• history.forward() 前往下一页面
• history.go(n) n正值前进 负值后退 0刷新

3. screen 屏幕

• screen.width/height 得到屏幕的分辨率
• screen.availWidth/Height 得到屏幕可用分辨率

4. navigator 导航、帮助

• navigator.userAgent; 浏览器版本信息

window相关的事件

• 窗口点击事件 onclick
• 页面加载完成事件 onload
• 页面获取焦点事件 onfocus
• 页面失去焦点事件 onblur

eval（)

• 可以将字符串以js代码的形式执行

通过js代码给元素添加样式

• 元素对象.style.样式名 = “值”;

定时器

• 每隔一段事件执行某段代码
• 格式： setInterval(方法,时间间隔);
  setInterval(function(){
  alert(“哈哈”);
  },1000);

停止定时器

var timer = setInterval(function(){},1000);
clearInterval(timer);

DOM 文档对象模型

查找元素

1. 通过id获取页面元素
   var d = document.getElementById(“d1”);
2. 通过标签名获取元素
   var arr = document.getElementsByTagName(“div”);
3. 通过class属性值查找元素
   var arr = document.getElementsByClassName(“class”);
4. 通过name属性值查找元素
   var arr = document.getElementsByName(“name”);
5. 获取body
   document.body

创建元素对象

• var d = document.createElement(“div”);

添加元素

父元素.appendChild(元素对象);

插入元素

父元素.insertBefore(新元素,弟弟元素);

删除元素

父元素.removeChild(被删除的元素);

事件相关内容

• 事件：事件就是一些特定的时间点，事件包括：鼠标事件、键盘事件、状态改变事件

事件分类

1. 鼠标事件：点击事件onclick，鼠标移入事件onmouseover，鼠标移出事件onmouseout, 鼠标按下事件onmousedown，鼠标抬起事件onmouseup,鼠标移动事件onmousemove
2. 键盘事件： 键盘按下事件 onkeydown 键盘抬起事件onkeyup
3. 状态改变事件： 获取焦点onfocus 失去焦点onblur 窗口尺寸改变onresize
   值改变事件onchange 表单提交事件onsubmit 页面加载完成事件onload

事件对象event

• 事件对象中保存着事件相关的信息

1. 鼠标事件中保存鼠标的坐标信息 event.clientX/Y
2. 键盘事件中保存按键信息 event.keyCode String.fromCharCode(65);
3. 任何事件中都可以得到事件源对象
   事件源就是添加事件的标签
   var obj = event.target||event.srcElement; (解决兼容性写法)

事件的绑定

- 事件有两种绑定方式
1. 通过标签内部的事件属性 添加事件 方法中的this代表window对象
2. 动态绑定：通过js代码给元素添加事件 执行的方法中this代表事件源

事件的传递(事件冒泡)

• 如果一个范围内有多个元素响应事件，则事件的传递顺序是从最底层往上层传递（类似于气泡所以称为事件冒泡）