初识JavaScript

1. JS组成

JS语言核心有三部分
- ECMAScrpt: 语法核心
- DOM: Document Object Model, 文档对象模型(文档指HTML文档或XML文档)
- BOM: Browser Object Mode, 客户端/浏览器窗口对象,又叫浏览器对象模型(操作对象: 浏览器窗口对象模型).
除此之外还有一些补充
- 浏览器/宿主环境提供的API: 如Timeout(), 即定时器.
宿主环境: 执行环境/运行上下文
- 浏览器: Chrome, Firefox, edge, 360浏览器, 各种浏览器…
- 命令行执行
- 服务器端执行: Node.js

2. JS基本知识和语法

在html文件中嵌入JS代码, 需要使用<script>标签. 其中type属性指定脚本语言, 目前text/JavaScript已成为唯一, 所以不写也可以.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML文档中嵌入js代码</title>
    <!-- type属性指定脚本语言, 目前text/JavaScript已成唯一, 所以不写type属性也可以 -->
    <script type="text/javascript">
        // window变量指向当前浏览器窗口, 类似PHP中的echo.
        window.document.write("<h1>Hello JavaScript!</h1>");
    </script>
</head>
<body>
</body>
</html>

script标签的src标签可以指定外部的一个js脚本文件, 此时script标签内部的代码将被忽略

demo1.js

window.document.write("<h1>Hello JavaScript~~~~~~~~~~</h1>");

引用demo1.js

    <!-- script标签的src标签可以指定外部的一个js脚本文件, 此时script标签内部的代码将被忽略 -->
    <script src="demo1.js">
        // 下面的代码将不会执行
        window.document.write("hahahaha");
    </script>

在执行js脚本时, 将会中断HTML文档解析, 当js脚本执行完毕时,才会继续往下解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML文档中嵌入js代码</title>
        <!-- 在执行js脚本时, 将会中断HTML文档解析, 当js脚本执行完毕时,才会继续往下解析, 特别是很长的js脚本, 会造成HTML页面假死. 所以, 一般把写在HTML文档中的js代码放在靠近</body>的地方 -->
    <script>
        alert("我将中断HTML文档往下解析");
    </script>
</head>
<body>    
    <!-- 在关闭alert()弹出框之前,下面的HTML元素不显示 -->
    <h1>你好! JavaScript</h1>
</body>
</html>

为解决执行js脚本发生的阻塞, 可以给script标签添加defer属性, 把js脚本放到外部文件中, 使用src文件引入, 这样可以实现延时加载, 文档也不会阻塞

外部js脚本文件

alert('看看我会不会把HTML文档解析中断');

延时加载测试脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML文档中嵌入js代码</title>
    <script src="alert.js" defer>
    </script>
</head>
<body>    
    <h1>你好! JavaScript</h1>
</body>
</html>

另一种解决js脚本阻塞的方法, 就是给script标签添加async属性, 即异步加载, 这样可以实现解析HTML文档和执行js脚本同时进行

外部js文件略

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML文档中嵌入js代码</title>
    <script src="alert.js" async>
    </script>
</head>
<body>    
    <h1>你好! JavaScript</h1>
</body>
</html>

2. JS变量声明和赋值

JS支持中文变量名, 但是强烈建议不要使用.

var 姓名="张三";
console.log(姓名);
/* result: 张三 */

JS变量名区分大小写.

var username = "李四";
var UserName = "王五";
console.log(username);
console.log(UserName);
/* result: 
李四
王五*/

JS中函数名也区分大小写, 这点与PHP有所区别

function func() {
  console.log("func");
}
function FUNC() {
  console.log("FUNC");
}
func();
FUNC();
/* result:
func
FUNC */

更新变量值: 变量名=新值

var name = "James";
console.log(name);
name = "Kobe";
console.log(name);
/* result:
James
Kobe */

在ES6中, 可以重新定义变量

var name = "James";
console.log(name);
var name = "Kobe";
console.log(name);
/* result:
James
Kobe */

3. JS的作用域

JS中, 作用域是一个对象, 用来查找变量的工具.
JS与PHP的作用域是一样的, 也分全局和函数作用域
PHP和js(ES5)均不支持块作用域(java中的代码块), ES6支持
函数可以访问全局作用域的成员, 而全局作用域却无法访问函数作用域的成员

var varInGlobal = 'glb';
function func1() {
  var varInFunc = 'hello';
  // 函数作用域中可以直接访问外部作用域的变量
  console.log(varInGlobal);
}
func1();
// 无法访问函数中的变量
console.log(varInFunc);
/* result:
glb
Uncaught ReferenceError: varInFunc is not defined
    at <anonymous>:11:21
*/
// 块作用域
if(true) {
  var var1 = 'hello1';
  let var2 = 'hello2';
}
// var1可以正常访问, 不受块作用域影响
console.log(var1);
// let声明的变量就受影响了(ES6)
console.log(var2);
/* result:
hello1
Uncaught ReferenceError: var2 is not defined
    at <anonymous>:10:21
*/

变量提升

在JS中, 变量未定义之前, 就可以访问了. 值为undefined
JS中的变量声明和初始化时分开的. var sayHi = "hello";可以分解为var sayHi;和sayHi="hello". 当变量只被声明而未被初始化时, 其值为undefined.

console.log(seyHello);
var sayHello;
/* result: undefined */

学习心得

js让前端变得灵活. 没有js, 网页是死的, 渲染完成就不会改变, 除非跳转到新的页面. 有了js, 就有了很多交互. 前端就活了. HTML标签指定了页面的元素, CSS定义了元素的样子, JS则定义了元素的行为.

JS基础-初识JavaScript

初识JavaScript

1. JS组成

2. JS基本知识和语法

2. JS变量声明和赋值

3. JS的作用域

变量提升

学习心得

相关文章