JavaScript

Posted 2021-03-25 戈达尔

javascript

JavaScript与Java的关系

不要误会，可能有许多人会猜测 JavaScript 和 Java 是同一批人出的吧。但实际是两者没有任何关联，实际上是当时 Java 很火，然后 JavaScript 去蹭了波热点。

JavaScript的引入方式

• 在 Script 标签里写

  <script> 在这里写你的JS代码 </script>

• 引入额外的JS文件

  <script?src="myscript.js"></script>

声明变量

1. avaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
2. 声明变量使用 var 变量名; 的格式来进行声明
3. ES6新增了let命令，用于声明变量。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。
4. 使用 const 来声明常亮

JavaScript数据类型

JavaScript 是弱类型语言 声明变量时不需要特定声明他的数据类型

数值类型（Number）

JavaScript不区分整型和浮点型，就只有一种数字类型。

var a = 12.34;
var b = 20;

将字符串类型数值转为数值类型

parseInt("123") // 返回123
parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。
parseFloat("123.456") // 返回123.456

字符串（String）

var a = "Hello"
var b = "world;
var c = a + b;

常用方法：

方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt()	返回指定位置字符
.concat()	字符串拼接
.indexOf()	子序列位置
.substring()	根据索引获取子序列
.slice()	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split()	分割

布尔值（Boolean）

var a = true;
var b = false;

""(空字符串)、0、null、undefined、NaN都是false

对象（Object）

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型。

数组

数组对象的作用是：使用单独的变量名来存储一系列的值。

var a = [123, "ABC"];

常用方法：

方法	说明
.length	数组的大小
.push()	尾部追加元素
.pop()	获取尾部的元素，并删除
.unshift()	头部插入元素
.shift()	头部移除元素
.slice()	切片
.reverse()	反转
.join()	将数组元素以字符串间隔连接成字符串
.concat()	数组拼接
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组

运算符

算数运算符

+（加）、-（减）、*（乘）、/（除）、%（取余）、++（自增）、--（自减）

比较运算符

>（大于）、>=（大于等于）、<（小于）、<=（小于等于）、!=（不等于）、==（等于）、===（全等）、!==（不全等）

逻辑运算符

&&（与）、||（或）、!（非）

赋值运算符

=、+=、-=、*=、/=

流程控制

if-else

var a = 10;
if (a > 5){
　　 console.log("yes");
}else {
　　 console.log("no");
}

if-else if-else

var a = 10;
if (a > 5){
　　 console.log("a > 5");
}else if (a < 5){
　　 console.log("a < 5");
}else {
　　 console.log("a = 5");
}

switch

var day = new Date().getDay();
switch (day) {
    case 0:
        console.log("Sunday");
        break;
    case 1:
        console.log("Monday");
        break;
    default:
        console.log("...") }

for

for (var i=0; i<10; i++) {
    console.log(i);
}

while

var i = 0;
while (i < 10) {
    console.log(i);
    i++;
}

三元运算

var a = 1;
var b = 2;
var c = a > b ? a : b  /* a > b成立执行？后的语句，不成立执行：后的语句 */
var a = 10, b = 20;
var x = a > b?a:(b=="20")?a:b;

函数

使用 function 关键字定义

function func(){
    函数体
};
// 带参函数
function func1(a, b){   // 调用函数时按照必须参数传递，多余参数舍弃
    console.log(a, b);
    return [a, b];  // 多个参数使用数组的形式返回
};
// 接收对于的参数
function func2(a, ...b){   // 使用三个点可以用来接收多余的参数
    console.log(a, b);
    console.log(a, arguments[0])  // 类似于Array并接收所有的参数只能查看有几个元素和使用位置取值
}
// 匿名函数
(function (a, b){
    console.log(a, b);
})(1, 2);   // 立即执行函数内容
// ES6还可以使用 => 的形式定义函数
var func3 = (a, b) => a + b;
// 等同于
function func3(a, b){
    return a+b;
}

内置对象

Date对象

// 方法1：不指定参数
var d1 = new Date();
// 方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
// 方法3：参数为毫秒数
var d3 = new Date(5000);
// 方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);

Date对象方法

方法	描述
getDate	获取日
getDay	获取星期几（从0~6代表从周日（0）到周六（6））
getMonth	获取月份，月份从0开始
getFullYear	获取年份
getYear	获取从1900年到现在的年数
getHours	获取小时
getMinutes	获取分钟
getSeconds	获取秒
getMilliseconds	获取毫秒
getTime	获取从1970年到现在的毫秒数

JSON对象

var str1 = '{"name": "Gredae", "age": 18}';
var obj1 = {"name": "Gredae", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1);
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

RegExp对象

// 定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");  
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;  // 注意事项，正则表达式中不能有空格

// 正则校验数据
reg1.test('json666')

// 全局匹配
var s1 = 'asdjfa';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('asdjfa');
reg2.test('asdjfa');
reg2.lastIndex;
/*第二个注意事项，全局匹配时有一个lastIndex属性*/

// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();   // 不传递时默认传递一个undefined

Math对象

abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。

