JavaScript 思维导图模板_ProcessOn思维导图、流程图

js初体验

行内书写

写在标签内

例：<button onclick="alert('js学习')">按钮</button>

内嵌

写在script双标签中

例：<script>
alert('该学习了')
</script>

外部

单独创建一个后缀名为js的文件
使用script的src属性进行引用

例：//外部 JavaScript.js
alert('认真学js')
//内部 JavaScript.html
<script src="../js/JavaScript.js"></script>

输出语句

alert

浏览器自带弹窗，有确认按钮页面显示的内容就是写在小括号里面的内容（有阻断代码的效果）

例：alert('该学习了')

prompt

弹窗，有输入框有确认取消按钮页面上显示的内容就是写在小括号里面的内容（有阻断代码的效果）

例：prompt('请输入你的年龄')

console.log

打印语句，在控制台查看用于给前端程序员做提示

例：console.log('123');

注意

script双标签内部如果有js代码就不能使用src属性引用外部的js
（内部js和外部js不可以出现在同一个script双标签上）

行内js可读性差、可维护性差

使用内部js时，尽量写在结构的后面，防止js代码拿不到html结构的情况

alert和prompt都有阻断代码的效果，后面的代码都不会执行

console.log——程序员使用alert和prompt：用来给用户做提示

变量

一个容器

用来存储数据的容器

本质：在内存中申请一块空地用来存放数据

变量的声明

通过var关键字来声明一个变量

语法：var 变量名=变量值

例：// 存储a的值为1000
        var a = 1000
        // 输入a
        console.log(a);

通过var关键字来声明多个变量

一次性声明多个变量并且分开赋值

语法：var 变量名1，变量名2，变量名3；
  变量名1=值，
  变量名2=值，
  变量名3=值，

例：var a,b,c;
        a=1;
        b=2;
        c=3;
        console.log(a);
        console.log(b);
        console.log(c);

一次性声明多个变量并赋值

语法：var 变量名1=值1，变量名2=值2；

例：var a=10,a2=20,a3=30;
        console.log(a);
        console.log(a2);
        console.log(a3);

变量命名的规范：

由字母数字下划线（_） $组成

不能以数字开头（字母下划线 $）

有语义化

使用驼峰命名

get Element By Id---小驼峰（第一个首字母小写，后面的首字母大写）

Get Element By Id---大驼峰（所有首字母大写）

不能使用关键字或者保留字命名（var class=123 var var=123）

操作元素

操作元素的内容

语法1

获取元素

元素.innerHTML

修改元素

元素.innerHTML=新的内容

语法2

获取元素

元素.innerText

修改元素

元素.innerText='新的内容'

innerHTML和innerText的区别

innerHTML:可以识别标签

innerText：不能识别标签，将标签当作内容一起渲染

解决覆盖问题

例：// 1.获取标签
        var box = document.getElementById('box')
        // box.innerHTML = '新内容'
        // 解决覆盖问题
        box.innerHTML+='新内容'

操作属性

原有属性

标签自带的一些属性

获取属性

语法：元素.属性名

修改属性

语法：元素.属性名=新的属性值

非原有属性

程序员自己添加上的属性

获取属性

语法：元素.getAttribute('属性名')

修改属性

语法：元素.setAttribute('属性名'，'属性值')

操作样式

只能获取行内样式

获取样式：元素.style.样式名

例：<div id="box" style="background-color:red ;"></div>
    <script>
        var box=document.getElementById('box')
        // 获取样式
        console.log(box.style.backgroundColor);
        </script>

修改样式：元素.style.样式名=样式值

例：<div id="box" style="background-color:red ;"></div>
    <script>
        var box=document.getElementById('box')
        // 修改样式
        box.style.backgroundColor='green'
     </script>

修改多个样式：批量修改

语法：元素.style.cssText='样式值'

例：<style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
    <div id="box" style="background-color:red ;"></div>
     <script>
        var box = document.getElementById('box')'
        // 修改多个样式
        box.style.cssText = 'width:200px;height:200px;background:green'
    </script>

通过属性（class）的方式修改样式tongg

例：box.className = 'box'

解决类名覆盖问题

1.box.className += ' box'
2.box.className ='div box'
3.清空类：box.className=''

扩展操作类

添加类

