JavaScript课程回顾

1. js 给页面添加动态效果 动态内容
2. 三种引入方式：
3. 内联：在元素的事件属性中添加js代码
4. 内部：在html页面中添加script标签 在标签内部写js代码
5. 外部：在单独的js文件中写js代码 通过script标签的src属性引入，引入文件后标签体内不能再写js代码
6. 数据类型
7. js中都是对象类型
8. 三类：
   1. js内置对象
   2. 浏览器内置对象
   3. 自定义对象
   4. 常见类型
9. 数值类型 number
10. 字符串类型 string
11. 布尔值 boolean
12. 未定义类型 undefined
13. 常见类型间的隐式转换
14. 数值： 转字符串直接转 转布尔值 0和NaN转false 其它true
15. 布尔值： 转字符串直接转 true->1 false->0
16. 字符串： 转数值 能转直接转 不能转 转NaN , 转布尔值 ""转false其它转true
17. undefined：转字符串直接转 转数值NaN 转布尔值false
18. null：转字符串直接转 转数值 0 转布尔值 false
19. 运算符：和Java大体相同
20. ==和=== ==是先统一类型再比较值 ===是先比较类型再比较值
21. typeof x 获取变量的类型 typeof 66 +6 ="number6"
22. 语句：和Java大体相同
23. if和while括号里面的内容如果不是布尔值会自动隐式转换成布尔值
24. for中int i 改成 var i 不支持增强for循环
25. 方法声明（函数声明）
26. function 方法名(参数列表){方法体}
27. var 方法名 = function(参数列表){方法体}
28. var 方法名 = new Function("参数1","参数2","方法体");
29. 和页面相关的方法
30. 通过id获取页面元素 var div = document.getElementById("id");
31. 获取和修改文本框的内容 myinput.value myinput.value="abc"
32. 获取和修改文本标签的文本内容 div.innerText += "aaa"; div.innerText
33. 获取和修改标签的html内容 div.innerHTML += "

    abc

    "; div.innerHTML
