JS基础

Posted 2020-08-20 happyzwt

JS基础--万物皆对象

一、JS相关知识介绍
1.JS主要用途：轮播图、Tab栏（选项卡）、地图、表单验证
2.三层结构：W3C规范
（1）结构层 html 从语义化的角度，描述页面结构
（2）样式层 CSS 从审美的角度，美化页面
（3）行为层 javascript 从交互的角度，提升用户体验
3.JS的发展历史
布兰登.艾奇1995年在网景公司发明了Javascript，起初叫livescript，由于Java当时
非常火，就改名为Javascript。同时期还有其他的网页语言，如：VBscript、JScript等
后来都被Javascript所取代，因此现在的浏览器中只运行一种脚本语言--Javascript。

二、JS基础
1.js代码书写
（1）javascript中的注释
a.//:注释一行代码
b./* */：注释多行代码
(2)JS代码虽然对空格、换行、缩进不敏感，但是代码结束部分如果没有换行就必须加上分号
--建议：书写代码时既要换行又要加分号，有助于书写规范，可读性强
2.js常用语句
（1）弹框：页面上出现弹出框后，页面的位置不能改变，并且不能关闭。（此时浏览器的进程已经被暂停）
--在任务栏右击选择任务管理器，结束进程
（2）调试：console.log("");用来进行代码的调试
--在控制台里可以看到百度的招聘信息
--在页面上右键单击-->审查元素-->点击小红叉-->控制台-->点击链接-->到Sources里查看错误代码
（3）接收信息：prompt("");
--弹出一个输入框，给用户提供输入信息的位置
3.变量：用来存储数据的一块内存，内存是电脑的一个存储位置（断电以后会清空）
--直接量：直接拿来使用的量
（1）变量命名规则
a.只能由数字、英文字母、下划线以及$符号组成，并且数字不能
放在名称开头（如果是_123也可以，但是id、class的命名里不能这样）
b.变量的命名不能使用javascript中的关键字和保留字
--关键字：已经被javascript内部使用过的
--保留字：还未被javascript内部使用，备用
c.区分大小写
（2）变量类型:变量中存储的什么数据类型，变量就是什么类型
a.字符串--string
--常用的转译符：
\‘:单引号 \":双引号
\n:换行 \t:缩进
\b:空格 \r:回车 \\:斜杠
b.数值类型--number
+的作用：有字符串参与表示连接，全是数值类型表示运算符
typeof();判断数据类型
--NaN是number的一种，用于表示数值的一种不正常的状态，not a number即非数字
（判断当前的数据是否是NaN的关键字：isNaN）
c.boolean类型：取值 true、false
作用：用于判断条件的结果
d.undefined：声明了变量但没有赋值，在页面上不会报错
c.Null:空的对象
（3）Math对象
a.Math.pow(a,b)得到a的b次方
b.Math.round()四舍五入
c.Math.ceil()向上取整
d.Math.floor()向下取整
e.Math.random()生成一个>=0&<1的伪随机数
f.Math.max(x,y,z)返回最大值 Math.min(x,y,z)返回最小值
--方法：在调用时后面有括号
（4）运算
a.自增自减
--i++;(后置++，先运算再自+)，++i;（前置++，先自+再运算）
b.逻辑运算符：用来连接两个判断条件
--&&与 ||或 ！非
[注]逻辑运算符的优先级：!>&&>||
c.比较运算符
--==判断的仅仅是数据的内容，没有判断数据的类型
（注:boolean在内存中会将true转化成1，将false转化成0）
--===（判断是否全等）既会关心内容也会关心类型
（注：有一个比较特殊的数字NaN，它特殊到自己都不等于自己，包括== ===）
--!=不等于（比较的是内容，不关心类型）
--!==不全等（判断全等）
d.赋值运算符=
作用：将等号右边的结果赋值给等号左边（顺序是从右向左）
4.数据类型的转换
通过prompt("")输入数据的类型：不管在输入框中输入什么样的内容，浏览器都会把它当作string
【强制转换】
（1）转Number：
*Number("要转的内容")
a.如果转换的内容可以转成数字，就直接返回这个内容对应的数字；
b.如果不可以转换那么返回NaN；
c.如果内容中出现小数，保留小数；
d.如果内容为空，转换成0
*parseInt将内容转成Number
a.如果转换的内容可以转成数字，就直接返回这个内容对应的数字；
b.如果不可以转换那么返回NaN；
c.如果带有小数，会去掉小数，而不是四舍五入；
d.如果第一个字母是数字，则继续解析直至字符串解析完毕或者遇到一个非数字符号为止；
*parseFloat():转数字；
与parseInt一样，唯一区别是可以保留小数；
（2）转string
a.直接调用这个变量的.toString方法可以将内容转成字符串。（包装类）
b.直接将要转的内容放在String后的括号中，就可以将内容转成字符串。
第一个方法是直接调用这个变量对象中的方法，第二个就是直接使用强制转换的方法。
（3）boolean转换
Boolean();
--注意：除了false、0、""、NaN、Undefined在转换的时候转成false以外，其它的都会转成true（包括"false"）
【隐式转换】
不通过程序员去写固定的代码转，浏览器可以直接进行转换
（1）隐式转换成Number
直接在要转换的内容前加上“+”；
--var a="123";===>a==+a;
--var a="123";===>var b=a*2;===>246
（可以使用+、-、*、/、%都可以将字符串转成Number）
（2）隐式转成字符串
--var a=123;===>a=a+"";
（3）隐式转换成Boolean
--var a=123;===>a=!!a;
5.流程控制
（1）if_else结构
判断条件，执行相应的代码块
【注意】
a.else if后面必须要带条件，else if中的else if可以无数个，else可以不写
b.从上到下判断条件，只要找到满足条件的判断，就会执行对应得代码，其它代码不执行
c.所有条件都不满足则执行else中的代码
d.else if在存放结构的时候最好小范围的条件放在最前面
e.110>pj>100,连写110>pj&&pj>100
（2）代码调试
a.打开开发人员工具
b.找到sources，并且找到要调试的代码，点击打开
c.打断点(点击行号)-->刷新页面(程序命中这个断点,高亮)-->鼠标悬停查看存储的值-->点击继续，监听程序
执行过程。
（3）switch case
作用与if_else if_else一样，用于判断多个条件中的哪一个条件是否满足要求
【注意】
a.case的变量值后面加的冒号
b.default可写可不写，如果不写都不满足条件代码直接结束
（4）三元运算符（三目运算符）
结构：boolean表达式？操作一：操作二；
判断条件是否成立，成立执行操作一，不成立执行操作二
（5）循环语句
a.while(条件语句/boolean){
重复执行的代码块；
}
b.执行：
程序运行到while时判断括号内容，true执行代码false不执行代码，跳过继续执代码行下面
c.注意：
一定要有循环结束的条件，否则会是一个死循环
d.终止循环：
break；
e.结束本次循环：
continue；
（6）do while先执行一次代码，条件满足继续执行，不满足则结束循环
（7）*for循环
使用最多，先声明变量并赋值，然后进行判断，条件成立则执行循环体并自增，不成立则跳出循环
6.数据类型分类
（1）string、number、boolean、undefined、null、object、Array、Function
（2）总结：在js中数据类型分为两大类
简单数据类型（基础数据类型）：string、number、boolean、undefined
复杂数据类型：null、object、Array、Function
【注】
堆和栈都是电脑内存，一般情况下简单数据类型是存储在栈里面的；复杂数据类型是存储在堆里面的（在栈中
会存储堆对应的内在地址）
简单数据类型-->值类型
复杂数据类型-->引用类型
7.object对象
（1）对象的创建：var a=new Object();
（2）对象属性的添加：a.xingming="zhansan";//给了对象一个名称
a.chengji=99;//给了对象一个成绩
（3）对象属性的取值：alert(a.chengji);
8.数组（字符串也可以看成是一个数组）
（1）创建数组：var a=new Array();
（2）给数组赋值：a[0]="91";
（3）数组的取值：alert(a[2]);
（4）数组遍历：
for(var i=0;i<a.length;i++){
console.log(a[i]);
}
【注】
a.js中的数组定义好了之后就是一个无穷大的容器
b.元素可以任意添加：数量不限制，数据类型不限制（弱语言）
c.元素下标以0开始
9.函数
（1）作用：用来封装一些经常要用到的代码
（2）结构：
function 函数名(){
//要封装的代码
}
（3）函数的定义
（4）函数的调用（使用）
函数名();
【注】函数定义好了之后就可以想到哪里调用就到哪里调用
（5）函数的参数---就是放在函数名后面括号中的内容
当创建函数的时候函数名后面的参数叫做形参（形式参数）
当调用函数的时候函数名后面的参数叫做实参（实际参数）
（6）函数的返回值---跟在return后面的数据
一般情况下函数如果没有return，那么这个函数默认返回：undefined