语法：元素.classList.add()

例：box.classList.add('box')

移除一个类

语法：元素.classList.remove()

例：box.classList.remove('div')

事件

事件的分类

三要素

事件源——触发事件的元素

事件类型——通过什么方式触发的

事件处理函数——当事件触发之后要做什么事情

事件绑定的语句

元素（事件源）.事件名（事件类型）=事件处理函数（当事件触发之后要做什么事情）

常用事件

单击事件

box.onclick = function () {
}

双击事件

box.ondblclick = function (){
}

离开事件

box.ondblclick = function (){
}

按下事件

box.onmousedown = function () {
}

抬起事件

box.onmouseup = function () {
}

经过事件

box.onmouseenter = function () {
}

移动事件

box.onmousemove = function () {
}

右击事件

box.oncontextmenu = function () {
}

单表签操作内容

语法:input.value

修改内容:input.value=‘新的值’

数据类型

Number——数值型

数值型（Number）——数字、小数、NaN

String——字符串类型

字符串类型（String）——使用引号引起来的都是字符串

Boolean——布尔类型

布尔类型（Boolean）——true（对）、false（错）

undefined和null——空

null——空
undefined——没定义或者未赋值

typeof——用来检测数据类型

语法1：typeof(变量名)

例：<script>
        var a =10
        console.log(typeof(a));//namber
    </script>

语法2：typeof 变量名

例：<script>
        var a =10
        console.log(typeof a);//namber
    </script>

数据类型

Number——数值型

数字小数（浮点数） NaN

var a = 10 //var a =0.1 //NaN console.log(typeof a);//数值型

var a=Infinity //无穷大 console.log(typeof a );//number var a=-Infinity //无穷小 console.log(typeof a );//number

NaN——not a number 不是一个数字（但归为数值型）

和谁都不相等，包括自己

当一些非法运算的时候返回值就是NaN

NaN和其他的数据进行操作返回值也是NaN

isNaN——是不是不是一个数？

语法：isNaN(变量名)

var a=10 console.log(isNaN(a));//false 不对，他是一个数

true：不是一个数

false：是一个数

关于浮点数：

会出现小数点精确度偏差的问题

小数计算时可以转化为整数进行计算

var a=0.1
var b=0.2
console.log(a+b);//0.30000000004
console.log(a*100+b*100==0.3*100);

String——字符串类型

使用引号引起来的都是字符串类型，有长度有下标可读不可写

var str='123'
console.log(typeof str);//string
var str='a'
console.log(typeof str);//string
var str1='NaN'
console.log(typeof str1);//string4

字符串的长度

语法：变量名.length

返回值是字符串的长度

var str ='123456789' console.log(str.length);//字符串长度 9

字符串的下标——可以通过下标来获取字符串中的字符

语法：字符串[下标]

var str ='abc'
        //第一种方式
        console.log(str[0]);//a
        //第二种方式
        console.log(str.charAt(2));//c

获取码值

语法：字符串.charCodeAt()

数字0-9：48-57 大写字母A-Z：65-90 小写字母a-z：97-122 console.log('A'.charAt());//65

字符串的拼接：

语法：字符串+其他数据=字符串类型

var a='100' var b=true var c =a+b console.log(c);//100true console.log(typeof c);//string console.log(100+'10');//10010 string

Boolean——布尔类型

只有两种结果：true false

var a=true var b=false var str=string console.log(typeof a);//boolean console.log(typeof b);//boolean console.log(typeof str);//报错

参与运算时自动转换 true—1 false—0

//1+x=2 2-1=x x=1 console.log(1+true); // 1-x=1 1-1=x x=0 console.log(1-false);

undefined和null——空

undefined--声明了一个变量但是没有赋值

null--没有值

=个数的区别

=：赋值

==：判断数值是否相等

===：严格判断即判断数值是否相等也判断数据类型是否相等

复杂的数据类型

对象——object

一个具体的事物都是一个对象，万物皆对象

以花括号（{}）包裹的，内部是以键值对的形式存在的的数据叫做对象

键值对：键名（key）：键值（value）

对象中存在属性名和属性值，有方法，可以存储任何的数据类型

对象：名词

属性：形容词--用来描述对象张什么样子

方法：动词--这个对象可以做什么

声明一个对象

