初识JavaScript

目录

一、JS是什么？

二、HTML  CSS  JavaScript三者的关系？

三、JS的发展（由来）

3.1 历史：

3.2 JavaScript与Java的关系？

3.3 JavaScript和ECMAScript的关系？

四、JS的构成

五、认识浏览器引擎

5.1渲染引擎——浏览器内核（用来解析html和css）

5.2JS引擎——JS解释器（读取网页中的JS代码对齐处理后运行）

六、JS引入的三种方法

七、JS语法规则

八、JS注释

 九、JS输入输出语句

十、JS弹出框

十一、JS引号的使用

---

---

一、JS是什么？

• JS是web开发领域功能强大的编程语言（脚本语言），不需要配置环境，浏览器可以直接运行
• JS弱类型动态语言
  • 动态语言：同一变量可以存储不同类型的值
  • 弱类型：声明遍量并不知道是什么类型，由赋值来决定

二、HTML  CSS  JavaScript三者的关系？

1. html  结构  用语义化的角度来描述画面
2. css  样式  用审美的角度来美化页面
3. js交互（行为）从交互的角度来提升用户体验

三、JS的发展（由来）

3.1 历史：

• 1995年布兰登·艾奇用十天的时间开发了JavaScript（最初叫livescript）后来网景公司与sun公司合作，sun公司以Java出名，为了营销，改名JavaScript

3.2 JavaScript与Java的关系？

• JavaScript与Java没有关系   为了蹭热度

3.3 JavaScript和ECMAScript的关系？

• 网景公司将JavaScript内置于自己的浏览器中
  1996年微软公司也开发了类似js，名叫JScript，内置于ie3.0浏览器中
• 网景公司提交给ECMA国际（欧洲计算机协会），改名ECMAScript（包含JavaScript和JScript）
• es5：2015年以前的版本
• es6：2015年6月定下来的版本（具有里程碑的意义）

四、JS的构成

1. ECMAScript，即JavaScript核心语法
2. DOM（Document Object Model）文档对象模型
3. BOM（Browser Object Model）浏览器对象模型

五、认识浏览器引擎

5.1渲染引擎——浏览器内核（用来解析html和css）

谷歌	Chrome浏览器	webkit blink内核
微软公司	IE浏览器（Edge）	Trident内核
Mozilla公司	Firefox浏览器	Gecko内核

5.2JS引擎——JS解释器（读取网页中的JS代码对齐处理后运行）

谷歌	Chrome浏览器	v8引擎
微软公司	IE浏览器（Edge）	Chakra（查克拉）引擎
Mozilla公司	Firefox浏览器	SpiderMoney引擎

        

• 浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码
• JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。 

六、JS引入的三种方法

1. 行内式（不建议使用）

   <button onclick="alert('nice')"></button>

2. 内嵌式（可以在页面的任何位置）

   <script>代码</script>

3. 外链式

   <script src="01.js"></script>

七、JS语法规则

1. 区分大小写
2. 对空格、缩进、回车换行不敏感
3. 每一条语句打一个结束符';'
4. 使用英文半角

八、JS注释

1.  单行注释：//    快捷键：ctrl+/
2. 多行注释：/*  */   快捷键：alt+shift+A

 九、JS输入输出语句

1. 输入（一个）

   prompt('提示文字',【'默认信息'】);【】中可选

   弹出输入框

   有返回值

   1. 单击确定按钮，返回输入值
   2. 单击取消按钮，返回null
2. 输出（三个）

   alert();	弹出一个警告框	没有返回值
   console.log();	在控制台输出信息	没有返回值
   document.write();	在文档页面输出信息	没有返回值

十、JS弹出框

alert()	弹出一个警告框	无返回值
prompt()	弹出一个输入框	有返回值
confirm()	弹出一个确认框	有返回值且返回值是布尔值

十一、JS引号的使用

1. " "  ，'  ' 中的内容原样输出，直接回车换行会报错 需要使用\n或<br>换行
2. ` `  反引号，回车换行生效且不报错。里面的变量用 ${变量名} 解析