JavaScript

JavaScript简称JS, 作用:负责给页面添加动态效果

该语言和Java没有关系,为了蹭Java的热度

语言特点

  1. 属于脚本语言,不需要编译直接解析执行
  2. 属于弱类型语言,变量的赋值不限制类型
  3. 基于面向对象,和面向对象语言类似
  4. 安全性高, JavaScript语言只能访问浏览器内部的数据, 浏览器以外的(磁盘上的数据)不允许访问.
  5. 交互性强:由于直接嵌入到html页面中,该语言是在客户端浏览器中执行,可以直接和用户进行交互,而java语言还需要经过网络请求才能和用户交互.

在HTML页面中如何添加JS代码

内联: 在标签的事件属性中添加js代码, 当事件触发时执行.

  1.     事件:系统提供的一些特定时间点.
  3.     点击事件: 当按钮被点击时 点击事件会触发,写到点击事件内部的代码就会执行.
  1. <input type="button" value="按钮内联" onclick="alert('内联成功!')">

内部:在html页面中的任意位置添加script标签,在标签体内写js代码

  1. <!--内部引入方式,建议写在</body>的上面-->
  2. <script>
  3.     alert("内部成功!");
  4. </script>

外部:在单独的js文件中写js代码,在html页面中 通过script标签引入

  1. <!--引入外部js文件-->
  2. <script src="my.js"></script>

JavaScript语法

变量,数据类型,运算符,各种语句,方法声明,面向对象

变量

JavaScript语言属于弱类型语言

JavaScript: let x =10; let s=”abc”; x=”abc”;不会报错 let p = new Person()

弱类型的本质,就是一个变量赋值运行后 还可以更改类型

  • let和var的区别:

    • 用let声明变量 作用域比较局限
    • 用var声明变量 不管在什么位置都是声明的全局变量

数据类型

JavaScript不分基本数据类型和引用类型, 统称对象类型

几种常见的对象类型

  • 数值: number
  • 字符串: string
  • 布尔值: boolean true/false
  • undefined: 未定义类型 , 当变量只声明不赋值时 变量为未定义类型
  • 获取变量类型的方法 typeof 变量
  • NaN: Not a Number: 不是一个数
  • null: 空

运算符

  • 算术运算符: + - * / % , 除法会自动转换整数或小数

  • 关系运算符: > < >= <= != == ===

    • ==: 先统一等号两边类型 再比较值 “666”==666 true
    • ===:先比较类型,类型相同之后再比较值 “666”===666 false
  • 逻辑运算符: && || !
  • 赋值运算符: = += -= *= /= %= ++ —
  • 三目运算符: 条件? 值1 : 值2

各种语句

for

  1. for (var i=0;i<cars.length;i++){ 
  2.     document.write(cars[i] + "<br>");
  3. }

if

  1. if (time<20){
  2.     x="Good day";
  3. }

if…else

  1. if (time<20){
  2.     x="Good day";
  3. }else{
  4.     x="Good evening";
  5. }

if…else if…else

  1. if (time<10){
  2.     document.write("<b>早上好</b>");
  3. }else if (time>=10 && time<20){
  4.     document.write("<b>今天好</b>");
  5. }else{
  6.     document.write("<b>晚上好!</b>");
  7. }

switch

  1. switch(n){
  2.     case 1:
  3.         执行代码块 1
  4.         break;
  5.     case 2:
  6.         执行代码块 2
  7.         break;
  8.     default:
  9.         与 case 1 和 case 2 不同时执行的代码
  10. }

while

  1. while (i<5){
  2.     x=x + "The number is " + i + "<br>";
  3.     i++;
  4. }

do/while

  1. do{
  2.     x=x + "The number is " + i + "<br>";
  3.     i++;
  4. }while (i<5);

break 和 continue

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

方法声明

格式

js格式: function 方法名(参数列表){方法体}

声明常见的四种方法:

  • 无参无返回值
  • 无参有返回值
  • 有参无返回值
  • 有参有返回值

JavaScript中声明方法的三种方式

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

和页面相关的方法

  1. 通过元素的id获取元素对象
    1. let d = document.getElementById("id");
  1. 获取和修改元素的文本内容 ```javascript d.innerText //获取

d.innerText = “xxx”; //修改

  3. 3. 
  4. 获取和修改文本框的value值
  5. ```javascript
  6. let i = document.getElementById("i1");
  8. i.value="xxx";  //修改
  10. i.value   获取
  1. 获取和修改元素的html内容 ```javascript d.innerHTML //获取

d.innerHTML=”xxx” //修改

  4. <a name="3b7ede3d"></a>
  5. # JavaScript对象分类
  7. 分为三类:
  9. - 内置对象: string,number,boolean等
  10. - BOM浏览器对象模型 Browser Object Model, 包含和浏览器相关的内容
  11. - DOM文档对象模型 DocumentObjectModel, 包含和页面相关的内容
  13. <a name="db486b10"></a>
  14. # BOM浏览器对象模型
  16. window对象:该对象里面的属性和方法称为全局属性和方法, 访问时可以省略window.
  18. <a name="599d9d8b"></a>
  19. ### window对象中的常见方法
  21. - alert() 弹出提示框
  22. - confirm() 弹出确认框
  23. - prompt() 弹出文本框
  24. - isNaN() 判断变量是否是NaN
  25. - parseInt() 将字符串或小数转成整数
  26. - parseFloat() 将字符串转成小数
  27. - let timer = setInterval(方法,时间间隔)  开启定时器
  28. - clearInterval(timer) 停止定时器
  30. <a name="55d3f065"></a>
  31. ### window对象中常见的属性
  33. - location:位置
  35.    - location.href 获取和修改浏览器的请求地址
  36.    - location.reload()  重新加载页面方法
  37. - history:历史
  39.    - history.length   获取历史页面数量
  40.    - history.back()  返回上一页面方法
  41.    - history.forward() 前往下一页面方法
  42. - screen:屏幕
  44.    - screen.width  屏幕宽度分辨率
  45.    - screen.height 屏幕高度分辨率
  46. - navigator: 导航/帮助
  48.    - navigator.userAgent   获取浏览器的版本信息
  50. <a name="b695ef08"></a>
  51. # 事件相关
  53. <a name="9ab70c72"></a>
  54. ### 什么是事件?
  56. 系统给提供的一些特定时间点,包括鼠标事件/键盘事件和状态改变事件
  58. <a name="d872400c"></a>
  59. ### 鼠标事件
  61. - onclick: 鼠标点击事件
  62. - onmouseover:鼠标移入事件
  63. - onmouseout:鼠标移出事件
  64. - onmousedown:鼠标按下事件
  65. - onmouseup:鼠标抬起事件
  66. - onmousemove:鼠标移动事件
  68. <a name="32f13c9d"></a>
  69. ### 键盘事件
  71. - onkeydown:键盘按下
  72. - onkeyup:键盘抬起
  74. <a name="1ea0302a"></a>
  75. ### 事件传递(事件冒泡)
  77. 当某一个区域的多个元素事件需要响应,事件响应的顺序是从最底层往上层传递(类似气泡从下往上,所以又称为事件冒泡)
  79. 事件绑定(如何给元素添加事件) 两种绑定方式:
  81. - 
  82. 事件属性绑定:
  83. ```html
  84. <input type="button" value="事件属性绑定" onclick="alert('事件属性绑定成功!')">
  • 动态绑定(通过js代码给元素添加事件):
    1. //动态绑定, 因为动态绑定可以将html代码和js代码分离所以使用的会更多.
    2. btn.onclick = function () {
    3.   alert("动态绑定成功!");
    4. }