菜鸟自学WEB记—深入浅出了解JS

前言：

个人介绍：硕士搞自动驾驶算法，非科班，懂点CPP但不多，工作原因开始自学java/web开发等，目的为了解开发流程，个人不做实际开发。

系列文档是整理了个人认为重要的干货，详情请查看原视频。
java-web开发入门

独学而无友，则孤陋而寡。欢迎各路大神指点！

---

1.Javascript 特点

跨平台、面向对象、脚本语言（不需编译，浏览器解释即可）

（1）行内样式

写在标签的style属性中如：

<h1 style=”xx:xx”> ...</h1>	

---

2.js引入方式

（1）内部脚本

将js代码定义在html页面中
js代码放在script标签中；
可以在html中任意位置放置任意数量的script标签；
通常把脚本放在body元素的底部，可改善显示速度；；

（2）外部脚本

将js代码写在js文件中，再引入到html界面中
外部js文件只包括js代码，不包括script标签；

---

3.js与css引入方式类对比

（1）内部引入方式

js使用script标签，css使用style标签，

（2）外部引入方式

js为将代码写在单独的.js文件中，通过以下引入 （script标签不可自闭合）

<script src=”xx.js”></script>

css为将代码写在单独的.css文件中，通过以下引入（link标签可自闭合，但建议也写全）

<link href=”xx.css”>

---

4.js的输出语句

（1）window.alert() ：浏览器弹出警告框（window. 可以省略）
（2）document.write() ：写入html，在浏览器展示
（3）console.log()：写入浏览器控制台（console是浏览器的控制台对象，调用其log方法）

---

5.Js变量

（1）用var来声明变量，变量可以存放不同类型值；如：var x = 1;
1）命名规则：数字不能开头、建议用驼峰规则；
2）可以重复定义；
3）作用域为全局；
（2）let关键字声明的变量只在局部代码块内有效，不可重复定义，如:let x = 1;
（3）const声明的变量不可以改变值；如：const x = 1；

---

6.JS数据类型、运算符、流程语句

（1）数据类型

原始类型：number,string,boolean,null,undefined；
可以通过typeof获取数据的类型

（2）运算符

1）比较特殊的是“===”
==会进行类型转换；===不会进行类型转换；
2）parseInt将其他类型转换为数字，遇到第一个非数字便停止；

（3）实用调试技巧

通过浏览器的F12开发者模式可以查看post消息体的具体值；
也可以通过url地址的变化查看get请求的具体值；

---

7.js函数

（1）通过function关键字定义，如:

function name(参数1，参数2..){
函数体...
}

参数和返回值都不需要定义类型，因为js是弱类型语言。
（2）通过var声明变量，如：

var result = function(参数1，参数2..){
函数体...
}

（3）通过ES6的箭头函数

var func = (参数1，参数2..) => { 函数体}

---

8.js对象

（1）分类

基础对象：Array,String,JSON
BOM对象：对浏览器组件进行封装；
DOM对象：文档对象模型，js把html的每个标签都封装成了一个对象；

（2）Array数组对象

1）定义

var arr = new Array(1,2,3);  //方式1

var arr = [1,2,3];   //方式2 

2）访问
简单的索引方式；
3）数组内的元素可以是不同类型，且长度可变；
4）常用属性：length，
5）常用方法：
forEach(function(e){ 对遍历元素的处理函数 })（仅遍历数组中有值元素）
push()（添加元素到末尾）、splice()（删除元素）

（3）String对象

定义、常用属性、常用方法与Array类似。

（4）自定义对象

格式：

var 对象名={
属性1：属性值；
.....
函数名：function(函数名){ 函数体}
}； 

调用方式与java类似：对象.属性值；对象.函数名();

（5）JSON对象

1）键值对的形式，所有的KEY要用双引号包住；
2）多用于前后端通信的数据载体（请求和响应）；
3）字符串定义时根据value值的不同采用不同形式，例：

var jsonStr = '{"a":1,"b":"hello","c":["beijing","tianjin"]}';

注意大括号两边的单引号
4）只有json对象才可以引用键的值，格式为：对象.键值，两个常用转换函数：
字符串转json对象：var jsObj = JSON.parse(jsonStr);
对象转字符串： var jsonStr = JSON.stringfy(jsObj);

（6）BOM对象（Browser Object Model）

1）将浏览器的各个组成部分都封装成了对象；
2）组成：window（浏览器窗口）,navigator,screen,history,location（地址栏）
3）window对象（书写时可以省略）
常用属性：history,location,navigator
常用方法：
alert(),警告框窗口
confirm(),确认窗口，返回值根据点击的确定或取消决定
setInterval(),周期性的执行某一个函数
setTimeout() 延迟指定时间执行一次
4）location对象
属性：href（设置或者返回完整的url）
设置跳转页面地址：

location.href = "https://www.baidu.com";

（7）DOM对象（Document Object Model）

1）将标记语言（html）的各个组成部分封装成对应对象，定义了访问HTML、XML文档的标准；
2）组成：Document（整个文件）/Element（元素，每个标签）/Attribute（标签的属性）/Text（标签之间的文本）/Comment（注释）
3）可以通过DOM操作，对界面进行编辑，本质是对元素对象的属性和方法进行利用；
4）通过Document，再根据ID值、标签名称、name属性、class属性获取Element对象，最后使用对象的不同方法操作；

9.JS事件

（1）概念
按钮被点击、键盘按键、鼠标移动到某处等；
（2）JS事件绑定
方式一：通过html标签中的事件属性调用js函数，如：

<input type="button" onclick="on()" value="按钮1">
<script>
    function on(){
        alert("点击了按钮1");
    }
</script>

方式二：通过DOM元素属性绑定：

<input type="button" id="btn" value="按钮1">
<script>
    document.getElementById('btn').onclick=function(){
        alert("点击了按钮1");
    }
</script>

（3）JS常见事件

后记：

已经冲到了js，至此前端的最底层的知识就告一段落，小小沉淀一下，具体的细节都在工具书里。

话说学习了前端的基本原理后，我终于懂了为啥访问某些网站时，页面上自动跳出辣眼睛的画面了…