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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,869评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,716评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,223评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,047评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,089评论 6 395
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,839评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,516评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,410评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,920评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,052评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,179评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,868评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,522评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,070评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,186评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,487评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,162评论 2 356

推荐阅读更多精彩内容