【JavaScript】巧用思维导图来轻松学习JavaScript

2020/10/13 16:29
阅读数 35

前面更新了h5的相关知识,接下来学习js,根据上面的学习可以知道js属于高级语言,而js就是来规范行为的。

首先,我们用思维导图来看一下学完这篇JavaScript你会学到什么?
在这里插入图片描述

js的历史由来

js:是运行在客户端的脚本语言。

是由布莱登*艾奇(现在还存在)——用了10天的时间研发出的——研发出来的时候,为livescript在网景公司——由于sun公司收购后(当时sun公司比较流行的语言就是java)所以,更名为JavaScript。
由以上的由来你就可以知道,javascript与Java之间没有任何联系,只是简单的蹭了一个热度。
而JavaScript的组成,分为三部分。1,ECMAscript 2,DOM(页面文档)3,BOM(浏览器)

js书写的位置

在这里插入图片描述

1,行内
当写少量的代码的时候,这时候我们可以写在行内。
例如:

<input type="button" value="点我" onclick="alert('X')>//当点击这个按钮的时候,弹窗会弹出X这个值

注:
1,单行或者少量的代码写在HTML的body中,一定要以on开头。
2,关于引号的问题,在书写习惯的时候,写HTML的内容,我们用双引号,写js的内容的时候,我们用单引号。

2,内嵌

写js的相关代码的时候,可以直接写在head里面,但是在写多行的js的代码的时候一定要用script包裹起来。

<script ">alert('X')</script>

3,外部
可以新建一个文件夹用来写js的相关内容,然后再引进来。

<script src="my.js"></script>//中间不能写代码

js的基本语句

