JavaScript入门①-基础知识筑基
作者：互联网
01、JavaScript基础知识
JavaScript（缩写：JS）是一种具有面向对象能力的、解释型的程序语言，基于对象和事件驱动，具有相对安全性的客户端脚本语言。JavaScript是一门完备的 动态编程语言，当应用于 HTML 文档时，可为网站提供动态交互特性，是前端开发最主要、正式的编程语言。
ECMAScript 是由 ECMA 国际标准化组织 制定的一套脚本语言的标准化规范，JavaScript算是他的实现，作为基础语法规范，构成了JavaScript的核心。再加收浏览器提供的DOM（HTML网页内容）操作API、浏览器BOM操作API，共同组成了 JavaScript。
1.1、语法规范
JS代码以行为单位，（半角）分号;结尾。
注释：//
- 单行注释：
//开头。 - 多行注释：
/*多行注释*/（同css）
代码风格：
- 区分大小写，字母、数字、下划线组成，不能数字开头，不能是关键字。
- 小驼峰命名（推荐）：
initialColor
关键字： 内置的关键词：如var、do、else、enum、eval、false、for、if、void、function、switch...
语句块：花括号 { 代码块 }
1.2、引用方式
- 行内JS：元素标签内部的JS代码。
- 内部JS：定义在
<script>标签里的JS代码，可以放到head中、body中、body后，推荐body后，先加载html再执行JS。 - 外部JS（推荐）：单独的JS文件，通过script标签引入，
src属性指定JS文件地址，此时标签中写的代码就无效了。 - 动态加载：通过DOM的API动态加载JS脚本资源，用JS创建
<script>标签并引入资源。
<script>属性 |
描述 | 值/备注 |
|---|---|---|
| src | 外部资源地址，与嵌入脚本代码不可同时使用 | <script src="js1.js" async></script> |
| type | 定义脚本语言类型，可空，默认为JavaScript类型 | 支持的MIME类型包括text/javascript、 text/ecmascript、 application/javascript 和application/ecmascript |
| async | 异步并行加载，只针对外部JS资源 | 多个async脚本加载完成的顺序不确定 |
| defer | 等HTML解析完成再执行JS，在DOMContentLoaded之前执行，只针对外部JS资源 | 多个脚本资源顺序加载 |
脚本加载策略：
- 如果脚本无需等待页面解析，且无依赖独立运行，那么应使用
async。 - 如果脚本需要等待页面解析，且依赖于其它脚本，应使用
defer，将关联的脚本按所需顺序置于 HTML 中。
<body> |
|
<div> |
|
<h1>基础语法</h1> |
|
<input type="button" value="行内JS" onclick="alert('Hello world!');"/> |
|
<input type="button" value="外部JS调用" onclick="hello();"/> |
|
</div><hr/> |
|
</body> |
|
<script> |
|
console.log("内部js：网页加载完成！"); |
|
</script> |
|
<!-- 引入外部js文件，设置了src属性，script内部的代码就无效了 --> |
|
<script src="../tstudy/js/js1.js" type="text/javascript" async></script> |
02、变量申明var/let/const
变量，就是一个用于存放数值的容器，比如年龄=20，“年龄”就是变量，“20”是他的树值。JS是一种弱类型语言，不需要指明数据类型，用var或 let关键字申明即可。
申明方式：
- 申明并赋值，1步完成：
var str="hello world"; - 先申明，再赋值，2步完成。
var str1; str1="hello world";// 默认值为undefined
动态数据类型：JavaScript 是一种“动态类型语言”，意味着一个变量可以被赋值为各种类型数据值，通过typeof判断数据类型。
let age; |
|
console.log(age); //undefined |
|
age =20; |
|
console.log(typeof age); //number |
|
age='年芳二十'; |
|
console.log(typeof age); //string |
| (IE11 ES6) | (IE11 ES6) | ||
|---|---|---|---|
| 说明 | 变量申明 | 变量申明 | 只读常量申明：申明时必须初始化值，不可更改 |
| 作用域 | 全局（整个文档）或整个函数体内 | 块级作用域{}包含的区域 |
块级作用域{} |
| 命名规范 | 推荐：小驼峰命名 | 同var | 推荐：全大写+下划线，const MAX_SPEED |
| 默认值 | undefined |
undefined |
必须赋值 |
| 变量提升 | 提升所有var申明的变量，可以先使用后申明（不推荐），把var变量申明提升到代码头部，注意不包括赋值 | 不会提升，顺序执行：必须先申明，后使用。存在暂时性死区let foo=(foo+55)第二个foo未申明报错 |
不会提升，顺序执行：必须先申明，后使用。 |
| 全局属性 | 在全局环境时，会成为顶级对象的属性（不可配置属性），作为全局变量存在。var age=3; //this.age;window.age |
无 | 无 |
| 重复申明 | 可以重复申明，覆盖前面的，有点太随意了 | 不可重复申明，作用域内重复申明会报错 ● 包括var、const申明的变量 ● 子块可重新申明let，不同的作用域了 ● 子块中用var变量会重复，var会提升 |
不可重复申明，会提示错误，同let |
| 申明多个 | 支持：var s1=1,st=2; |
支持：let s1,s2=2; |
支持：const s1=1,s2=2; |
| 性能 | 一般 | 一般 | 编译器会做常量替换优化，提升代码效率 |
| 总结 | 有点粗犷，不推荐 | 更严谨，推荐使用 | 不仅更严谨，性能还好，优先推荐！！！ |
暂时性死区：由于没有了变量提升，及块级作用域，let、const变量只能在申明后才能用，在这之前不可用，称为“暂时性死区”。
标签：JavaScript,基础知识,浏览器,编程语言,代码, 来源：