js 是什么

JavaScript，就是我们通常所说的JS。这是一种嵌入到HTML页面中的编程语言，由浏览器一边解释一边执行，js是一门高级解释性脚本语言。

组成

ECMAScript
DOM
- 文档对象模型
BOM
- 浏览器对象模型

在HTML中引入JavaScript

外部JavaScript

HTML代码和JavaScript代码单独放在不同的文件中，然后在HTML文档中使用“script标签”来引入JavaScript代码
```
<script src="js/index.js"></script>
```
内部JavaScript

把HTML代码和JavaScript代码放在同一个文件中。其中，JavaScript代码写在<script></script>标签对内。
元素事件JavaScript

指的是在元素的“事件属性”中直接编写JavaScript或调用函数。

调试

在浏览器控制台打印

console.log()

Sources 点击行号打断点

基础语法

常量与变量

变量由字母、下划线、$或数字组成，并且第一个字母必须是字母、下划线或$。变量不能是系统关键字和保留字。

 var a = 10;

常量用大写

数据类型

数据类型可以分为两种：一种是“基本数据类型”，另外一种是“引用数据类型”。其中，基本数据类型只有一个值，而引用数据类型可以含有多个值。

在JavaScript中，基本数据类型有5种：数字、字符串、布尔值、未定义值和空值。

未定义值用undefined表示。
凡是已经用var声明但没有赋值的变量，值都是undefined

运算符

常见的运算符有以下5种：算术运算符。赋值运算符。比较运算符。逻辑运算符。条件运算符。

表达式与语句

一个表达式包含“操作数”和“操作符”两部分。

类型转换

在JavaScript中，共有两种类型转换。隐式类型转换。显式类型转换。

“字符串”转换为“数字”

Number（　）
- Number（　）方法可以将任何“数字型字符串”转换为数字
parseInt（　）和 parseFloat（　）
- parseInt（　）和parseFloat（　）可以提取“首字母为数字的任意字符串”中的数字，其中parseInt（　）会提取整数部分，parseFloat（　）不仅会提取整数部分，还会提取小数部分。可以接受第1个字符是加号或减号，如果第1个字符是非数字，则直接返回NaN。

“数字”转换为“字符串”

将数字转换为字符串，也有两种方式。与空字符串相加。toString（　）。

如果数字和字符串相加，系统会将数字转换成字符串。如果要将一个数字转换为字符串，而又不增加多余的字符，我们可以将这个数字加上一个空字符串。
```
var b = a.toString()
```

转义字符

对于字符串的换行，有以下两种情况。

如果是在document.write（　）中换行，则应该用
如果是在alert（　）中换行，则应该用\n

注释

// 单行注释
/* 多行注释 */

流程控制

在JavaScript中，共有3种流程控制方式（其实任何计算机语言也只有这3种）。顺序结构。选择结构。循环结构

对于if语句，主要包含以下4个要点。

单向选择：if…
双向选择：if…else…
多向选择：if…else if…else…
if语句的嵌套。

switch语句
循环语句共有以下3种。

while语句
do…while语句
for语句

函数

funtion 函数名(){...return 返回值
}

在超链接中调用函数

<a href="javascript: 函数名"><a>

在事件中调用

对象

在JavaScript中，常用的内置对象有4种

字符串对象：String
数组对象：Array
日期对象：Date
数值对象：Math。

DOM

每一个元素就是一个节点，而每一个节点就是一个对象。也就是说，我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作（这句话对理解DOM操作非常重要）

DOM节点共有12种类型，但是常见的只有下面3种（其他的不需要掌握）

元素节点
属性节点
文本节点

在JavaScript中，我们可以通过以下6种方式来获取指定元素

getElementById（　）
getElementsByTagName（　）
getElementsByClassName（　）
querySelector（　）和 querySelectorAll（　）
getElementsByName（　）
document.title和document.body。

使用createElement（　）来创建一个元素节点，也可以使用createTextNode（　）来创建一个文本节点

创建元素

想要创建一个元素，需要以下4步。

① 创建元素节点：createElement（　）

② 创建文本节点：createTextNode（　）

③ 把文本节点插入元素节点：appendChild（　）

④ 把组装好的元素插入到已有元素中：appendChild（　）

插入元素

appendChild（　）把一个新元素插入到父元素的内部子元素的“末尾”。
insertBefore（　）将一个新元素插入到父元素中的某一个子元素“之前”。