34. 字符串相关
35. var s1 = "aaa"; var s1 = new String("aaa");
36. 转数值 parseInt() parseFloat() = Number();
37. 获取字符串出现的位置 str.indexOf() str.lastIndexOf()
38. 截取字符串 str.substring(start,?end);
39. 转大小写 str.toUpperCase() str.toLowerCase()
40. 拆分字符串 var arr = str.split(",");
41. 数组相关
42. var arr1 = ["aa",18,true]; var arr2 = new Array();
43. 添加内容 arr.push(20);
44. 修改长度 arr.length = 3;
45. 遍历方式和java一样
46. 反转 arr.reverse()
47. 排序 arr.sort(); 默认排序通过元素的Unicode编码进行排序 自定义排序 function mysort(a,b){ retrun a-b;//升序 b-a降序 } arr.sort(mysort); arr.sort(new Function("a","b","retrun a-b"));
48. 日期相关
49. var d = new Date();
50. var d = new Date("2019/1/7 09:20:00");
51. 获取和设置时间戳 d.getTime() d.setTime();
52. 获取时间分量d.getFullYear/Month/Date/Day/Hours/Minutes/Seconds()
53. 获取年月日 和 获取时分秒 d.toLocaleDateString() d.toLocaleTimeString()
54. 正则
55. 两种创建方式：
    1. var reg1 = /规则/模式;
    2. var reg2 = new RegExp("规则","模式");
56. 相关的方法
    1. reg.exec(str) 查找内容 一次执行只找到一个 找不到时返回null
    2. reg.test(str) 校验文本是否符合标准
    3. var arr = str.match(reg) 查找内容 一次性查找到所有
    4. str.replace(reg,"替换后的内容")
57. 获取和修改元素的class div.className="xxx"; div.className;

隐藏元素的方式

1. display:none/block/inline/inline-block 脱离文档流
2. visibility:hidden/visible; 不脱离文档流

事件的取消

• 在事件中执行 return false; 则可以将此事件取消掉
• confirm("您确认离开吗？")

新的事件

• 失去焦点事件 onblur
• 表单提交事件 onsubmit

自定义对象（了解）

• 第一种声明方法的方式创建对象：

  //创建Person对象 有age和name属性 function Person(name,age){ //声明属性并赋值 this.name=name; this.age=age; //声明方法 this.run = function(){ alert("name:"+this.name +" age:"+this.age); } }

• 第二种声明变量的形式创建对象：

  var p1 = { "name":"关羽", "age":18, "run":function(){ alert("姓名："+this.name +"年龄："+this.age); } } //调用方法 p1.run();

DHTML

• 简介： Dynamic（动态）HTML，这并不是新的技术，而是把html+css+JavaScript一起实现的页面称为动态的html
• DHTML包括：BOM和DOM
• BOM：Browser（浏览器）Object（对象）Model（模型），浏览器对象模型，在BOM中存在一些和浏览器相关的对象
• DOM：Document Object Model：文档对象模型，在DOM中包含一些和页面相关的对象

BOM

Window

• window对象中包含的属性称为全局属性，方法称为全局方法，调用window里面的属性和方法时可以把window省略
• window里面常用的方法： window.alert("");提示框 confirm()确认框 parseInt/Float(); isNaN(); prompt(); 弹出文本框
• window里面常用的属性

• location：位置 location.href 获取浏览器访问的地址 location.href="http://www.baidu.com" 修改浏览器访问的地址

  location.reload(); //页面刷新

• history:历史 history.length //获取历史页面数量 history.back() //返回上一页面 history.forward() //前往下一页面 history.go(num) 负值代表 返回 正值前进 0刷新
• screen：屏幕 width/height 宽高 availWidth/availHeight 可用宽高 高度减去开始菜单栏

• navigator：导航/帮助 navigator.userAgent 得到浏览器的版本信息

• document：文档 里面包含页面相关的对象 DOM指的就是document对象里面的内容，而document又属于window里面的对象 所以 BOM包含DOM

window相关的事件

1. 页面加载完成事件 onload
2. 页面点击事件 onclick
3. 失去焦点事件 onblur
4. 获取焦点事件 onfocus

eval()方法

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

宽度200 边框粗细4px 颜色#ccc 按钮宽高45px 间距4px

代码介绍

1. demo01 表单校验 高级版
2. demo02 自定义对象
3. demo03 仿浏览器地址栏小练习 location.href
4. demo04 window相关的事件
5. demo05 计算器 美化页面版

课程回顾：

1. 表单校验涉及的知识点：
2. 失去焦点事件 onblur 表单提交事件onsubmit
3. 取消事件： 在事件中 return false;
4. confrim("您确认离开吗？")
5. 自定义对象
6. 声明方法的形式声明对象
   function Person(name,age){ this.name=name; this.age=age; this.run= function(){} }

7. 声明变量的形式 var p = { "name":"张三", "age":18, "run":function(){} }

   var p = new Person();

8. DHTML 动态html html+css+js
9. 包括 BOM浏览器对象模型 和 DOM文档对象模型
10. window： 属性和方法称为全局的 访问时可以省略window.
11. 常见方法： parseInt() parseFloat() isNaN() alert() confirm() propmt()弹出文本框
12. 常用属性：
13. location位置 ： location.href 浏览器访问地址 location.reload（）
14. history历史： length back() forward() go(num)
15. screen屏幕： 获得屏幕分辨率 width、height 可用分辨率 availWidth/Height
16. navigator导航/帮助： navigator.userAgent 得到浏览器版本信息
17. document DOM 包含页面相关的内容
18. window相关的事件
19. onload页面加载完成事件
20. onclick 页面点击事件
21. onblur 页面失去焦点事件
22. onfocus 页面获取焦点事件
23. eval()方法 可以将字符串内容 以js代码的形式执行