1.var字面量的方式去声明一个对象

语法：var 对象名={ 属性名：属性值 }

var obj ={ name:'张三', age:30 } console.log(obj);

new关键字的方式

语法：var 对象名=new Object（写属性，方法）

var obj=new Object({ name:'李四'， age:'10', eat:function(){ console.log('吃饱了'); } }) console.log(obj)

使用对象

获取值

语法：对象名.属性名

var obj=new Object({ name:'李四', age:'10', eat:function(){ console.log('吃饱了'); } }) console.log(obj.name);

修改属性

语法：对象.属性名=’新的属性值‘

var obj=new Object({ name:'李四', age:'10', eat:function(){ console.log('吃饱了'); } }) obj.name='王五' console.log(obj.name); console.log(obj);

添加属性

语法：对象名.新的属性名='新的的属性值'

var obj=new Object({ name:'李四', age:'10', eat:function(){ console.log('吃饱了'); } }) obj.sex='女' console.log(obj);

使用方法

语法：对象名.方法名（）

var obj = new Object({ name: '李四', age: '10', eat: function () { console.log('吃饱了'); } }) obj.eat()

注意点：

方法是以函数的形式存在的--方法中的函数都是匿名函数

属性和方法或者和属性之间以逗号隔开，属性名和属性值之间是以（：）的形式存在

当一个变量要作为属性名放到一个对象中时，需要使用中括号的形式

函数——function

函数是一个可以重复使用的代码块，函数可以实现代码的复用

声明函数

1.使用var

语法：var 函数名=function() {代码块}

var fun=function(){ console.log(1); }

函数声明不会执行，只有当调用的时候才会执行，不调用不执行

2.使用function

语法：function 函数名（） {代码块}

function fun(){ console.log('函数'); }

关于函数的调用

语法：函数名（

function fun(){ console.log('函数'); } fun()//函数

函数作用域

函数的花括号是一个单独的作用域，在内部声明的变量在外部无法使用

function fun(){ var a=10 } console.log(a);//报错 fun()//函数

函数调用几次就执行几次，使用function声明的函数可以在声明之前调用

数组

以中括号包裹（[]）,可以存放任何的数据，是一个无序的集合，有长度有下标的数据类型，可读可写

数组的声明

使用关键字var

语法：var 数组名=[数据，数据]

var arr=[1,3,4,[1,2,3],{name:'zhangsaan'},'abc','中文']

使用new

语法：var 数组名=new Array（数据）

var arr1=new Array(1,4,6,7) console.log(arr1);

获取数组的长度

语法：数组名.length

var arr1=new Array(1,4,6,7) console.log(arr1); console.log(arr1.length);//4

获取数组中的某一元素

语法：数组名[下标]

var arr=[1,3,4,[1,2,3],{name:'zhangsaan'},'abc','中文'] console.log(arr [1]);

数据类型的转换

转换成数值型--Number（）

只能转换纯数字的字符串

语法：Number（数据）

var a ='10' var b=Number(a) console.log(b);//10 console.log(typeof b);//number

parselnt---转化成数值型

能转换的就转换，遇到不能转换的就放弃转换即使后面有能转换的也不转换了，直接返回已经转换的，如果开始就不能转换直接返回NaN，不可以转化小数

var a ='10a' var b=Number(a) console.log(b);//NaN console.log(typeof b);//number

语法：parseInt （数据）

var a ='10' var b=parseInt(a) console.log(b);//10

var a ='10.9' var b=parseInt(a) console.log(b);//10

parseFloat--转化成数值型

能转换的就转换，遇到不能转换的就放弃转换即使后面有能转换的也不转换了，直接返回已经转换的，如果开始就不能转换直接返回NaN

语法：parseFIoat （数据）

var a='10.9' var b=parseFloat(a) console.log(b);//10.9

.toFixed（保留的小数位数，默认取整数

var a='10.90000000123213' var b=parseFloat(a).toFixed(2)//保留小数点后几位，默认取整数 console.log(b);//10.90

区别：

Number（）只能转换纯数字的字符串，可以转换布尔值、null，但是parselnt、parseFloat不可以转换

console.log(Number(true));//1 console.log(Number(false));//1 console.log(Number(null));//0 console.log(Number(undefined));//NaN console.log(parseInt(true));//NaN

