JavaScript

js语言基础

1.js就是运行在浏览器上面的脚本语言
2.js是运行时语言，没有编译过程，相对来说安全性较低
代码在执行过程中如果出现错误，运行立马中断，后面的代码就不会执行
3.js是弱类型语言
0.1+0.2=0.3000000000000004
原因
js是弱类型语言没办法将 0.1 完美的转化成二进制进行运算
4.js是靠事件驱动的语言
5.js具有面向对象的特点
组成：
ECMAScript 描述了js的语法规范
DOM Document Object Model 描述了js对文档内容的操作
BOM Browser Object Model 描述了js对浏览器的操作
js主要负责的工作
1.数据交互 DOM渲染
2.事件驱动逻辑操作
js引入方式
1.内联引入将 js 代码写在script标签中
(1)通常在body标签的末尾
(2)通常在body标签后面
2.外联引入将 js 代码写在 .js 文件中
通过 script 标签的 src 属性引入到html
(1)通常在head标签中末尾引入(在style标签上面)
(2)通常在body标签的末尾

js输出方式

1.console.log() 控制台输出
2.document.write() 文档输出
3.弹框输出
3.1 alert() 警告弹窗
3.2 confirm() 提示弹窗
3.3 prompt() 询问弹窗

变量

可以理解为一个储存数据的容器

变量的声明

通过关键字 var 后面写上变量名来声明变量

变量命名规则

1.只能包含数字字母下划线 _ $
2.不能以数字开头
3.严格区分大小写
4.不能使用关键字和保留字
5.驼峰命名和地中海命名
6.见名知意

数据类型

基础数据类型

number 数值类型
string 字符类型
由双引号或单引号包起来的字符串叫字符串
注意！！！
同类型的引号不能嵌套
boolean 布尔类型
就俩值： true 或 false
undefined 未知类型
当一个变量只声明没复制的时候
系统会自动给变量赋值 undefined

引用数据类型

object 对象类型 {}
array 数组类型 []

特殊数据类型

null 空

运算符

1.赋值运算符 =

`var a = 1;`

2.算数运算符

加号
如果两个数值类型的值进行运算则为正常的加法

console.log(1 + 1);

如果数值和字符串进行运算则为字符串的拼接

console.log(1 + "1");

减法乘法除法
默认先将符号两边的值转化成数值在进行计算
只有字符串数字才能转化数值类型
如果数字跟字母进行运算（除了+）会得到一个 NaN
NaN (Not a Number) 是数值类型含义就是不是数字
除数不为0 否则得到数值类型的 Infinity（无穷）
% 取余号
符号左边的数字除以符号右边的数字除不尽的余数

3.关系运算符

< <= => == === != !==
关系运算符的结果一定是布尔值 (true 或 false)
等式成立 true
等是不成立 false

等于和全等
全等要求除了值相等外数据类型必须一样

4.逻辑运算符

&& 且
|| 或
! 非

&& 符号两边的判断结果必须全部都是真
如果有任意一个不是真 &&的结果都是 false

console.log(1 > 0 && 2 > 1);

|| 符号两边的判断结果有一个是真 ||的结果就是真

console.log(1 > 0 || 1 < 0);

! 取反

console.log(!false);

5.复合运算符 += -= /= *=

a += 20    等价于 a = a + 20;
a -= 20    等价于 a = a - 20;
a /= 20    等价于 a = a / 20;
a *= 20    等价于 a = a * 20;

字符串做判断

0~9 < A~Z < a~z
判断原则参考 ASCII码表中其相对应的十进制数字大小

数学方法

浏览器内置对象数学对象 Math
Math 提供了丰富的数学计算方法

1. Math.floor();

取整直接舍掉小数位

2. Math.ceil();

取整只要有小数位就向上进1

3. Math.round();

四舍五入

4. Math.random(); 随机数

只能随机出来 0~1 这个区间内的数字
随机数公式
n = Math.round(Math.random() * (max - min) + min);

基础的元素获取

根据id获取元素

var inp = document.getElementById('inp1');
console.log(inp);

获取button标签

var btn = document.getElementById('btn1');
console.log(btn);

绑定点击事件

```
btn.onclick = function(){
    
}
```

基础标签操作

往标签中写入文本 innerText
innerText 两种用法
往指定标签中写入文本
```
fbox.innerText = '文本'
```
获取指定标签中的文本
```
var a = fbox.innerText
```

修改标签的基础样式
修改宽高

box.style.width = '300px';
box.style.height = '300px';

修改背景色

box.style.backgroundColor = 'rgb(20,0,0)';