【js】变量及基本操作

前言

浏览器一般有两种引擎：
1. 渲染引擎，用来解析HTML、CSS
2.JS引擎，用来解析js
js作用主要是告诉html怎样展示，响应用户操作。做出各种超炫的页面。

一、认识js

1.1 js的组成

1.ECMAScript
2.DOM
3.BOM

1.2 外部引入

js代码要写在script标签中，像css一样，既可内部使用，也可外部引入。

<script src="路径"></script>

1.3 注释

有两种：
1.// 只用于单行注释
2./* */ 用于多行注释

1.4 调试常用

在测试代码中，常用控制器。

console.log("内容")

此语句常用来在控制台输出什么

二、变量与数据类型

1.定义变量

定义变量有三种：let、var、const
一般不用var了，var可以允许在另一个代码块调用当前代码块的变量，let不可以，但var是ECMA5的，即2015年前的。const常用来定义常量。
例如：

let num = 3*30*6;
console.log(num);

 定义变量命名规则：
 1. 字母、数字、下划线、$符任意结合，但不能以数字开头。
 2. 严格区分大小写
 3. 不要无中生有，也不要重复声明。
 4. 不要使用关键字，比如：var /let /char等。也不可使用保留字，即以后可能会成为关键字的。
 5. 命名时，要见名知意，以便之后再次浏览。

2.定义变量的写法

        1. let a = 10,b = 20,c = 30;
        2.let a;
        a = 10;
        3.let a , b , c = 10;  
        //其实际含义为   let a;  let b;   let c = 10;

数据类型

1. 基础数据类型如下：
number		  数字
string        字符型，用双引号或者单引号包起来
boolean       布尔型，其值为true 或者 false
undefined     无定义
null          空

2.复杂数据类型
object   对象，是对一个事物的描述，可看做键值对。
示例如下：

        let abd = {
            name: "张三",
            age : 16,   //注意有逗号
            sex: "女"   //注意没逗号
        };
        //输出
        console.log(abd.age)
        //重新赋值
        abd.sex = "咦~ 不可说"
        //删除
        delete abd.age;
        //添加
        abd.tel = "98765432102";
        //[]来取值
        console.log(abd["sex"])

array   数组，用来存储一组数据。
示例如下：

        let a = [10010,"移动",true];
        // 从0开始
        console.log(a[0]);
        //取数组的长度
        console.log(a.length);
        //为数组重新赋值
        a[1] = "联通"

三、基本操作

1.window     代表当前窗口，里面包含很多事件、属性等。
2.document   代表整个html文档，可用来访问当前文档的所有元素。
可在控制台用  console.log(window/document)  来观察其中的内容。

        //获取id名为wrap的标签
        let a = document.getElementById("wrap");
        //获取所有class名为obv的标签
        let b = document.getElementsByClassName("obv")
        //获取div标签
        let c = document.getElementsByTagName("div")
        //获取name名为input的标签，一般是表单有name
        let d = document.getElementsByName("input")
        //操作标签内容
        a.innerText = "a中的内容"  //若之前有其它内容，会被覆盖掉
        a.innerText += "为其添加的内容"   //添加到后面
        //操作html
        b.innerHTML = "<b>添加<b>"
        //操作样式，o表示object,其后是描述
        let oNav = document.getElementById("wrap");
        oNav.innerText = "#wrap{样式}"
        oNav.title = "导航栏"

四、改变标签名称操作样式