JS（一）基本语法、数据类型与DOM树操作

---

layout: post
title: JS（一）基本语法、数据类型与DOM树操作
description: JS（一）基本语法、数据类型与DOM树操作
tag: 前端

---

JS笔记网站

JS概念

JavaScript是世界上最好用的脚本语言，用于浏览器交互操作
ECMCScript是JavaScript的语言标准

快速入门

js引入

JS既有专门的.js文件，在html文件中使用script标签，添加src属性引入js文件，也可在html文件中直接使用，用script标签，script标签必须成对出现

基本语法

• 变量
  JS只有var类型变量
  语句于java类似
  Element：元素（html框架）
  Console：命令控制台，如console.log(“”/var)，控制台输出，相当于print
  Sources：源码
  Network：抓包
  Application：应用，查看缓存等

• 数据类型
  Number：JS不区分小数和整数
  

• 比较运算符
  

NaN与任何数字都不相等，包含自身，只能用isNaN判断
避免用浮点数计算比较，有精度损失

• null和undefined
  空和未定义
• 判断undefined：

var tmp = undefined;
    if (typeof(tmp) == "undefined"){
    alert("undefined");
    }

说明：typeof 返回的是字符串，有六种可能：“number”、“string”、“boolean”、“object”、“function”、“undefined”

• 判断null:

 var tmp = null;
    if (!tmp && typeof(tmp)!="undefined" && tmp!=0){
    alert("null");
    }

说明：即非零又非undefined

• 判断NaN:

    var tmp = 0/0;
    if(isNaN(tmp)){
    alert("NaN");
    }

说明：isNaN函数判断

• 判断undefined和null:

var tmp = undefined;
    if (tmp== undefined)
    {
    alert("null or undefined");
    }

    var tmp = undefined;
    if (tmp== null)
    {
    alert("null or undefined");
    }

说明：null==undefined

• 判断undefined、null与NaN:

 var tmp = null;
    if (!tmp)
    {
    alert("null or undefined or NaN");
    }

• 数组

JS不需要数组中元素类型统一

取数组下标，如果越界，会提示undefined

• 对象
  数组是中括号，对象是大括号
  对象的定义：
  var 对象名{
  属性1：属性值，
  属性2：属性值，
  属性3：属性值}
  属性值也可以是一个方法返回的结果
  例：
  var person = {
  age:22,
  height:170,
  weight:55,
  birth:function()={
  var now = Data().getFullYear();
  return now-this.age}

}
对象类似结构体，可有多个属性构成，每个属性用逗号隔开，最后一个不需要

严格检查模式

数据类型

字符串

数组

流程控制

while，for循环与java一致
if - else语句也一致
JS特殊的，可用一些方法

Map和Set

函数定义与参数传递

关键字throw，抛出异常，类似汇报异常报告

关键字：arguments，一个包含所有函数输入参数的数组

变量的作用域、let、const

全局变量绑定在window的下边

方法的定义与调用

方法.apply（对象1，参数）
apply修饰方法，可以将方法中的this指向为apply的第一个参数，对象名，apply的第二的参数是给方法输入参数赋值

常用内部对象

typeof()
Date()
注：Date（timestamp）可由时间戳返回时间

json

json是数据在传输时的存在形式，在抓包中可以看见。

对象原型

.proto:指向某个对象作为原型，类似父类对象
其实proto只是指向了原型对象，并不是真正意义上的继承，如果对象指定一个原型对象后，当对象再指定第二个原型时，对象有的第一个原型的属性会丢失，即不再与第一个原型有指向关系。。

既然类似Java的继承父类，JS后来引入了class关键字

使用class定义的对象，可以使用new关键字直接继承这个类的属性

也可用extend，在构建子类时继承父类

操作BOM对象

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。

document

操作DOM对象

DOM为网页的文档树，全称是Document Object Model，翻译过来是文档对象模型的意思

• 在已有节点下追加节点
  使用append给父级节点追加新节点：
  
• 创建新的节点
  

表单操作（验证）+MD5算法检验密码

• 获取表单信息
  
• 表单提交绑定事件
  onsubmit = function/class

<form action="" method="post" onsubmit="functionName() "></form>

<script>
    function functionName(){
        alert(1)
    }  

• 按钮绑定事件

onclick = function/class

<p>
    <input type="button" onclick="functionName()">
</p>

jQuery

jQuery CDN加速

jQuery中文文档

jQuery 使用公式:$选择器().action()
/“拿钱给人办事”/