parselnt只能转化成整数

parseFloat可以转化小数可以通过tofexed（）控制小数位数

转换成布尔类型

语法：Boolean（数据

console.log(Boolean(1));//true console.log(Boolean(0));//false console.log(Boolean ('10'));//true console.log(Boolean (100));//true console.log(Boolean (-100));//true

转化成false的情况

console.log(Boolean (0));//false console.log(Boolean (''));//false console.log(Boolean (null));//false console.log(Boolean (undefined));//false console.log(Boolean (false));//false console.log(Boolean (NaN));//false

转化成字符串类型

String（）--转成字符串

语法：String（数据）

console.log(typeof String(true));//string console.log(String(100));//100 console.log(String(null));//null console.log(String(undefined));//undefined

toString--转成字符串

语法：数据.toString()

var str=true var a=str.toString() console.log(a);//true console.log(typeof a);//string

var str=null var a=str.toString() console.log(a);//报错 var str=undefined var a=str.toString() console.log(a);//报错

区别：

String可以转化null undefined 但是同toString ()不能转换null undefined 语法上也存在区别

关于==的隐士转换

如果等号两边都是布尔值，调用Number（）-->number类型

一方是Number 一方是string 会将string类型调用Numer（）-->number类型

一方是Boolean 一方是string 将string调用Boolean（）--boolean类型

一方是Number 一方是Object 将object--调用的是ValueOf（）--number类型

一般隐士转化调用的都是 Number（） Boolean（）toString（）

运算符

算数运算符

+加 -减 *乘 /除 %取余

用于执行两个变量之间的运算

+（加号、连接符）

如果两边都是字符串的情况下，就是进行字符串拼接

如果一般是字符串，一边是数值型类型，调用tostring方法将数值型转化成字符串，再进行拼接

加号两边都是字符串的话，调用Number（）方法，在进行加法运算

如果一方是对象，先调用tostring（）方法转成字符串，再进行计算

递增递减运算符

++递增 --递减

在变量自身进行+1（++递增）或者是-1（--递减）

前置递增和迁至递减：先自身进行增加或减少，再进行运算（++a --a）

后置递增和后置递减：先进行运算再自身进行加1或减1（a++ a--）

比较运算符

>大于 < 小于 >=大于等于 <=小于等于

== 双等相等运算符，在对两个操作数进行比较之前，会将两个操作数转换成相同的类型，比较相等返回true，不相等则返回false。
=== 三等不会对操作数进行类型转换，只有当值相等并且类型也是相等时才会返回 true，否则返回false。
> 大于只有当左操作数大于右操作数时才返回 true，否则返回false。
< 小于只有当左操作数小于右操作数时才返回 true，否则返回false。
>= 大于等于只有当左操作数大于或者等于右操作数时才返回 true，否则返回false。
<= 小于等于只有当左操作数小于或者等于右操作数时才返回 true，否则返回false。
！= 不相等只有当操作数不相等时才返回true，否则返回false。如果两个操作数不是同一类型，会将操作数转为同一类型再进行比较。
！== 不全等操作数不相等或不同类型时返回 true，否则返回false。不会将操作数转为同一类型再进行比较。

逻辑运算符

&&与（和） ||或者

进行布尔值运算，返回值是布尔值，经常用于多个条件的判断

&& 逻辑与（和并且）符号两边返回都是成立的（true），则返回true，有一方不成立（false），则是返回false
|| 逻辑或只要符号两边有一方成立，返回值就是true，符号两边都是不成立的才会是false
！非（取反）原来是对的却反就变成错的 true--》false

赋值运算符

= += -=

= 等于赋值
+= 加等于在原来的基础上进行相加
- 减等于在原来的基础的进行相减
*= 乘等于在原来的基础上乘等于

运算符的优先级

小括号（） 1
一元运算符 ++ -- ！ 2
算术运算符 +-*/ 3
关系运算符 >< >= <= 4
相等运算符 == === ！= ！== 5
逻辑运算符 && || 先与后或 6
赋值运算符 = += 7
逗号， 8

获取元素

通过id的方式获取

语法：document.getElementById('div')

<div id="div">内容</div>
    <script>
        var div=document.getElementById('div')
    </script>

通过标签名的方式获取

