JS语法中不可不知的小点

网页、网站和应用程序

  • 网页:单独的一个页面
  • 网站:一系列相关的页面组合到一起
  • 应用程序:可以和用户产生交互,并实现某种功能

前端三层和JS应用场景

  • HTML — 结构层 — 从语义的角度描述页面结构
  • CSS — 样式层 — 从美观的角度描述页面样式
  • JS — 行为层 — 从交互的角度描述页面行为
JS的应用场景

JS发展到现在几乎无所不能,常见的应用场景有:

  • 网页特效
  • 服务端开发(Node.js)
  • 命令行工具(Node.js)
  • 桌面程序(Electron)
  • App(Cordova)
  • 控制硬件-物联网(Ruff)
  • 游戏开发(cocos2d-js)

JS的发展过程

JS是什么
  • JS是一种运行在客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能
  • 浏览器就是一种运行JS脚本语言的客户端,JS的解释器被称为JS引擎,为浏览器的一部分
JS简史
  • 在WEB日益发展的同时,网页的大小和复杂性不断增加,受制于网速的限制,为完成简单的表单验证而频繁地与服务器交换数据只会加重用户的负担,当时走在技术革新最前沿的 Netscape(网景)公司,决定着手开发一种客户端语言,用来处理这种简单的验证

  • 1995 年,就职于 Netscape 公司的布兰登·艾奇(Brendan Eich),开始着手为即将于 1996 年 2 月发布的 Netscape Navigator 2 浏览器开发一种名为 LiveScript 的脚本语言。为了尽快完成 LiveScript 的开发,Netscape 与 Sun 公司建立了一个开发联盟。在 Netscape Navigator 2 正式发布前夕,Netscape 为了搭上媒体热炒 Java 的顺风车,临时把 LiveScript 改名为 JavaScript。

  • 由于 JavaScript 1.0 获得的关注度越来越高,1996 年,微软就在其 Internet Explorer 3 中加入了名为 JScript 的 JavaScript 实现,这意味着有了两个不同的 JavaScript 版本,导致 JavaScript 没有一个标准化的语法和特性。

  • 1997 年,以 JavaScript 1.1 为蓝本的建议被提交给了欧洲计算机制造商协会(ECMA,European Computer Manufacturers Association)。该协会指定 39 号技术委员会(TC39,Technical Committee #39)负责“ 标准化一种通用、跨平台、供应商中立的脚本语言的语法和语义”。TC39 由来自 Netscape、Sun、微软、Borland 及其他关注脚本语言发展的公司的程序员组成,他们经过数月的努力完成了 ECMA-262 标准,定义一种名为 ECMAScript 的新脚本语言。

ECMAscript发展过程:
  • 1998 年 6 月,ECMAScript 2.0 版发布。
  • 1999 年 12 月,ECMAScript 3.0 版发布,成为 JavaScript 的通行标准,得到了广泛支持。
  • 2007 年 10 月,ECMAScript 4.0 版草案发布,对 3.0 版做了大幅升级。草案发布后,由于 4.0 版的目标过于激进,各方对于是否通过这个标准,发生了严重分歧。以 Yahoo、Microsoft、Google 为首的大公司,反对 JavaScript 的大幅升级,主张小幅改动;以 JavaScript 创造者 Brendan Eich 为首的 Mozilla 公司,则坚持当前的草案。
  • 2008 年 7 月,由于各方分歧太大,争论过于激进,ECMA 开会决定,中止 ECMAScript 4.0 的开发,将其中涉及现有功能改善的一小部分,发布为 ECMAScript 3.1,而将其他激进的设想扩大范围,放入以后的版本,由于会议的气氛,该版本的项目代号起名为Harmony(和谐)。会后不久,ECMAScript 3.1 就改名为 ECMAScript 5。
  • 2009 年 12 月,ECMAScript 5.0 版正式发布。Harmony 项目则一分为二,一些较为可行的设想定名为 JavaScript.next 继续开发,后来演变成 ECMAScript 6;一些不是很成熟的设想,则被视为 JavaScript.next.next,在更远的将来再考虑推出。
  • 2011 年 6 月,ECMAscript 5.1 版发布,并且成为ISO国际标准(ISO/IEC 16262:2011)。
  • 2013 年 3 月,ECMAScript 6 草案冻结,不再添加新功能。新的功能设想将被放到 ECMAScript 7。
  • 2013 年 12 月,ECMAScript 6 草案发布。然后是 12 个月的讨论期,听取各方反馈。
  • 2015 年 6 月 17 日,ECMAScript 6 发布正式版本,即ECMAScript 2015。
  • 从 2015 年以后,ECMA 开始每年发布一个小规模增量更新的升级版本,新版本将按照ECMAScript+年份的形式发布,截止目前,已经发布的版本包含 ECMAScript 2016、ECMAScript 2017、ECMAScript 2018、ECMAScript 2019、ECMAScript 2020,后续将继续发布新的版本。

JavaScript 的组成

  • Javscript,JScript,ActionScript 等脚本语言都是基于 ECMAScript 标准实现的。
  • 在 JavaScript,JScript 和 ActionScript 中声明变量,操作数组等语法完全一样,因为它们都是 ECMAScript。但是在操作浏览器对象等方面又有各自独特的方法,这些都是各自语言的扩展。
  • JavaScript 是由 ECMAScript,DOM 和 BOM 三者组成的。

计算机组成

  • 软件
    • 应用软件:浏览器(Chrome/IE/Firefox)QQ、Sublime、Word
    • 系统软件:Windows、Linux、mac OS
  • 硬件
    • 三大件:CPU、内存、硬盘 —主板
    • 输入设备:鼠标、键盘、手写板、摄像头等
    • 输出设备:显示器、打印机、投影仪等

JS的书写位置

  • 写在行内
<input type="button" value="按钮" onclick="alert('hello world')" />
  • 写在html中的<script>标签中
<head>
    <script>
        alert('hello world')
    </script>
</head>
  • 写在外部js文件中,在页面引入
    • 注意:引用外部js文件的<script>标签中不可以写JS的代码,自定义的JS代码,需要书写在另一个新的<script>标签中
<script src="main.js"></script>

JS的注释

  • js注释分为两种:块级注释和单行注释
  • 块级注释:又叫多行注释,作用范围是选中的多行,写作/**/
/*
    这是一个多行注释
    多行内容在浏览器中
    都不可见
*/
  • 单行注释:作用范围只有符号后边的一行,写作//
// 这是单行注释
// 换行后就不能发生作用了

alert语句和js书写语法

  • alert:警示、警告。

  • 作用:在浏览器中弹出一个警示框,警示框的警示内容可以人为自定义。

  • alert 语句是一个 js 内置好的功能(函数、方法),要想实现功能必须在 alert 关键字后面加小括号执行,自定义的内容需要传递给小括号内的参数,输出时参数位置的内容会出现在弹框位置。

alert("这是一个警示框");

语法1: alert 语句作为一个函数,如果要执行,必须在后面紧跟着添加小括号。

语法2: alert 语句作为一个函数,小括号内部可以传递参数,根据数据类型不同,有不同的语法要求,例如文字内容(字符串)必须写在一对引号内部。

语法3: 如果需要添加一对引号,要么是单引号,要么是双引号,不能一单一双。所有的有特殊功能的符号必须是英文字符。

语法4: 语句后面的分号必要性。

正确写法

alert("哈哈1");alert("哈哈2");alert("哈哈3");alert("哈哈4");alert("哈哈5");

错误写法

alert(1)alert(2)alert(3)alert(4)alert(5)

原因:在浏览器中有 js 解析器,在解读 js 代码时,需要知道一条语句的结束位置,如果有分号会认为是一行语句的结束,后面则是新的语句,如果没有分号,js 解析器读不到语句结尾,就强制认为换行是语句结束,如果没有合理换行,认为语句的语法错误。

一般代码上传时,都会压缩代码,所有的js代码都会压缩到一行,如果没有分号,js 只会加载第一条语句,语法会出现错误。

语法5: js 对换行、缩进、空格也不敏感。

alert("哈哈1");alert("哈哈2");alert("哈哈3");alert("哈哈4");

等价于

alert("哈哈1");
alert("哈哈2");
alert("哈哈3");
alert("哈哈4");

语法6:如果 js 中没有特殊控制结构,代码都是从上往下、从左往右进行加载。

prompt语句

  • prompt:提示。

  • 作用:弹出一个对话框,内部有一个提示语句以及一个输入框,可以在输入框中根据提示任意输入内容。

  • prompt 语句也是 js 内置的一个功能,必须加小括号执行,有两个参数可以进行传递,每个参数一般都是字符串类型,必须加引号,两个参数中间用逗号分隔,引号和逗号都必须是英文输入法状态。

prompt("请输入您的年龄","18");

console控制台

  • 在大部分浏览器中,都有一个控制台,内部可以查看 HTML、css 代码,甚至调试代码错误。

  • 浏览器中右键点击审查元素(检查),都可以打开控制台。

  • 快捷键: F12.

  • 控制台中有一个 console(控制台) 的选项面板,在 js 中有非常重要的作用。

作用一: 帮助程序员调试程序中出现的 bug。可以提示错误的个数、错误所在的行数、错误类型。
作用二: 可以在控制台中直接书写一些语句,进行执行。
作用三: js 有一个内置对象 console,内部封装了大量的属性和方法(函数),可以通过给 console 对象打点调用方法名()、属性名方式去执行。有一个叫做 log(日志)方法,可以实现参数位置自定义内容在控制台输出。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值