js简介
介绍
JavaScript特点
- JavaScript 是一门脚本语言。
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
- JavaScript 很容易学习。
用法
HTML 中的脚本必须位于 标签之间。脚本可被放置在 HTML 页面的 和 部分中。通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。如果我们把JavaScript 代码放入函数中,就可以在事件发生时调用该函数。
1、 中的 JavaScript
在下面这个例子中,JavaScript 函数被放置于 HTML 页面的 部分。
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>
<body>
<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>
</body>
</html>
2、 中的 JavaScript
在下面这个例中,JavaScript 函数被放置于 HTML 页面的 部分。
<!DOCTYPE html>
<html>
<body>
<h1>A Web Page</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</body>
</html>
3、外部脚本
外部脚本很实用,如果相同的脚本被用于许多不同的网页。就可以采用外部脚本这个中方式。
- 外部文件:myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
- JavaScript 文件的文件扩展名是 .js。如需使用外部脚本,请在
<script src="myScript.js"></script>
数据类型
1、基本数据类型,数据存储在栈区
number string boolean undefined null
2、引用数据类型 数据存储在堆区
- object
var obj = {name:“wc”,age:123};
conosle.log(obj.name);- array
var arr = [“a”,“b”,“c”];
console.log(arr[0]);- function
var f = function (){ var i=0; var j=1;}
JavaScrip变量
3、JavaScrip变量
在编程语言中,变量用于存储数据值。JavaScript 使用关键字var来定义变量, 使用等号来为变量赋值,变量之间可以相互操作:
var y = false // 布尔值
var length = 16; // 数字
var points = x * 10; // 数字计算
var lastName = “Johnson”; // 字符串
var cars = [“Saab”, “Volvo”, “BMW”]; // 数组
var person = {firstName:“John”, lastName:“Doe”}; // 对象字典
4、JavaScript函数
为了能够重复引用相同的功能,减少代码的书写和维护的方便,JavaScript提供函数功能,由关键字function引导:
function myFunc(a, b) {
return a + b; // 返回a+b结果
}
5、ECStack EC(G) VO EC(f) AO GO
ECStack 执行上下文栈
EC(G) 全局执行上下文 存储全局的加var 加function的数据存储在VO中
VO 变量对象 存储的全局的加var 或 加function
EC(f) 函数执行上下文 存储局部的加var 或 加funciton的局部数据
AO 活动对象 存储局部的加var 或 加function的局部数据
GO 全局对象
默认情况下,里面就存储了很多东西
全局的数据,加Var的全局数据,加functon的全局数据,不加var的变量都会存储到GO中的
6、JS代码执行分两个阶段
1)预编译
提升:
全局代码中: 提升到代码段最前面
加var的全局变量 仅仅提升是声明
加functon的全局函数 提升的是定义 定义 = 声明+赋值
函数内部:
加var的也会提升,提升到函数体的最前面
2)代码执行
代码执行才会产生EC。
let和const
1、let
1)let声明的变量没有提升(let声明的变量也提升,仅仅是没有初始化)
console.log(a);
let a = 110; // Cannot access 'a' before initialization
2)let 配合 {} 也可以形成块级作用域
if(true){
var a = 110; // 全局变量
let b = 666; // let + {} 形成块级作用域 , b只能在当前的{}中被访问到 出了块就访问不了
}
console.log(b); // b is not defined
3)使用let声明的变量不会挂载到GO上
let a = 110;
console.log(window.a); // undefined 访问一个对象上没有属性,得到的就是und
4)使用let不能重复声明
let a = 1;
let a = 2;
console.log(a); // Identifier 'a' has already been declared
记住:不要使用var来定义变量 使用let声明变量
2、const
const是声明一个常量
const a = 110; // 定义了一个常量(不会改变的量)
a = 666;
console.log(a); // TypeError: Assignment to constant variable.
1)也没有提升
console.log(a);
const a = 1; // Cannot access ‘a’ before initialization
- 也会形成块级作用域
if(true){
const a = 111;
}
console.log(a); // a is not defined
3)使用const声明的常量不会挂载到GO上
const a = 1;
console.log(window.a); // undefined
4)使用const不能重复声明
const a = 1;
const a = 2;
// Identifier 'a' has already been declared
console.log(a);
5)const在声明常量时,必须赋值
const a;
a = 1;
console.log(a)
用法:声明变量使用let 声明常量使用const 不要用var
例子
1、在判断语句中,如果有函数,此函数在预编译期间并不会直接提升到代码段的前面,仅仅是提升了函数名。
console.log(fn); // 函数名提升到最前面 undefined
window.fn(); // Uncaught TypeError: fn is not a function
console.log(window.fn) // undefined,fn是全局函数 也会挂载到GO上
fn(); // Uncaught TypeError: fn is not a function
if("fn" in window){
fn(); // fn...
function fn() {
console.log("fn...")
}
}
fn(); // fn...*/
在判断判断中,如果有函数,此函数在预编译期间并不会直接提升到代码段的前面,仅仅是提升了函数名也就是说仅仅是提升了函数的声明,也就是提升了fn如果条件满足,进入到条件里面的第1件事就是给fn赋值fn 此时就已经是一个函数了。
2、一个变量被声明多次
fn();
function fn() { console.log(1); }
fn();
function fn() { console.log(2); }
fn();
var fn = function () { console.log(3); }
fn();
function fn() { console.log(4); }
fn();
function fn() { console.log(5); }
fn();
//5 5 5 3 3 3
在JS中,只要提升过一次了,就不提升2次
var a = 110;
function a() {
console.log("a...")
}
console.log(a);