JavaScript基础

上节课给大家展现了很多实例,这节我们正式接触基础知识

图1

JavaScript组成

ECMAScript是js解释器,负责翻译给计算机互相沟通

DOM:DocumentObjectModel文档对象模型,我们之前查找元素就是用的document,其实就是html文档,关于对象和模型我们后面会讲解

BOM:BrowserObjectModel浏览器对象膜,我们操作浏览器相关的操作,window是其相关的

兼容性问题

ECMAScript为核心部分,功能比较简单,几乎没有兼容性问题

DOM有一些操作不兼容

BOM没有兼容性(完全不兼容)


变量类型

图2

为了看类型,我们先看下面的代码

图3

其中,a为数字类型number,b为字符串string,c为布尔类型boolean,d是函数类型,我们定义函数,那其就是此类型,e我们赋值document,其默认的就是object对象类型,我们没定义aa,其类型就是undefined,还有我们定义变量f,但是没赋值,其类型也是undefined

这里我们使用typeof 变量名    获得变量的类型,也可以使用typeof(变量名)


变量类型转换

图4

比如说我们在2个input表输入数字,然后点击按钮,弹出求和,如果我们只是讲2个input签的value相加,那结果只能是字符串拼接,我们就需要将其转换为数字

图5

如上图,我们就通过parseInt(x)将字符串x内容转换成整数

我们就继续分析下parseInt()

图6

我们尝试给内部传入'12xxdas'字符串,发现返回12,这是为什么呢,parseInt()会从左到右,直到遇到非数字部分,将左侧数字部分返回

图7

我们又干脆不给写数字,直接传入字符串,则返回的是NaN,这是Js的Not a Number的缩写,提示不是一个数字

我们之前的加法如果一个输入数字,另一个输入使内容NaN的纯字母字符串,则结果还是NaN,即数字和NaN计算还是NaN

图8

JS里NaN有个特性,就是NaN之间不相等,如上图会提示false

JS里如何判断其为NaN呢,我们可以使用isNaN(变量)

图9

这里用了或逻辑||,我们判断有一个isNaN()为true,就提示错误,

我们入过parseInt('3.5')就会返回3,如果我们想得到小数,就需要他的兄弟parseFloat();

我们使用parseInt,parseFloat都是强制类型转换,也叫显式转换

还有一种就是隐式转换(偷偷的给变了类型)

图10

我们看到a是数字5,b是字符串‘5’,a==b结果是true,这里==两侧被默认转换成相同类型比较

图11

我们改用===三个等号,会发现结果是false,三个等号的作用是不转换类型直接比较

图12

又一个例子如上,我们定义字符串a,b分别为数字字符串,加法当然是拼接了,但是减法呢,结果却是得到12-5的7,这就是做了隐式转换,同理还有乘除法,这里的解释是+可以是拼接也可以是数字加法,因为后者要转换,所以选择最简单的拼接,而其他的就是给数字用的,所以要转换类型


变量作用域

图13

我们尝试执行这个代码,会发现网页报错,提示a没有定义,这是因为a定义在函数aaa内部,是个局部变量,只能在定义他的函数里使用

图14

我们把var定义的地方换个位置,就会发现可以提示12,这是因为定义了全局变量


闭包

图15

当我们把函数定义到另一个函数内部,就实现了闭包(子函数可以使用父函数的局部变量),这种情况把aaa叫父函数,bbb叫子函数


JS命名规范

可读性,别人能见名知意

规范性,可以使用前缀+首字母大写的拼接(匈牙利命名法),前缀可以使我们一看就知道其类型

图16

前缀表如上


运算符

图17

+-*/%加减乘除取模(/除法得到的是小数)

取模%可以用于隔行变色,

像秒数转换成xx分xx秒等等等,

图18

!=和!==的关系就和==与===的关系一样,我们前者隐式转换都不等则不等,后者类型不等也不行

&&,||,!与或非js逻辑运算(前2个是双字符)


流程控制

图19

首先我们讲if,之前也说过if else,这里提下更高级的写法

if(条件){}else if{条件}else{}这种结构,python也见过类似的,没啥说的

switch语句,对于多值情况

switch(变量名){

    值1:

        语句1;

        break;

     值2:  

        语句1;

        break;

    default:

        语句n;

}

图20

每个条件下,break不能缺省,default是都不满足进的地方

三元运算符  条件?语句1:语句2;如果条件满足执行语句1,否则执行语句2

图21

根据变量a奇偶数提示如上

循环中break是结束最近的一层循环,continue则是结束当次循环,继续下次循环


JS的‘真’和‘假’

js里用于逻辑判断

非0数字,非空对象和true同等地位,

0和false,空对象,空字符串,null(空对象),undefined一样


JSON

图22

var json={};符号是花括号,里面是用键值对的方式存储,我们访问元素可以用json.键名或json[键名]访问值,也可以通过访问的对象修改值,

arr=[1,2,3,4]这样的数组也能存储多值,我们可以用数字索引来访问,而json格式是用字符串访问,

json没有length属性(不能通过长度遍历)

关于遍历我们之前访问数组是用for循环,i和arr.length设置条件,其实我们还可以这么写

for(each in arr){

    alert(each);

};

当然我们json也可以用for in的方法,每个遍历的是json的键值,

图23
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容