[前端学习]js语法部分学习笔记,第一天

初识js

  • 由网景公司开发,基于浏览器,基于面向对象,基于事件驱动的网页脚本语言。主要用来做表单验证、网页特效、网页小游戏、服务器异步交互。

js书写位置

  • 内联式js的写法与css类似
    <script type="text/javascript'>
    代码内容
    </script>
  • 可以看出只是包裹的标签不一样,js使用script包裹起来的。
  • 外联式使用<script type="text/javascript" src="文件地址"></script>,来进行引入。
  • 拓展两个不常用的script标签属性
    • async="async" 设置外部js文件异步加载,相当于既加载html又加载js,当js加载完毕后立即执行
    • defer="defer" 设置文件最后加载,就是当其他的代码都加载完毕后,再加载js并运行。

JS-API介绍

  • 应用程序编程接口。其实它就是一些预定于的函数。提供程序员基于某些硬件和软件访问一组程序的能力,无需访问源码,无需知道源码的运行机制
  • 常见的接口:百度地图、豆瓣电影、爱奇艺影视等

js语法格式

  • 推荐使用每行一句代码,并用分号结束
    var num = 1;
    var string= "你好";
  • 注意,在js中就要区分大小写了,和css不同

alert弹出警示框

  • 语法:alert("内容");
  • 写全是window.alert();也可以省略,为了方便一般会用简单的写法。
  • 注意alert你写几个它就弹几次。由于兼容性问题,不同浏览器显示的弹出框样式不同,所以一般很少用,主要是用来调试程序的。

prompt弹出输入框

  • 语法:prompt("参数1","参数2");
  • 参数1是提示或者问题信息,参数2是输入框默认值,如果不写参数2输入框就为空。当用户点击了确定会返回输入框中的值,点击取消返回null

console.log控制台输出日志记录

  • 语法: console.log("内容");
  • 这个输出的结果是不在页面中显示的,只能在调试工具的控制台中看到。

document.write文档打印输出

  • 语法:document.write("内容");
  • 这个也是打印内容,但是和console.log不同的是,document.write输出的内容是直接显示到页面中,用户是可以看到的。

变量

  • 声明方式:var string = "变量值";
  • 可以看出,为了证明这是一个变量,要用var来声明,然后跟上变量名和赋值。并且变量只能存放一个值,前面的值会被后面的赋值替换掉。
  • 想要获取变量存放的值,直接打印变量名就能取得。
  • 总结:变量是一个存放最后一次赋值的容器。

变量命名规范

  • 变量只能由字母、数字、下划线、$来组成,且不能由数字开头
  • 变量名长度不能超过255字符
  • 变量名中不能有空格
  • 变量名不能使用关键字或者保留字(百度有表格),命名时应尽量用相同语义的英文单词,理论上可以用中文但是不建议。
  • 变量名严格区分大小写
  • 书写变量建议使用驼峰式写法

不通过第三个变量,让两个变量值互换

  • 代码如下:
    var a=10, b=20;
    a = a + b; 此时a的值是两个变量的和
    b = a - b; 用两个值的和减去b的值,就剩下原来a的值,此时b就是原来a的值
    a = a - b; 用两个值的和减去b(原a值),就剩下原来的b的值,这样就实现了互换
  • 很有理解价值的案例

变量的类型

  • js是弱类型语言,不用声明变量的类型,它会根据里面的内容来转换类型。
  • 虽然可以通过给变量赋不同类型的值来转换类型,但是不推荐这么用。

数值型number

  • 给变量放入数字或者浮点数(小数),这个变量就是数值型变量
  • 数值型变量有一个特殊的返回值NaN,如果数值型变量因为操作错误哦不能返回一个数值时,就会返回NaN(依然是数值型),这样代码运行就不会报错。如果变量值是NaN,那么它自己和自己都不相等。
  • 使用isNaN()可以判断里面的值是否是有效数值,是有效数值返回false,不是有效数值返回true。Infinity是有效数值。
  • number的直接量显示
    • 直接量也叫做字面量,有多种显示方式,只做认识
      • 十进制,10,这是最常见的不作说明
      • 八进制[0开头],用八个字符来表示所有值(01234567),想表示8时,因为没8就要进位用010来显示
      • 十六进制[0x开头],用十六个字符来表示所有值(0123456789abcdef),0x10就是表示16
      • 科学计数法6e+5,实际上是6*(10的5次方)
    • 拓展
      • 浮点数因为精度的问题,所以千万不要用来做等于比较判断,只能作为范围条件判断。
  • JS能显示数字的最大和最小值
    • Number.MAX_VALUE可以返回js能显示的最大正数,超过就Infinity(无穷大)
    • Number.MIN_VALUE可以返回js能显示的最小正数,再小就是0
    • 负数和正数返回方法是一样的,加个负号就行,负数小到超过限制就是-Infinity(负无穷大)

