系统学习目录

第一篇——HTML/HTML5
第二篇——CSS/CSS3
第三篇——JavaScript
第四篇——jQuery
第五篇——Ajax & JSON
第六篇——Bootstrap
第七篇——Less

笔记目录

系统学习目录
概述
基本概念
函数
弹框
对象
数组
String对象
Window对象
MATH对象
DATE对象
DOM对象
事件

前言：系统的学习JavaScript，以w3cschool提供的微课和文档为基准，记录自己之前不知道的知识点。学了一遍，今后就是项目中的应用和深入的学习了，笔记不断。各位仅供参考。

概述

组成
1. ECMAScript，描述了该语言的语法和基本对象。
2. 文档对象模型（DOM），描述处理网页内容的方法和接口。
3. 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。
旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。
JavaScript可被放置在 HTML 页面的 <body> 和 <head> 部分中。
输出方式
1. JavaScript 没有任何 打印或者输出的函数。
2. document.write()：将内容输出到HTML文档中。
3. window.alert()：弹出警告框。
4. innerHTML：写入到HTML元素中。
5. console.log()：写入到浏览器的控制台。

基本概念

数据类型
1. 基本类型：string，number，boolean，null，undefined，symbol（ES6新增）。
2. 复杂类型：object。
3. JavaScript 中的变量是没有类型的，只有值才有。
4. 弱类型：变量可以随时持有任何类型的值。
5. undefined类型只有一个值，即undefined。
6. null类型也只有一个值，即null。
7. 当值为 0，null，undefined，空字符串时布尔值为false。 任何拥有值的字符串其布尔值为true。
转义字符
变量提升
JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做 变量提升（hoisting）。
区块
- JavaScript 使用大括号，将多个相关的语句组合在一起，称为 区块（block）。
- 对于var命令来说，JavaScript 的区块不构成单独的作用域（scope）。
- 对于let命令来说，JavaScript 的区块构成单独的作用域。声明的变量等只能在该作用域内生效。
在JavaScript中，取模运算符%不仅支持整数，还支持浮点数。
字符串的不可变性
- 在 JavaScript 中，字符串的值是 不可变的，这意味着一旦字符串被创建就不能被改变。
```
var myStr="Bob";
myStr[0]="J";
console.log(myStr);//"Bob"
console.log(myStr[0]);//"B"
```
- 注意，这并不意味着 myStr 永远不能被改变，只是字符串字面量 string literal 的各个字符不能被改变。
```
var myStr="Bob";
myStr="Job";
console.log(myStr);//"Job"
```

typeof运算符

typeof undefined === "undefined" // true
typeof null === "object" // true
typeof true === "boolean" // true
typeof 42 === "number" // true
typeof "42" === "string" // true
typeof {lift: 42} === "object" // true// ES6中新加入的类型, 了解下就好
typeof Symbol() === "symbol" // true

函数

参数规则
1. JavaScript 函数定义时参数 没有指定 数据类型。
2. JavaScript 函数对隐藏参数(arguments)没有进行检测。
3. JavaScript 函数对隐藏参数(arguments)的个数没有进行检测。
4. 隐式参数
```
function sum(){return arguments[0]+arguments[1];
}
sum(1, 2);//3
```
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。
如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

弹框

Alert
1. 当弹出警报框时，用户必须单击“确定”继续。
2. 警报功能采用单个参数，即弹出框中显示的文本。
3. 要在警告框中显示换行可以使用\n。
Prompt
1. 当弹出提示框时，输入输入值后，用户将不得不单击“确定”或“取消”继续。
2. 如果用户单击确定，该框将返回输入值。如果用户单击取消，该框将返回null。
3. 两个参数：前者文本框中显示的标签；后者输入框中的预设文字（可选）。
Confirm
1. 当弹出确认框时，用户必须单击“确定”或“取消”继续。
2. 如果用户单击确定，该框将返回true。如果用户单击取消，该框将返回 false。

对象

访问对象属相两种方式：

var person={name:'jone',age:22,
}
var name = person.name;//jone
var age = person['age'];//22
var prop='name';
var value=person[prop];//jone

删除对象属性：delete ourDog['tails'];。

对象构造器：