语法：document.getElementsByTagName('div')

var div=document.getElementsByTagName('div') div[0].innerHTML='div'

通过类名获取

语法：document.getElementsByClassName('box')

var box = document.getElementsByClassName('box') box[0].innerHTML='华清远见' box[1].innerHTML='还不错'

H5新增的

获取第一个

语法：document.querySelector('div')

// 获取第一个 // var box=document.querySelector('div') // var box=document.querySelector('.box') var box=document.querySelector('#bos') console.log(box); //识别选择器 var box=document.querySelector('div ul li') console.log(box);

获取全部的标签

语法：document.querySelectorAll('div')

// 获取全部的标签 var box=document.querySelectorAll('div') console.log(box);

总结：

1.getElementById querySelector只会获取到一个元素，其他的都是伪数组

getElementById只可以通过id的方式获取，querySelector可以通过id class标签名选择器方式获取

2.getElementsByTagName，getElementsByClassName，querySelectorAll获取到的都是一个集合，伪数组，有长度有下标

- getElementsByTagName：通过标签名

- getElementsByClassName：通过类名的方式获取

- querySelectorAll id class 标签名选择器方式获取

3.H5新增是静态获取 id class 标签名动态获

//获取body
var body=document.body
//获取Html
var html = document.documentElement

流程控制

分支结构

单分支

if(条件){ //满足条件后执行代码 }

双分支

if(条件){ //满足条件后执行的代码 }else{ //不满足条件后执行的代码 }

多分支

if(条件){ //满足条件后执行的代码 }else if(条件){ //满足条件后执行的代码 }else if（）条件{ //满足条件后执行的代码 }else{ //以上条件都不满足执行的语句 }

switch

switch(条件){ case 字符: //满足条件后执行的代码 break;//跳出循环 default: //以上条件都不满足后执行的代码 break;//跳出循环 }

if语句和switch 的区别

if

基本if选择结构：处理单一或组合条件的情况

if-else选择结构：处理简单的条件分支情况

多重if选择结构：处理复杂的条件分支情况

嵌套if选择结构：用于较为复杂的流程控制

表达式的结果是boolean类型

常用于区间判断

switch

多重分支，并且条件判断是等值判断的情况

表达式类型不能是boolean类型，可以是byte,int,char,String,枚举。

常用于等值判断

三目运算

语法

条件？条件满足：条件不满足

例

var num =10
num>9?console.log('大于9'):console.log('小于9');

例：<div id="box">JavaScript</div>
<script>
// 1.获取标签
// 在文档中通过id的方式获取到元素
var box=document.getElementById('box')
console.log(box)
// 2.改变内容
// console.log(box.innerHTML);JavaScript 标签中的内容
// 改变标签中的内容
box.innerHTML='new js'
console.log(box.innerHTML);
</script>

var box = document.getElementById('box')
        //<h1>js</h1>
        box.innerText='<h1>js</h1>'
        // 可以识别标签
        box.innerHTML='<h1>js</h1>'
        console.log(box.innerText)

例：<div id="box" class="a1">123</div>
    <script>
        var box=document.getElementById('box')
        // 获取id的值
        console.log(box.id)
        // 获取class的值
        console.log(box.className)
// 修改原有属性
        box.className='a2'

例：<div id="box" class="div" a="22"></div>a
    <script>
        var box=document.getElementById('box')
         // 获取非原有属性
        console.log(box.getAttribute('a'));
// 修改非原有属性
        box.setAttribute('a','111')
         </script>

例：<div id="box"></div>

    <script>
        // 1.获取元素
        var box = document.getElementById('box')
        // 2.点击事件
        // 事件源——div
        // 事件类型——点击
        // 事件处理函数——让div显示“我被触发了”
        box.onclick = function () {
            box.innerHTML = "我被触发了"
        }

    </script>

//非法运算
var a='abc'*'qwe'
console.log(a);//NaN

//NaN和其他的数据进行操作返回值也是NaN
console.log(NaN+10);//NaN
console.log(NaN*'abc');//NaN

//和谁都不相等，包括自己也不相等
console.log(NaN == 0.1);
console.log(NaN == NaN);

var a='age'
        var obj={
            name:10,
        }
        obj[a]=20
        console.log(obj);//{name:10,age:20}