JS入门思维导图模板_ProcessOn思维导图、流程图

js对象

Array

定义

var 变量名 = new Array(元素列表);//方式一<br>

var 变量名 = [元素列表];//方式二

访问

arr[索引] = 值;

属性

length

设置或返回数组中元素的数量

方法

forEach()

遍历数组中的每个有值的元素，并调用一次传入的函数

push()

将新元素添加到数组的末尾，并返回新的长度

splice()

从数组中删除元素

箭头函数(ES6)

是用来简化函数定义语法的。具体形式为：(...) => {...}

 arr.forEach((e) => {<br>       console.log(e);<br>   })<br>

String

创建对象

var 变量名 = new String("...");//方式一

属性

length

字符串的长度

方法

charAt()

返回在指定位置的字符

indexOf()

检索字符串

trim()

去除字符串两边的空格

substring()

提取字符串中两个指定的索引号之间的字符(含头不含尾)

JSON

JS自定义对象

var 对象名 = {<br>    属性名1: 属性值1,<br>    属性名2: 属性值2,<br>    属性名3: 属性值3,<br>    函数名称: function(形参列表){}<br>};

自定义对象的调用格式

对象名.属性名;<br>对象名.函数名();

定义

var 变量名 = '{"key1": value1,"key2": value2}';

JSON字符串转为JS对象

var jsObject = JSON.parse(userStr);

JS对象转为JSON字符串

var jsonStr = JSON.stringify(jsObject);

value的数据类型

数字（整数或浮点数）

字符串（在双引号中）

逻辑值（true 或 false）

数组（在方括号中）

对象（在花括号中）

null

BOM(浏览器对象模型)

组成

Window：浏览器窗口对象

Navigator：浏览器对象

Screen：屏幕对象

History：历史记录对象

Location：地址对象

Window

获取：

直接使用window，其中 window. 可以省略

window.alert("Hello Window");<br>alert("Hello Window");

属性：

history

location

navigator

方法：

alert()

显示带有一段消息和一个确认按钮的警告框

confirm()

显示带有一段消息以及确认按钮和取消按钮的对话框

setInterval()

按照指定的周期（以毫秒计）来调用函数或计算表达式

setTimeout()

在指定的毫秒数后调用函数或计算表达式

location

获取：

使用 window.location 获取，其中 window. 可以省略

window.location.属性;<br>location.属性;

属性：

href：设置或返回完整的URL

location.href = "https://www.itcast.cn";

DOM(文档对象模型)

定义了访问HTML和XML文档的标准

Core DOM - 所有文档类型的标准模型

Document：整个文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

Comment：注释对象

XML DOM - XML 文档的标准模型

HTML DOM - HTML 文档的标准模型

Image：<img>

Button：<input type = 'button'>

获取Element元素对象

根据id属性值获取，返回单个Element对象

var h1 = document.getElementById('h1');

根据标签名获取，返回Element对象数组

var divs = document.getElementsByTagName('div');

根据name属性值获取，返回Element对象数组

var hobbys = document.getElementsByName('hobby');

根据class属性值获取，返回Element对象数组

var clss = document.getElementsByClassName('cls');

js引入方式

内部脚本

将JS代码定义在HTML页面中

外部脚本

将JS代码定义在外部JS文件中，然后引入到HTML页面中

js函数

通过 function 关键字进行定义

function functionName(参数1,参数2...){<br> //要执行的代码<br>}

var funcitonName = function(参数1,参数2...){<br>    //要执行的代码<br>}

注意

形式参数不需要类型，因为JavaScript是弱类型语言

返回值也不需要定义类型，可以在函数内部直接使用return返回即可

JS中，函数调用可以传递任意个数的参数

js基础语法

书写语法

大部分同Java相同，结尾分号可有可无

输出语句

使用 window.alert() 写入警告框

使用document.write()写入 HTML 输出

使用 console.log 写入浏览器控制台

变量

使用 var 关键字声明变量

遵守规则：

组成字符可以是任何字母、数字、下划线（_）或美元符号（$）

数字不能开头

建议使用驼峰命名

注意：

ECMAScript 6 新增了 let 关键字来定义变量。它的用法类似于 var，但是所声明的变了，只在 let 关键字所在的代码块内有效，且不允许重复声明

ECMAScript 6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变

数据类型

原始类型

number

string

boolean

null

undefined

引用类型

注意：

使用运算符 typeof 可以获取数据类型

运算符

算术运算符

+，-，*，/，%，++，--

赋值运算符

=，+=，-=，*=，/=，%=

比较运算符

>，<，>=，<=，!=，==，===

注意：==会进行类型转换，===不会进行类型转换

逻辑运算符

&&，||，！

三元运算符

条件表达式？true_value : false_value<br>

流程控制语句

if...else if...else

switch

for

while

do...while

语法与java类似，详情参考官方文档：https://www.w3school.com.cn/js/js_statements.asp

js事件监听

事件绑定

方式一：通过 HTML 标签中的事件属性进行绑定

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

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

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

常见事件

onclick

鼠标单击事件

onblur

元素失去焦点

onfocus

元素获得焦点

onload

某个页面或图像

onsubmit

当表单提交时触发该事件

onkeydown

某个键盘的键被按下

onmouseover

鼠标被移到某元素之上

onmouseout

鼠标从某元素移开

1- js引入方式<br>2- js基础语法<br>3- js函数<br>4- js对象<br>5- js事件监听<br>