认真看～ 一定能让你入门的JavaScript入门篇【上】

---

What is the JavaScript

JavaScript是一门编程语言，属于高级语言。它是前端开发的一门脚本语言（解释性语言）。

• 解释性语言即程序执行之前不需要编译就能直接运行，在运行时边解析边执行的语言
• 解释性语言的代表有：Python、JavaScript、PHP、Ruby
• 解释性语言跨平台性好，一些网页脚本、服务器脚本及辅助开发接口这样对速度要求不高、对不同系统平台间的兼容性有一定要求的程序通常使用解释性语言

总而言之，JavaScript是一门高级解释型脚本语言

JavaScript的组成：

• ECMAScript，它是JavaScript的语法标准
• DOM：JavaScript操作网页上的元素的API
• BOM：JavaScript操作浏览器的部分功能的API

插上一段“题外话”：

• 看到JavaScript大家不免联想到Java，那它们有什么联系呢？
  其实，JavaScript最初是受Java的启发而开始设计的，目的之一就是看上去像Java，因此语法上有类似之处，一些名称和命名规范也借鉴自Java。而JavaScript和Java名称上的近似是因为当时NetScape为了营销考虑与Sun达成协议的结果（因为当时Java很火，改名为JavaScript“蹭蹭热度”）
  

---

JavaScript的特点及使用场景

JavaScript的特点：
① 简单易用： 可以使用任何文本编辑工具编写；只需要浏览器就可以执行程序。
② 解释执行（解释语言）： 事先不编译，逐行执行，无需进行严格的变量声明（变量统统用 var 声明）。
③ 基于对象： 内置大量现成对象，编写少量程序可以完成目标。

使用场景：
随着JavaScript这门语言的完善，我们可以用它来进行前端开发、后端开发和移动端开发。当然，学习这门语言最开始的突破口在于前端开发。今天或者未来，JavaScript似乎无所不能 ~
应用场景多元化：

• 页面特效
• 移动端开发（RN、Weex）
• 服务端开发（Node.js）
• 命令行工具（Node.js）
• 物联网与人工智能（Ruff）
• 游戏开发（cocos2d-js）

---

JavaScript、CSS、HTML三者间的关系

1）HTML： 用来制作网页，简单来说就是编写网页结构，提供网页中的内容
2）CSS： 美化网页，2D/3D过渡，动画等
3）JavaScript： 控制网页内容，给网页增加动态的效果，实现网页与客户之间互动的桥梁，让网页具有丰富的生命力，对网页中的一些数据操作都是利用JavaScript完成的

一个网页逐渐拥有HTML、CSS、JavaScript的过程（此处借鉴网图来展示）：

---

JavaScript入门须知

① JS书写格式

分为三种格式：行内式、页内式、外链式

• 行内式（可以有两类表示方法）：
  1）<button onclick="alert('很高兴认识你！');">很高兴认识你！</button>（alert() 方法用于显示带有一条指定消息和一个 确定(OK) 按钮的警告框）
  2）<a href="javascript:alert('你就不能轻点！');">点我吖～</a>
  如图：
  
  
  

• 页内式：<script type="text/javascript">alert("很高兴认识你！");</script> 和CSS页内式相似，不过其一般写在body的尾部，原因有以下两点：
  1）网页是从上至下加载, 而js代码通常是给标签添加交互(操作元素), 所以需要先加载HTML, 否则如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素)；
  2）HTML页面中出现<script>标签后，就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续。
  如图：
  
  
  这里代码外的window.onload = function ()函数作用是让窗口内容全部加载完毕后再加载JS，很多人在写JS代码时都习惯先套上这个函数，然后再往里面开始写东西。

• 外链式：<script type="text/javascript" src="js/index.js"></script> 同样放在尾部
  如图：
  
  
  
  外链式的一些注意事项：
  1）外链式的script代码块中不能编写js代码，即便写了也不会执行，即下图中这样写是没有用的
  
  2）由于每次加载外链式的JS文件都会发送一次请求，这样非常消耗性能，所以在企业开发中推荐将多个JS文件打包成为一个JS文件，以提升网页的性能和加载速度。

② JS常见输出方式