字符型string

  • 把字符串放入变量,该变量就是字符型变量。
  • 只要被单引号或者双引号包裹的内容就是字符串,包括数字被包裹后就不是数值而是字符串了。
  • \反斜杠是转义字符,它可以把普通字符转义为有意义的特殊字符,也可以把有意义的字符转义为普通字符。转义字符有很多,搜索去查。
  • 字符串的不可变性
    • 在栈内层中,字符型变量重新赋值不是直接覆盖值,而是开辟一个新的空间,把新的字符串值引用给变量,原字符串不变,所以字符串值一旦创建是不能改变的。
    • 正因为这样,所以一旦大量拼接字符型变量非常消耗资源,不建议这么做。
  • 字符串拼接小技巧:引号加加,可以迅速完成字符中加插入拼接变量的操作。

布尔型boolean

  • 把两个逻辑判断值truefalse放入变量,该变量就是布尔型,两个值都必须是小写
  • true是真,false是假

未定义数据类型

  • 当声明了变量却没有赋值,这个变量就是未定义数据类型
  • 在调试工具中打印类型,会显示undefined

空类型

  • var num = null;
  • 当给变量赋值null后,变量就是空类型了,可以理解为清空变量。

typeof检测变量类型运算符

  • typeof xxx;
  • 要注意typeof是一个运算符不是方法,所以不用括号直接书写就行。他可以检测该变量或者该值是什么的类型。
  • 返回的是类型英文名。
  • 用typeof检测空类型,返回对象类型,这是错的。这个问题是js遗留的BUG,实际就是个空类型。
  • 用typeof检测函数调用时,函数返回什么值,就是什么类型。

js操作符

基础运算符

  • + - * / % 五个基础运算符,对应加、减、乘、除、取余数。
  • 这里+号比较特殊要注意。当加法运算中出现了字符串时,它就不会再计算相加的结果(有字符串也加不了),而是把所有参与运算的值连接起来。
  • 就是说在js中连接符号是+
  • 例如"10" + 1,是一个字符串加一个数值,实际结果是101,它们被连起来了。
  • 除了加号以外的基础运算符,如果字符串是数字正常运算,不是返回NaN
  • 用有效数字除以空或者0,会返回Infinity(无穷大)
  • 任何数%0都是NaN,取余比自己大的数返回自己

一元运算符

  • 一元运算符就是只靠一个数就能完成运算操作的符号,常见的集中一元运算符:
  • +正号。注意这里不是加号,是正号
  • - 负号。注意这里不是减号,是负号
  • ++自增符号,每写一次自己+1,例如num++就相当于num=num+1(只是相当于不是完全相同)
    • 自增符号可以前置也可以后置,都是自增的意思。
    • 前置和后置的区别:++前置是先自加再运算,++后置是先把值参与运算再自加。简单来说就是:后置参与运算的还是原值,到下一次运算时才自增(如果是自己加自己,那么第二个就是自增后的值了);前置在运算过程中就自加了。

比较运算符

  • 比较运算符用来判断条件是否成立,成立返回true,不成立返回false
    < 左边小于右边,条件成立
    > 左边大于右边,条件成立
    <= 左边小于或等于右边,条件成立
    >= 左边大于或等于右边,条件成立
    == 左边等于右边,条件成立(默认会做类型转换)
    === 左边全等于右边(值和类型都相等才是全等),条件成立
    !=左边不等于右边,条件成立(默认会做类型转换)
    !==左边不全等于右边(值和类型都不等才是不全等),条件成立
  • 运算符优先级,< > <= >=高于== === != !==,先比较和后比较的区别。

逻辑操作符

  • 逻辑操作符是用来判断多个条件结果的,比较对象是布尔值,返回的是决定结果的值
    && 逻辑与(并用),需要多个条件都满足,才返回true,有一个false就返回false
    || 逻辑或,只要满足一个条件就返回true,全部为false才返回false
    ! 把结果取反
  • 执行优先级: !>&&>||
  • 当执行短路运算时(即比较的值不是布尔值),虽然它会暂时隐式的转换为布尔值进行运算,但是返回的还是原值,具体返回的是起决定性作用的值,就是决定该次运算结果是true还是false的值。

赋值操作符

  • 在JS中等于号是双等==,单等=是赋值符号,意思是把右边的结果赋值给左边。
  • 赋值运算符的拓展:
    • num += 2num = num + 2的简写
    • num -= 2num = num - 2的简写
    • num *= 2num = num * 2的简写
    • num /= 2num = num / 2的简写
    • num %= 2num = num % 2的简写
    • 实际上就是类似于一元运算符的简写方法。

逗号操作符

  • 没什么好记的,就是css并集的意思,可以用于通用声明。

js操作符执行优先级总结

  • 算式分隔符>一元运算符(!取反也算)>基础运算符(先*/%后+-)>比较运算符(先大小判断后等于判断)>逻辑操作符(先与后或)>赋值操作符>逗号操作符。
  • 可以参考优先级表。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,837评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,551评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,417评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,448评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,524评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,554评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,569评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,316评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,766评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,077评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,240评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,912评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,560评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,176评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,425评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,114评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,114评论 2 352

推荐阅读更多精彩内容