函数	描述
abs()	绝对值
exp()	返回e的指数
floor()	向下取整
log()	返回自然数的对数
max()	返回最大值
min()	返回最小值
pow(x, y)	返回x的y次幂
random()	返回0~1的随机数
round()	四舍五入最接近的数
sqrt()	平方根
sin()	正弦值
tan()	正切值

BOM

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

windows对象

所有浏览器都支持 window 对象。

• window.innerHeight：浏览器窗口高度
• window.innerWidth：浏览器窗口宽度
• window.open()：打开新窗口
• window.close()：关闭当前窗口

window的子对象

• navigator

  • navigator.appName：Web浏览器全称
  • navigator.appVersion：Web浏览器版本
  • navigator.userAgent：Web浏览器的信息（一般防爬措施需要验证userAgent信息）
  • navigator.platform：操作系统信息（信息不准确）

• history对象

  • history.forward()：前进
  • history.back()：后退

• location对象

  • location.href：获取地址栏URL，设定值可以实现跳转功能
  • location.reload：重新加载页面

• 弹出框

  可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

  • 警告框：alert(123)
  • 确认框：confirm("是否退出？")
  • 提示框：prompt("请输入你的名字：")

• 计时器

  • setTimeout()

    在一定时间间隔之后来执行代码或者函数

    清除使用clearTimeout，需要指定计时器对象

  • setInterval()

    在一定时间间隔之后反复来执行代码或者函数

    清除使用clearInterval，需要指定计时器对象

DOM

DOM （Document Object Model）是指文档对象模型，通过它，可以访问html文档的所有元素。

DOM标准规定HTML文档中的每个成分都是一个节点(node)：

• 文档节点(document对象)：代表整个文档
• 元素节点(element 对象)：代表一个元素（标签）
• 文本节点(text对象)：代表元素（标签）中的文本
• 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
• 注释是注释节点(comment对象)　

获取节点对象

• getElementById 根据ID获取标签
• getElementsByClassName 根据class属性获取标签对象
• getElementsByTagName 根据标签名称合集

间接获取节点对象

• parentElement 父节点标签元素
• children 所有子标签
• firstElementChild 第一个子标签元素
• lastElementChild 最后一个标签元素
• nextElementSibling 下一个兄弟标签元素
• previousElementSibling 上一个兄弟标签元素

创建节点对象：createElement

var divEle = document.createElement("div");

添加子节点

为节点添加子节点

var imgEle = document.createElement("img");
imgEle.setAttribute("src", "1.jpg");  // 为节点添加属性
var divEle = document.getElementById("div");
divEle.appendChild(imgEle);   // 添加为其后代节点
divEle.insertBefore(imgEle, divEle.childNodes[0])   // 在子节点前面添加子节点

删除子节点

为节点删除子节点

var divEle = document.getElementById("div");
divEle.removeChild(divEle.childNodes[2]);   // 删除节点下的子节点

替换子节点

为节点替换子节点

var new_text = document.createTextNode("这是新的标签！");
var divEle = document.getElementById("div");
divEle.replaceChild(new_text, divEle.childNodes[2]);

属性节点

• 获取文本节点的值

  var divEle = document.getElementById("div");
  var Text = divEle.innerText;
  var Html = divEle.innerHTML;

• 设置文本节点的值

  var divEle = document.getElementById("div");
  divEle.innerText="1";
  divEle.innerHTML="<p>2</p>";

属性

var divEle = document.getElementById("div");
divEle.setAttribute("age","18");   // 设置属性
divEle.getAttribute("age");   // 获取属性
divEle.removeAttribute("age");   // 删除属性

取值

适用于以下标签：

1. input

2. select

3. textarea

var lEle = document.getElementById("li");
console.log(lEle.value);
var sEle = document.getElementById("op");
console.log(sEle.value);
var tEle = document.getElementById("text");
console.log(tEle.value);

class操作

className   // 获取所有样式类名(字符串)
classList.remove(cls)   // 删除指定类 classList.add(cls) 添加类
classList.contains(cls)   // 存在返回true，否则返回false
classList.toggle(cls)   // 存在就删除，否则添加

样式操作

var pEle = document.getElementById("p");
pEle.style.backgroundColor="red";

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript

常用事件	描述
onclick()	当元素被单击触发
ondblclick()	当元素被双击触发
onfocus()	当元素获取焦点
onblur()	当元素失去焦点
onchange()	当域内容被改变
onload()	当页面内容加载完毕
onkeydown()	当键盘按下
onkeyup()	当键盘松开
onkeypress()	当键盘按下并松开
onmouserdown()	当鼠标按下
onmousemove()	当鼠标被移动
onmouseout()	当鼠标从元素移开
onmouseover()	当鼠标移动到元素上
onselect()	当用户选中文本
onsubmit()	当表单被提交

绑定方式

• 方式一：

  <script>
      function changeColor(his){
        his.style.backgroundColor="green";
    }
  </script>
  <div id="d1" onclick="changeColor(this);">点我</div>

• 方式二：

  <div id="div">点我</div>
  <script>
  　　 var divEle = document.getElementById("div");
  　　 divEle.onclick=function () {
  　　　　 divEle.innerText="呵呵";
  　　　}
  </script>