alert(msg)     //浏览器弹出小方框
console.log(msg) //  控制台打印出信息
prompt('info'//浏览器弹出输入框,用户输入信息

例如:

alert('Hello world')

显示为:
在这里插入图片描述

prompt('请输入你的名字')

显示为:
在这里插入图片描述

js的变量以及变量命名规范

注:
1,变量(定义):用于存储数据的容器。
2,首先要声明变量的类型其次在进行赋值。
3,更新变量:当更新变量的时候,以最后一次为准。
4,当声明多个变量的时候,中间使用逗号进行隔开,以分号结尾。



1,只声明不赋值         显示为:undefined
2,不声明不赋值直接用     显示为:报错
3,只赋值不声明          显示为:可以使用但不建议,不符合常用规范

变量命名规范:
1,由字母,数字,下划线以及美元$符号组成
2,严格区分大小写。小写和大写是完全不同的
3,不能以数字开头,不能是关键字以及保留字
4,变量名要有意义,遵守驼峰命名。



驼峰命名:

myFristname(属于驼峰命名法,第一个字母小写第二个字母开始大写)

数据类型 (面试)

数据类型的定义:根据数据占不同的储存空间,所以把数据划分不同的类型。
js的变量数据类型是只有程序在运行的过程中,由等号右边的值所确定的。
即:变量的数据类型是由js引擎根据等号右边的变量值的数据类型进行判断。

数据类型的分类:
在这里插入图片描述

1,简单:

number类型 、string类型(字符串类型)、Boolean类型、undefined类型、NUll(空类型)

2,复杂

object类型

注:数据类型是入门的常识一定一定要知道!而且面试也会考!!!

表现形式

Number类型       数字类型                    默认值:0
Boolean类型      布尔类型 值为true或者false   默认值:false
String类型       字符串类型,必须带上引号      默认值:""
undefined        声明变量无值               默认值:undefined
Null          声明 var a = Null,声明a为空值   默认值:null

Number 类型

1,number类型

主要分为二进制,八进制 ,十进制 ,十六进制

举例:

八进制 : 0 - 7之间,一般数字前面加0表示八进制

十六进制 :数字0 - 9,字母a - f 之间,比如:#ffffff 表示的是白色,一般数字前面加0X表示十六进制

2,数字范围(了解)

最大:alert(Number.Max_VALUE)//1.709769e + 308
最小:alert(Number.Min_VALUE)// 5e -324

3 ,特殊值(了解 NaN是一个重点)

1,infinity:无穷大

alert(Infinity)

2,负的 infinity 就为无穷小

3,NaN 意思就是 not a Number 代表非数值

例如:

当我们利用prompt让用户传输一个数字的时候,传进来就是一个字符串的形式,没有转换为数字,直接参与运算,返回的值就为NaN

注:

isNaN ( X ) 判断数字:

x为非数字,返回的值是:true
x为数字,返回的值是:false

String类型

String类型表示形式为字符串类型,一般字符串的表现形式为 : 进行加单引号或者双引号

1 , 字符串转义符:转义符以 \ 开头:

\ n : 换行      \ " : 双引号    \ \ :斜杠 \    \ t : 缩进   \ b :空格

2,字符串的引号嵌套:外双内单 或者 外单内双

3,字符串的长度 :使用length来获取字符串的长度

var str = 'my name is andy';
console.log( str.length) // 15

4,字符串的拼接

字符串 + 任何类型 = 拼接后的新字符串
注:
1, 结果一定为字符串类型
2, 数值相加,字符相连


var age = 19 ;
console.log('我今年已经'+ 19 +'岁了');//属于字符串类型,符号可巧记为 :引引加加

undefined 类型

举例:

var str = undefined;
console.log(str + 'pink')//undefinedpink

Null 类型

举例:

var str = Null;
console.log( str + 'pink')//Nullpink

使用typeof检测数据类型

举例:

var num = 10;
console.log( typeof num);//number类型

类型转换

转为字符串
1,变量.toString()

1,变量.toString()   
var num = 10;
alert(num.toString())

2,String变量

var num = 1;
alert(String(num));

3,加号拼接:数字加一个字符串等于一个字符串

var num = 1;
alert(num + '字符串');

转换成数字型
1,parseInt(String)函数

parselnt('18');//转换成整形

2,parseFloat(string)函数

parseFloat('78.21')//转换成浮点型

3,Number(’ ')强制转换

Number('12');

注:
parseInt(’ 120px’) 结果为120 会去掉px, parsefloat类似。
rem(‘120px’) 结果为NAN

4,利用算法运算加 减 乘以及除实现隐式转换
比如:

console.log('12'-0);//双引号的12为字符串类型,当减去零的时候,字符串转换成数字类型,结果为12

4,转换为布尔类型

方式:Boolean( ) 函数

注:
1,当出现 0 、NAN、null、undefind以及空时,出现的值都是false.
2,其余的值为true.

标识符

标识符:开发人员为变量起的名字
关键字:js本身以及使用的名字,不能充当为变量名
保留字:未来可能成为关键字

算数运算符:加、减、乘和除
前置递增运算符

运算符

++num类似于num = num + 1
先加1在参与运算

后置递增运算符

num++类似于 num = num + 1
先参与运算后加1

关于等于

一个等于:是进行赋值;
两个等于:判断两边的值是否相等
三个等于:判断两边的值和类型是否完全相等

逻辑运算符

&&:and的作用
||:or的作用
!:not的作用

赋值运算符

= :直接赋值
+=-=:加减一个数后再进行赋值
*=/=%=:乘除取模后再进行复制

循环

if else循环

if(条件表达式){
   
   
语句1
}
else if(条件表达式){
   
   
语句2
}

三元表达式

条件表达式 ? 表达式 1 :表达式 2
执行思路:
1,当条件表达式为真,则返回到表达式1的值
2,当条件表达式为假,则返回到表达式2的值

倒计时准备——小热身

用户输入数字,若num<10,则前面补0则不补0

var time = prompt("请输入一个0-59之间的数字");
time < 10'0' + time : time

switch语句

switch(表达式){
   
   
case value1:执行语句1break;
case value2:执行语句1break;
case value3:执行语句1break;
case value4:执行语句1break;

...

default;
执行最后的语句;

}

小面试(switch 与if else if语句的区别)
1, switch:确定某个值的情况,if else确定于某个范围
2,条件判断后直接执行到某一个语句,效率比较高,而if else需要经过多次判断
3,一般情况下,可以互相转换


for循环

for(初始变量;条件表达式1;操作表达式){
   
   

}

小面试:
continue与break的区别:
continue:跳出本次循环,继续执行下一次循环
break:立即跳出整个循环


数组

定义数组以及获取数组

var arr = [ ]//定义数组
数组名[索引号]//获取数组里的数

遍历

1,使用for循环来进行遍历数组的元素
2,for循环里面的i表示的是计算器的索引号
3,通过length来获取数组里面的元素,如arr.length

举例:把元素里面的所有数都进行遍历了一遍

var arr = ['red','green','blue'];
for (var i = 0;i < arr.length ; i++{
   
   
console.log(arr[i]);
}

小面试:
如何在数组中增加元素?
通过1,通过修改length的长度;
原因:
1,通过length长度实现数组扩容的目的;
2,length属性有可读写
通过2,索引号增加数组元素;





建议(关于学习数组需要练习的习题的经典例题):
1,利用数组求最大值
2,筛选数组
3,翻转数组
4,冒泡数组



函数

函数就是封装一段可以被重复的代码块

1,声明函数

function 函数名( 形参1,形参2{
   
   
//函数体
}
函数名(实参1,实参2

注:
1,function声明函数的关键字,全部小写
2,函数是做某件事情,函数名一般是动词
3,函数不调用自己不执行


调用函数

函数名();//调用函数的时候一定要加小括号

举例:

function cook(aru){
   
   
console.log(aru);
}
cook('Hello word')//实参的值hello word传到形参,之后在进行执行下去

函数的返回值return

function 函数名(){
   
   
return 需要返回的结果;
}
函数名();

只要函数遇到return就把后面的结果返回到函数的调用者,在实际开发过程中,经常用一个变量来接受函数的返回结果。

函数有return,则返回到return后面的值;
函数没有return,则返回到undefined;

小面试:
break、continue以及return的区别:
1,break:结束当前的循环(比如for循环)
2,continue:结束本次循环,继续执行下一个循环
3,return:不仅可以退出循环,还能够返回到值,同时还结束当前的函数体



argument的使用

在js当中,每一个函数都有一个内置的函数对象,所有函数都有一个内置的argument对象,argument对象中存储了传递的所有实参

function fn(){
   
   
console.log(arguments);
}
fn(1,2,3)

其中,fn是以一个伪数组的形式存储,即

argument(3

argument具有的属性:
1,具有数组的length的属性;
2,按照索引的方式进行存储;
3,没有真正的数组的方法


作用域

变量的作用域根据全局作用域主要分为全局变量以及局部变量(局部变量只能在函数内部进行使用)

全局变量:只有浏览器关闭的时候才会销毁,比较占内存资源。
局部变量:当我们程序执行完毕就会销毁,比较节约内存资源

作用域链

当内部函数访问外部函数的变量,采取的是链式查找方式,决定选取那一个值,采取就近原则

举例:

var num = 10;
function fn(){
   
   
var num = 20;
}
function fun(){
   
   
console.log(num);//查找上一层是否有num,有num即为20
}
}

预解析

由于js代码是由浏览器中的js解析器来执行,js解析器主要分为预解析以及代码执行

预解析:js引擎会把js里面的所有的var还有function提升到当前作用域的最前面
代码执行:依次从上往下进行执行。

完结

个人总喜欢一首歌为追光者,听这首歌,总能让我有种坚持下去的♥♥♥♥
如果说,你是海上的烟火,我是浪花的泡沫。某一刻,你的光照亮了我

关于我:

好物分享:
html5 看这一篇就够了!!!!.
零基础入门前端《一》.
零基础入门前端《二》.
零基础入门前端《三》.



我是凉心姑娘,欢迎来我的博客!你的一个赞👍,是我写下去的动力!

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部