appendChild（　）是在父元素的最后一个子元素之后插入，而insertBefore（　）是在父元素的任意一个子元素之前插入

删除元素

使用removeChild（　）方法来删除父元素下的某个子元素。

复制元素

使用cloneNode（　）方法来实现复制元素。

替换元素

使用replaceChild（　）方法来实现替换元素。

HTML属性操作（对象属性）

不管是用“对象属性”的方式，还是用“对象方法”的方式，都涉及以下2种操作

获取HTML属性值
设置HTML属性值

获取HTML属性值

obj.attr

obj是元素名，它是一个DOM对象。所谓的DOM对象，指的是使用getElementById（　）、getElementsByTagName（　）等方法获取的元素节点
attr是属性名，对于一个对象来说，可以通过点运算符（.）来获取它的属性值。

这是HTML属性值

obj.attr="值"

obj是元素名，它一个DOM对象，attr是属性名。

HTML属性操作（对象方法）

关于操作HTML元素的属性，JavaScript为我们提供了4种方法

getAttribute（　）获取元素某个属性的值。
setAttribute（　）设置元素某个属性的值。
removeAttribute（　）删除元素的某个属性。
hasAttribute（　）判断元素是否含有某个属性。会返回一个布尔值。如果包含该属性，会返回true；如果不包含该属性，会返回false。

CSS属性操作

getComputedStyle（　）方法来获取一个CSS属性的取值
设置一个CSS属性的值，有两种方式可以实现。style对象。cssText属性。

DOM遍历

DOM遍历，可以分为以下3种情况

查找父元素 parentNode
查找子元素 childNodes、firstChild、lastChild。children、firstElementChild、lastElementChild。
查找兄弟元素 previousSibling、nextSibling。previousElementSibling、nextElementSibling。

innerHTML和innerText

使用innerHTML属性很方便地获取和设置一个元素的“内部元素”
使用innerText属性获取和设置一个元素的“内部文本”。

事件

在JavaScript中，一个事件包含3部分

事件主角：是按钮？还是div元素？还是其他？
事件类型：是点击？还是移动？还是其他？
事件过程：这个事件都发生了些什么？

JavaScript常见的事件共有以下5种

鼠标事件
键盘事件
表单事件
编辑事件
页面事件

事件调用方式

在JavaScript中，调用事件的方式有两种

在script标签中调用

obj.事件名=function(){...
};

在元素中调用

直接在HTML属性中调用事件，这个属性又叫作“事件属性”。

鼠标事件

键盘事件

在JavaScript中，常用的键盘事件共有两种

键盘按下：onkeydown
键盘松开：onkeyup

onkeydown表示键盘按下一瞬间所触发的事件，而onkeyup表示键盘松开一瞬间所触发的事件。对于键盘来说，都是先有“按下”，才有“松开”，也就是说，onkeydown发生在onkeyup之前。

表单事件

在JavaScript中，常用的表单事件有3种

onfocus 和 onblur
- onfocus表示获取焦点时触发的事件，而onblur表示失去焦点时触发的事件，两者是相反的操作
onselect
- 当我们选中“单行文本框”或“多行文本框”中的内容时，就会触发onselect事件
onchange
- onchange事件常用于“具有多个选项的表单元素”的操作。
- 单选框选择某一项时触发。
- 复选框选择某一项时触发。
- 下拉列表选择某一项时触发。

除了上面这几个，还有一个onsubmit事件。onsubmit事件一般都会结合后端技术一起使用

编辑事件

常用的编辑事件有3种

oncopy 防止页面内容被复制
onselectstart 防止页面内容被选取
oncontextmenu 禁止使用鼠标右键

页面事件

常用的页面事件只有下面2个

onload 表示文档加载完成后再执行的一个事件
onbeforeunload 表示离开页面之前触发的一个事件

事件监听器

是使用addEventListener（　）方法为一个元素添加事件，我们又称之为“绑定事件”。

event对象

当一个事件发生的时候，这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是event对象。每一个事件，都有一个对应的event对象

this

哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。

window对象

在JavaScript中，一个浏览器窗口就是一个window对象（这句话很重要）

window对象及下面这些location、navigator等子对象，由于都是用于操作浏览器窗口的，所以我们又称之为“BOM”，也就是Browser Object Module（浏览器对象模型）

打开窗口

