JavaScript

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

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

语言特点

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

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

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

    事件:系统提供的一些特定时间点.
    点击事件: 当按钮被点击时 点击事件会触发,写到点击事件内部的代码就会执行.

<input type="button" value="按钮内联" onclick="alert('内联成功!')">

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

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

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

<!--引入外部js文件-->
<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

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

if

if (time<20){
    x="Good day";
}

if…else

if (time<20){
    x="Good day";
}else{
    x="Good evening";
}

if…else if…else

if (time<10){
    document.write("<b>早上好</b>");
}else if (time>=10 && time<20){
    document.write("<b>今天好</b>");
}else{
    document.write("<b>晚上好!</b>");
}

switch

switch(n){
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

while

while (i<5){
    x=x + "The number is " + i + "<br>";
    i++;
}

do/while

do{
    x=x + "The number is " + i + "<br>";
    i++;
}while (i<5);

break 和 continue

break 语句用于跳出循环。

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

方法声明

格式

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

声明常见的四种方法:

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

JavaScript中声明方法的三种方式

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

和页面相关的方法

通过元素的id获取元素对象
```
let d = document.getElementById("id");
```

获取和修改元素的文本内容 ```javascript d.innerText //获取

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


3. 
获取和修改文本框的value值
```javascript
let i = document.getElementById("i1");
i.value="xxx";  //修改
i.value   获取

获取和修改元素的html内容 ```javascript d.innerHTML //获取

d.innerHTML=”xxx” //修改


<a name="3b7ede3d"></a>
# JavaScript对象分类
分为三类:
- 内置对象: string,number,boolean等
- BOM浏览器对象模型 Browser Object Model, 包含和浏览器相关的内容
- DOM文档对象模型 DocumentObjectModel, 包含和页面相关的内容
<a name="db486b10"></a>
# BOM浏览器对象模型
window对象:该对象里面的属性和方法称为全局属性和方法, 访问时可以省略window.
<a name="599d9d8b"></a>
### window对象中的常见方法
- alert() 弹出提示框
- confirm() 弹出确认框
- prompt() 弹出文本框
- isNaN() 判断变量是否是NaN
- parseInt() 将字符串或小数转成整数
- parseFloat() 将字符串转成小数
- let timer = setInterval(方法,时间间隔)  开启定时器
- clearInterval(timer) 停止定时器
<a name="55d3f065"></a>
### window对象中常见的属性
- location:位置
   - location.href 获取和修改浏览器的请求地址
   - location.reload()  重新加载页面方法
- history:历史
   - history.length   获取历史页面数量
   - history.back()  返回上一页面方法
   - history.forward() 前往下一页面方法
- screen:屏幕
   - screen.width  屏幕宽度分辨率
   - screen.height 屏幕高度分辨率
- navigator: 导航/帮助
   - navigator.userAgent   获取浏览器的版本信息
<a name="b695ef08"></a>
# 事件相关
<a name="9ab70c72"></a>
### 什么是事件?
系统给提供的一些特定时间点,包括鼠标事件/键盘事件和状态改变事件
<a name="d872400c"></a>
### 鼠标事件
- onclick: 鼠标点击事件
- onmouseover:鼠标移入事件
- onmouseout:鼠标移出事件
- onmousedown:鼠标按下事件
- onmouseup:鼠标抬起事件
- onmousemove:鼠标移动事件
<a name="32f13c9d"></a>
### 键盘事件
- onkeydown:键盘按下
- onkeyup:键盘抬起
<a name="1ea0302a"></a>
### 事件传递(事件冒泡)
当某一个区域的多个元素事件需要响应,事件响应的顺序是从最底层往上层传递(类似气泡从下往上,所以又称为事件冒泡)
事件绑定(如何给元素添加事件) 两种绑定方式:
- 
事件属性绑定:
```html
<input type="button" value="事件属性绑定" onclick="alert('事件属性绑定成功!')">

动态绑定(通过js代码给元素添加事件):

//动态绑定, 因为动态绑定可以将html代码和js代码分离所以使用的会更多.
btn.onclick = function () {
  alert("动态绑定成功!");
}

WEB前端

JavaScript简化教程