function person(firstname, lastname, age, eyecolor){this.firstname = firstname;this.lastname = lastname;this.age = age;this.eyecolor = eyecolor;
}

在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）。
将函数关联到对象属性时不需要写括号。

数组

push()：在数组尾部压入一个元素与给数组arr[arr.length]赋值是一样的。
pop()：方法用来抛出一个数组末尾的值。
shift()：方法用来抛出一个数组起始的值。
unshift()：在数组头部压入一个元素。
concat()：方法允许您连接数组并创建一个全新的数组。
slice()：方法可从已有的数组中返回选定的元素。不会修改原数组。
关联数组：虽然许多编程语言支持具有命名索引的数组（文本而不是数字），称为关联数组，但JavaScript不支持。但是，我们仍然可以使用命名数组语法，这将产生一个对象。例如:
```
var person = []; // 空数组
person["name"] = "lilei";
person["age"] = 28;
console.log(person["age"]); //  "28"
```
此时，person 被视为一个对象，而不是一个数组。命名索引“name”和“age”成为person对象的属性。且当 person 数组被视为对象时，标准数组方法和属性将产生不正确的结果。例如，现在person.length将返回0。

String对象

方法及描述

replace()

var str="Mr Blue has a blue house and a blue car and a blue hat";// 将字符串中首次出现的blue替换成red
var n=str.replace("blue", "red"); //Mr Blue has a red house and a blue car and a blue hat// 用正则匹配字符串中所有出现的blue并替换成red
var c=str.replace(/blue/g, "red"); //Mr red has a red house and a red car and a red hat

substring()

如果 indexStart 等于 indexEnd，substring 返回一个空字符串。
如果省略 indexEnd，substring 提取字符一直到字符串末尾。
如果任一参数小于 0 或为 NaN，则被当作 0。
如果任一参数大于 stringName.length，则被当作 stringName.length。

如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样。

var anyString = "w3cschool";// 输出 "w3c"
document.write(anyString.substring(0,3)+"<br>");
document.write(anyString.substring(3,0)+"<br>");
document.write(anyString.substring(3,-3)+"<br>");
document.write(anyString.substring(3,NaN)+"<br>");
document.write(anyString.substring(-2,3)+"<br>");
document.write(anyString.substring(NaN,3)+"<br>");// 输出 "cho"
document.write(anyString.substring(4,7)+"<br>");
document.write(anyString.substring(7,4)+"<br>");// 输出 ""
document.write(anyString.substring(4,4)+"<br>");// 输出 "w3csch"
document.write(anyString.substring(0,6)+"<br>");// 输出 "w3cschool"
document.write(anyString.substring(0,9)+"<br>");
document.write(anyString.substring(0,12));

Window对象

方法

MATH对象

方法
Math.floor()向下取整。
Math.random() 返回介于 0（包含） ~ 1（不包含）之间的一个随机数。

返回 min（包含）～ max（包含）之间的数字：

function getRndInteger(min, max) {return Math.floor(Math.random() * (max - min + 1) ) + min;
}

Math.round() 返回一个数字四舍五入后最接近的整数。

Math.round()并不总是舍入到远离0的方向（尤其是在负数的小数部分恰好等于0.5的情况下）

x = Math.round(20.49);   //20
x = Math.round(20.5);    //21
x = Math.round(-20.5);   //-20
x = Math.round(-20.51);  //-21

DATE对象

方法

DOM对象

选择元素

//通过 id 找元素
document.getElementById(id) //通过 类 找元素
document.getElementsByClassName(name) //通过 标签 找元素
document.getElementsByTagName(name)

元素的方法
1. element.childNodes 返回一个元素的子节点的数组。
2. element.firstChild 返回元素的第一个子节点。
3. element.lastChild 返回元素的最后一个子节点。
4. element.hasChildNodes 如果元素有任何子节点，则返回 true，否则为 false 。
5. element.nextSibling 返回相同树级别的下一个节点。
6. element.previousSibling 返回在同一树级别的上一个节点。
7. element.parentNode 返回元素的父节点。
改变元素样式
1. 可以使用元素的 style 对象来访问所有样式属性。
2. 所有CSS属性都可以使用JavaScript进行设置和修改。
3. 不能在属性名称中使用破折号（ - ）：这些替换为驼峰写法，其中复合词以大写字母开头比如: background-color属性应该被写为 backgroundColor。
添加删除节点
1. element.cloneNode() 克隆元素并返回结果节点。
2. document.createElement(element) 创建一个新的元素节点。
3. document.createTextNode(text) 创建一个新的文本节点。
4. element.appendChild(newNode) 将一个新的子节点添加到元素作为最后一个子节点。
5. element.insertBefore(node1, node2) 在节点2之前插入node1作为子节点。
6. 要删除HTML元素，必须选择元素的父项并使用 removeChild(node) 方法。
7. 另一种删除方式：使用 parentNode 属性来获取要删除的元素的父项：
```
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
```
8. element.replaceChild(newNode,oldNode) 替换元素。

