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