• 在网页中弹出显示框，显示信息（运用alert()方法）
  
  
• 在控制台输出消息，一般用于调试程序
  
  用浏览器打开后按 F12键 ，点击Console控制台就能看到输出内容。 而且在控制台的右边还能看到所在行号，方便定位
  
  当然 除了console.log("嘿嘿嘿");我们还能写console.warn("这是一个警告！"); 或者 console.error("这是一个错误！"); 可参考Console 对象
  示范如下图：
  
• 向body中输出内容
  document.write('你好吖~');当然，这里除了写文字 还可以写标签document.write('<h1>我是Henry</h1>');，document.write('<div>很高兴认识你~</div>');都是可以的，只要是文本都可以写入。
  可参考HTML DOM write() 方法
  
• 在网页中弹出输入框，一般用于接收用户输入的消息
  可通过window 调用，也可以直接prompt() window.prompt('你想和Henry说什么吖？');和prompt('你想和Henry说什么吖？');均可，不过它们是有一些区别的。
  （如果你是写在window.onload = function ()函数里的，通过window调用的会正常等待窗口内容全部加载完毕后再加载，而直接prompt()使用的会先加载，阻断网页内容的加载，这种情况建议直接写 window.prompt('你想和Henry说什么吖？'); ）
  可参考Window prompt() 方法
  
  
• 在网页中弹出提示框，显示信息，该方法一般与判断语句结合使用
  弹出的提示框可选择 确定 / 取消 window.confirm('请做出你的选择');
  可参考Window confirm() 方法
  
  

③ JS中的注释以及一些细节点

• 单行注释 ：// 我是单行注释
  
• 多行注释 ：/*我是多行注释*/
  
• 注释使用需注意：单行注释可以嵌套单行注释、多行注释，多行注释可以嵌套单行注释，但是多行注释不能嵌套多行注释！！大家可以通过自己实践来加深印象~

一些细节点：
1）编写Javascript注意语法规范，一行代码结束后必须在代码最后加上 ;
(如果不写分号，浏览器会自动添加，但是会消耗一些系统资源；此外，容易加错分号，所以在开发中分号必须要写)
2）在JavaScript中是严格区分大小写的 （ alert("妖怪哪里跑！"); 正确√），（ALERT("妖怪哪里跑！");错误×）
3）JavaScript中会忽略多个空格和换行

④ 字面量、变量、常量

• 字面量： 字面量就是一个值，变量的值或者常量的值，比如: 数字, 字母,字符串…，不过一般都不会直接使用字面量

• 变量： 可以用来保存字面量，而且变量的值是可以任意改变的

• 常量： 定义完成后，固定且不能改变的数据。在ES6之前没有声明常量的方法，在ES6中新增加了const来定义常量，建议常量的命名全部大写，如果由多个单词构成，可用下划线隔开。（例如：const PI = 3.14; const MY_NAME = 'Henry';，const需要在 ES6环境中才可使用）

• 变量的使用：
  1）声明变量：在JS中使用var 关键字来声明一个变量，例如：var name; var age; （也可var name, age; ）
  2）给变量赋值：name = “Henry”; age = 19;
  3）可以声明的同时赋值：var name = “Henry”; var age = 19;（也可var name = “Henry”, age = 19;）
  然后输出调试

• 区别：
  1）常量与变量的区别：常量与变量的存储方式是一样的，只不过常量必须要有初始值，且值不允许修改；而变量可以无初始值，且可以多次赋值。
  2）常量与字面量的区别：常量与字面量均不会被改变，常量为存储数据的容器，而字面量为等号右侧的值，字面量是有字符串、数字等构成的字符串或数值。

⑤ 标识符

1）定义： 在JS中所有的可以由开发者自主命名的都可以称为是标识符（例如：变量名、函数名、属性名都属于标识符）

2）命名规则：

• 标识符中可以含有字母、数字、下划线、$
• 标识符不能以数字开头
• 标识符不能是ES中的关键字或保留字
• 标识符一般都采用驼峰命名法
• 在JS底层保存的标识符采用的是Unicode编码，所以UTF-8中所有的字符都可以作为标识符

---

入门篇【上】就到这里啦，如有写的不恰当的地方，望提出指正~😊
入门篇【下】正在奋力准备中💪（写好后会在本文加上链接哒），如果本文对你有帮助的话请支持一下哟，后续还会陆续推出JS的进阶学习系列 ~