事件

常见HTML事件
onchange 事件主要用于文本框。当文本框内的文本发生变化并且焦点从元素中丢失时，调用事件处理程序。
事件监听
1. addEventListener() 方法将事件处理程序附加到元素，而不会覆盖现有的事件处理程序。可以向一个元素添加许多事件处理程序。
2. 还可以将许多同一类型的事件处理程序添加到一个元素，即两个“点击”事件。
3. 使用 removeEventListener()删除事件监听。
```
<button id="demo">开始</button><script>var btn = document.getElementById("demo");btn.addEventListener("click", myFunction);function myFunction() {alert(Math.random());btn.removeEventListener("click", myFunction);}
</script>
```

系统学习——JavaScript相关推荐

如何系统的学习javaScript?赶紧看看吧
当今如果要开发现代网站或web应用(包括互联网创业),都要学会JavaScript.而面对泛滥的JavaScript在线学习资源,却是很难找到一份高效而实用的方法去学习这个"web时代的语言 ...
javascript 中文帮助文档_实战式方法学习JavaScript（1）
案例1:表格行悬停提示效果 [参考文献] 1.JavaScript前端开发模块化教材(人民邮电出版社)赵健保 2.https://www.w3cschool.cn/ 任务导入: 在Web标准中,HTM ...
前端系统学习篇之HTML
前言该分类目的是系统学习前端知识做的笔记,HTML5+CSS3+JavaScript+Jquery+vue+前端工程化等等,使自己成为一个全栈工程师,学完水平能达初级前端开发工程师以上. HTML简 ...
零基础的同学看过来,如何系统学习前端，保证让你不亏
软件开发工程师在行业外大众的眼里, 或许是一个出众的职业,收入不低, 技术含量还挺高,就连我自己刚入行时也是这么认为的,但事实上并不确切.任何行业中,只要是在金字塔顶端的那部分,都是令人羡慕的,然而, ...
如何系统性的学习 Javascript？
相信很多想学好JavaScript的朋友都是冲着前端开发这门技术,这个岗位来的吧.作为前端开发的三大基础,就是html,css,JavaScript.很多人不明白为什么要深入的学习JavaScript ...
零基础怎么系统学习大数据？
大数据技术是指从各种各样类型的巨量数据中,快速获得有价值信息的技术.解决大数据问题的核心是大数据技术.零基础怎么系统学习大数据?首先我们先了解一下什么是大数据. 推荐下小编的大数据学习群:251956 ...
重读《学习JavaScript数据结构与算法-第三版》- 第6章链表（一）
定场诗伤情最是晚凉天,憔悴厮人不堪言: 邀酒摧肠三杯醉.寻香惊梦五更寒. 钗头凤斜卿有泪,荼蘼花了我无缘: 小楼寂寞新雨月.也难如钩也难圆. 前言本章为重读<学习JavaScript数据结构 ...
java后端系统学习总结 03_java Web基础学习
猿猿正在系统的学习一些计算机知识,和后端技术栈,目前阶段主要在系统学习java.此专栏,为我学习过程中的学习笔记,便于日后复习回顾来看,也很适合新人学习参考呦. 以下是猿猿对JavaWeb的第一遍学习 ...
Vue.js实战之系统学习第一节
为什么叫系统学习呢?因为我以前接触过Vue.js,但是没学过它的原理,只是简单的使用了,使用的时候就觉得很好用,没有其他的什么感觉,但当我进入职场后,学习了很多的前端技术后,才发现这个技术的友好,被它 ...

系统学习——JavaScript