####数据类型
- 在JavaScript中只有对象类型
- 常见的对象类型:
- 数值对象类型:number
浮点数和整数都是number ,底层都是浮点数,在运算的过程中会自动转换整数或浮点数
NaN: Not a Number isNaN(x) 判断x是不是NaN - 字符串:string
var s1 = “abc”; var s2 = ‘abc’; - 布尔值:boolean
var b = true; var b = false; - 对象: object
var p = new Person(); var p = null; - 未定义:undefined
当变量只声明不赋值时 此变量的类型和值都是undefined
#####变量的声明和赋值
-
js属于弱类型语言
var x = 18;
var name = ‘张三’ 或 “张三”;
var b = true 或 false;
var p = new Person();
var y;
x = “abc”; -
typeof x; 获取变量的类型 返回值是一个字符串
####各种数据类型之间的隐式转换
- 数值类型
- 转字符串: 直接转 18->“18” “age”+18 = “age18”
- 转布尔值: 0和NaN转 false 其它转true
- 字符串
- 转数值: 能转直接转不能转转成NaN 任何数和NaN进行任何运算结果都是NaN “20”-5 = 15
- 转布尔值: 空字符串转false 其它true if(""){alert(‘aaa’)}else{alert(‘bbb’)}
- 布尔值
- 转字符串: 直接转 true->“true”
- 转数值: 20+true= 21 20+false=20 true->1 false->0
- undefined
- 转字符串: 直接转
- 转数值: NaN
- 转布尔值: false
- null
-
转字符串: 直接转
-
转数值: 0
-
转布尔值: false
###运算符 + - * / % -
JS中的运算符和Java中大体一致
-
= =和===,==先统一两个变量的类型再比较值 ===先比较类型如果类型相等再比较值
“666”===666
-
typeof 66+6 “number6”
-
除法运算会自动转换整数和浮点数
###语句 if else while for do while -
JS中的语句和Java中大体一致
-
if和while后面括号里面的内容如果不是布尔值会自动隐式转换成布尔值
-
for循环中的 int i改成 var i 不支持增强for循环
###方法声明
- java声明方法:
public void 方法名(参数列表){方法体} - js声明方法(一)
function 方法名(参数列表){方法体} - 四种常见方法的声明
-
无参无返回
-
无参有返回
-
有参有返回
-
有参无返回
/* 无参无返回 /
function fn1(){
alert(“无参无返回”);
}
/ 调用fn1 /
//fn1();
/ 无参有返回 */
function fn2(){
return “abc”;
}
//调用
var s = fn2();
alert(s); /
/ 有参无返回 /
function fn3(name,age){
alert(“name=”+name+":"+“age=”+age);
}
//调用
//fn3(“刘德华”,18);
/ 有参有返回 /
function fn4(x,y){
return xy;
}
var result = fn4(3,8);
alert(result);
-
- 方法声明(二)
格式: var 方法名 = function(参数列表){方法体} - 方法声明(三)
格式: var 方法名 = new Function(“参数1”,“参数2”,“方法体”);
####和页面相关的方法
- 通过id获取页面中的元素
var d = document.getElementById(“id”); - 获取和设置元素的文本内容
d.innerText=“哈哈”; - 获取和设置元素的html内容
d.innerHTML=“abc
”; - 获取和设置文本框的内容
i.value=“abc”;
var s = i.value;
###String - 创建字符串的两种方式
- var s1 = “abc”/‘abc’;
- var s2 = new String(“abc”);
- 字符串转数值
- parseFloat() 把字符串转成浮点数
- parseInt() 把字符串转成整数,也可以把浮点数转成整数
- Number() 等效parseFloat()
- 转换大小写
- toUpperCase()
- toLowerCase()
- 获取字符串出现的位置
- str.indexOf(‘a’); 获取第一个出现的位置
- str.lastIndexOf(“a”); 获取最后一个出现的位置
- 截取字符串
- str.substring(start,end?);
- 替换字符串
- str.replace(old,new); //只能替换出现的第一个
- 拆分字符串
- str.split("."); 返回值是数组
###数组相关
- 创建数组
- var arr1 = [“张飞”,28,true];
- var arr2 = new Array();
- 往数组中添加元素
- arr.push(obj);
- 获取和修改数组长度(Java中数组长度不可修改)
- arr.length=2;
- 数组遍历 和 Java一样
- 数组反转
- arr.reverse();
- 数组排序
- arr.sort(); 默认以字符串的形式,按照Unicode编码进行排序
- 自定义排序
function mysort(a,b){
//return a-b;//升序
return b-a;//降序
} - arr.sort(new Function(“a”,“b”,“return a-b;”));
###日期相关 - 服务器时间和客户端时间
- 获取客户端时间
var d = new Date(); - 把字符串时间转成时间对象
2019/3/11 08:00:00
var d1 = new Date(“2019/3/11 08:00:00”); - 获取和设置时间戳(距1970年1月1号 00:00:00 的毫秒数)
- 获取时间对象的时间戳 d.getTime();
- 设置时间戳 d.setTime();
- 获取时间分量 (年、月、日、时、分、秒、星期几)
- d.getFullYear(); 得到年
- d.getMonth(); 得到月 从0开始
- d.getDate(); 得到日
- d.getHours(); 小时
- d.getMinutes(); 分
- d.getSeconds(); 秒
- d.getDay(); 星期几
- 获取年月日 和 获取时分秒
- d.toLocaleDateString();
- d.toLocaleTimeString();
###正则表达式 - 应用场景:1. 查找内容 2. 校验文本
- .匹配任意字符
- \w匹配任意数字、字母、下划线
- \d匹配任意数字
- \s匹配任意空白
- ^ 开头
- $ 结尾
- 创建正则表达式对象 两种格式:
- 第一种格式: var reg = /规则/模式; 两种模式:g全局查找 i忽略大小写
举例:
以m开头 reg = /^m/;
以n结尾 reg = /nKaTeX parse error: Expected 'EOF', got '\d' at position 25: …含两位数字 reg = /\̲d̲{2}/; 以3位数字…/;
包含3-5位数字 reg = /\d{3,5}/;
6-10位数字、字母下划线 reg = /^\w{6,10}KaTeX parse error: Expected 'EOF', got '\d' at position 33: …-6位数字 reg = /^x\̲d̲{3,6}y/; - 第二种格式: var reg = new RegExp(“规则”,“模式”?); 此种形式如果有反斜杠需要写成\
var reg = new RegExp("/^\w{6,10}$/");
- 正则相关方法
- 查找内容 reg.exec(str);
var str = “you can you up no can no b b”;
var reg = /no/g;
reg.exec(str); //如果不是全局查找每次返回找到的第一个
,如果是全局查找,执行一次返回一个,直到找不到时返回null - 校验方法 reg.test(str)
var str = “You can you up no can no b b”;
var reg = /^y/i;
reg.test(str); - 字符串和正则相关的方法
- 查找内容match() 如果是全局查找则返回所有内容
var str = “you can you up no can no b b”;
var reg = /no/g;
var arr = str.match(reg); - 查找替换 替换所有
str.replace(reg,“不”);
- 查找内容match() 如果是全局查找则返回所有内容
###修改和获取页面元素的class属性值
- d.className=“abc”;
###文本框失去焦点事件
- 事件名称onblur,当光标从文本框中离开时触发此事件
###元素隐藏的两种方式
- display:none 元素隐藏并且会脱离文档流
- visibility:hidden(隐藏)/visible(显示) 元素不脱离文档流
###事件取消
- 在任何事件中执行return false;都可以把当前事件取消掉
###自定义对象
//自定义对象声明
function Person(name,age){
//给对象添加属性
this.name=name;
this.age=age;
//添加方法
this.run = function(){
alert(“我是”+this.name+“今年”+this.age);
}
}
//实例化对象
var p = new Person(“貂蝉”,68);
p.run();
/* 第二种创建对象的方式 */
var p2 = {
"name":"刘备",
"age":30,
"run":function(){
alert("我叫"+this.name+"今年"+this.age);
}
}
p2.run();
###DHTML
- 简介: Dynamic(动态)html,把通过html+css+js实现出来的页面称为dhtml
- DHTML包括 BOM 和 DOM 两部分
- BOM: Browser浏览器 Object对象 Model模型,浏览器对象模型,包含和浏览器相关的各种内容
- DOM: Document文档 Object对象 Model模型,文档对象模型,包含和页面相关的所有内容
###浏览器对象模型 - window: 窗口对象, window对象中的属性称为全局属性,方法称为全局方法,调用时可以省略window.
- window中常见的全局方法包括:
alert() 弹出提示框
comfirm() 弹出确认框
prompt() 弹出文本框
parseInt/Float()
isNaN() 判断变量是否是数 - window中常见的全局属性包括:
- location:位置
location.href 可以获取和修改浏览器的访问地址
location.reload(); 刷新页面 - history 历史
history.length 历史页面数量
history.back() 返回上一页面
history.forward() 前往下一页面
history.go(n) n正值前进 负值后退 - screen 屏幕
screen.width/height 屏幕宽高
screen.availWidth/availHeight 屏幕可用宽高 - navigator 导航/帮助
navigator.userAgent 获取浏览器的版本信息 - document 文档 DOM
###window里面常用的事件
- 点击事件: onclick 当点击窗口页面内部任何区域触发
- 页面加载完成事件: onload 当页面加载完成时触发
- 页面获取焦点事件:onfocus 当用户返回页面时触发
- 页面失去焦点事件:onblur 当用户离开页面时触发
###eval方法
- 此方法可以将字符串以js代码形式执行
###通过js代码给元素添加样式
元素对象.style.样式名称=“值”;
###定时器
setInterval(方法,时间间隔 毫秒);
###通过标签名获取页面中的元素们
var arr = document.getElementsByTagName(“标签名”);
###轮播图相关事件
- 当鼠标移动到元素上触发的事件 onmouseover
- 当鼠标移出元素触发的事件 onmouseout
###定时器
开启 var timer = setInterval(方法,时间间隔);
停止 clearInterval(timer);
###只执行一次的定时器
setTimeout(方法,时间间隔)
###DOM 文档对象模型 包含和页面相关的内容
- 学习DOM主要学习如果对页面内容进行修改
####如何获取页面中的元素
- 通过id获取
var d = document.getElementById(“id”); - 通过标签名获取
var arr = document.getElementsByTagName(“标签名”); - 通过name属性获取
var arr = document.getElementsByName(“name”); - 通过class属性获取
var arr = document.getElementsByClassName(“class”); - 获取body
document.body
####创建元素对象
var d = document.createElement(“div”);
d.innerText=“zzz”; d.innerHTML="";
####把元素添加到某个元素内部
父元素.appendChild(新的子元素);
####插入元素
父元素.insertBefore(新的子元素,弟弟元素);
####删除元素
父元素.removeChild(被删除的子元素);
###事件相关
- 已经接触过的事件: onclick onblur onsubmit onfocus onmouseover onmouseout onchange onload onresize
- 事件:事件就是一些特定的时间点,事件包括鼠标事件、键盘事件、状态改变事件
- 鼠标事件: 鼠标点击事件onclick 鼠标移入事件onmouseover 鼠标移出onmouseout 鼠标按下事件onmousedown 鼠标抬起事件onmouseup 鼠标移动事件onmousemove
- 键盘事件:键盘按下事件onkeydown 键盘抬起事件onkeyup
- 状态改变事件: 页面加载完成onload 值改变事件onchange 获取焦点onfocus 失去焦点onblur 提交事件onsubmit 窗口尺寸改变事件onresize
####事件绑定
- 在元素内部通过事件属性绑定事件
在事件方法中this代表window - 动态绑定,通过js代码给元素对象添加事件
在事件方法中this代表事件源
####event对象
- event对象中保存着和事件相关的信息
- 鼠标事件中 可以获取鼠标的坐标 event.clientX/Y
- 键盘事件中 可以获取键盘的字符编码 event.keyCode
- 在任何事件中可以通过event对象获取事件源
var obj = event.target||event.srcElement;
####获取事件源的三种方式 - 非动态绑定可以将事件源从事件属性的位置传递过去
- 动态绑定的事件中 this代表的就是事件源
- 在任何方式绑定的事件中 通过event对象获取都可以
var obj = event.target||event.srcElement;
####取消事件
- 在任何事件中执行return false; 即可取消当前事件
####事件传递(事件冒泡) - 如果在同一个范围有多个事件响应,响应顺序从底层往上层传递,类似气泡从下往上,所以称为事件冒泡
- 如果在某一个范围多个元素需要添加事件,可以把事件添加到这些元素共同的上级元素,只需要添加一次,即可让所有子元素全部具备该事件,好处是可以节省代码。