window.open(url, target)

window.open（　）可以直接简写为open（　），但是我们一般都习惯加上window前缀。window.open（　）的参数有很多，但是只有url和target这两个用得上。
url指的是新窗口的地址，如果url为空，则表示打开一个空白窗口。空白窗口很有用，我们可以使用document.write（　）往空白窗口输出文本，甚至输出一个HTML页面。
target表示打开方式，它的取值跟a标签中target属性的取值是一样的，常用取值有两个：_blank和_self。当target为“_blank（默认值）”时，表示在新窗口中打开；当target为“_self”时，表示在当前窗口中打开。

关闭窗口

window.close()

window.close（　）方法是没有参数的。

对话框

在JavaScript中，对话框有3种，都是window对象的方法

alert（　）
- 一般只用于提示文字
- 在alert（　）中实现文本换行，用的是\n。
confirm（　）
- 不仅提示文字，还提供确认。
prompt（　）
- 不仅会提示文字，还会返回一个字符串

定时器

上面说到的这些动画特效中，其实就用到了“定时器”。所谓的“定时器”，指的是每隔一段时间就执行一次代码。

在JavaScript中，对于定时器的实现，有以下两组方法。

setTimeout（　）和clearTimeout（　）
setInterval和clearInterval（　）

使用setTimeout（　）方法来“一次性”地调用函数，并且可以使用clearTimeout（　）来取消执行setTimeout（　）。

setTimeout(code, time);

参数code可以是一段代码，可以是一个函数，也可以是一个函数名。参数time是时间，单位为毫秒，表示要过多长时间才执行code中的代码。

使用setInterval（　）方法来“重复性”地调用函数，并且可以使用clearInterval（　）来取消执行setInterval（　）。

setInterval(code, timme);

location对象

操作当前窗口的URL

window.location.href

navigator对象

使用window对象下的子对象navigator来获取浏览器的类型。

window.navigator.userAgent

document对象

document对象其实是window对象下的一个子对象，它操作的是HTML文档里所有的内容

document 对象属性

document 对象方法

《从0到1：JavaScript快速上手》

Javascript 笔记基础（一）相关推荐

【JavaScript笔记 · 基础篇(五)】Array全家桶（引用数据类型中的数组 / Array对象 / Array.prototype）
文章目录一. 引用数据类型中的数组 1.1 概述 1.2 初始化 1.2.1 字面量 1.2.2 构造函数模式 1.3 访问 1.4 length属性 1.5 数组遍历 1.6 类数组对象 1.6. ...
JavaScript笔记基础知识总结2
本文主要概括总结javascript的Object 1.产生Object的方法: 第一种: 1 var obj = {name:"lishan",age:23,email:&quo ...
Google Map 开发笔记——基础篇(Javascript )
Google Map 开发笔记--基础篇说明: 一.使用入门: 1.在您需要显示地图的 html 页面嵌入这段 script 2.地图 DOM 元素 3.初始化地图二.地图画点.线.面 1.标记( ...
『JavaScript』基础笔记
1. JavaScript 初识 1.1 书写位置行内式 <input type="button" value="提交" onclick="a ...
JavaScript笔记整理
JavaScript笔记整理这段时间没有之前花在学习上的时间多了目前进度还停留在JavaScript和D3.js(这个目前只找到了教程) 主要原因是因为决定自己找单位实习,到了今天26号才有了眉目 ...
狂神Javascript笔记
学习狂神JavaScript所记录的笔记 Javascript笔记一.前端核心分析 1.1.概述 Soc原则:关注点分离原则 Vue 的核心库只关注视图层,方便与第三方库或既有项目整合. HTML ...
尚硅谷李立超JavaScript笔记
李立超老师JavaScript笔记目录 1.JS简介 2.JS的HelloWorld 3.JS代码编写的位置 4.JS的基本语法 5.字面量与变量 6.标识符 7.数据类型 8.强制类型转换 1. ...
JavaScript笔记（一）
JavaScript笔记(一) 1 JavaScript简介 JavaScript,就是我们通常所说的JS,是一种嵌入到HTML页面中的脚本语言,由浏览器一边解释一边执行. 我们在"HTML ...
JavaScript入门基础知识
JavaScript入门基础学习 1.三种引用JavaScript的方式 1.1行内式 <input type = "button" value="点我试试&quo ...

Javascript 笔记基础（一）