什么是JavaScript ?
JavaScript 是一种客户端脚本语言(脚本语言是一种轻量级的编程语言)
JavaScript 通常被直接嵌入 HTML 页面。
JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)
JavaScript的引用
- 内部引用: 在html页面中引用, 放在
<script></script>
标签之间,脚本可放置在<head>
或<body>
部分;
<script>
alert("Hello JavaScript");
</script>
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我是放在head里面的 JavaScript 片段哦";
}
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="demo">一段话</p>
<button type="button" onclick="myFunction()">快点一下</button>
</body>
</html>
!DOCTYPE html>
<html>
<body>
<h1>JavaScript</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我是放在body里面的 JavaScript 片段哦";
}
</script>
</body>
</html>
- 外部引用: 外部 JavaScript 文件的文件扩展名是 .js, 如需使用外部文件,请在
<script>
标签的 “src” 属性中设置该 .js 文件:
<script src="myScript.js"></script>
注: 外部脚本中不能包含<script>
标签
JavaScript的数据类型
- 字符串(String)
- 数字(Number)
- 布尔(Boolean)
- 数组(Array)
- 对象(Object)
- 空(Null)
未定义(Undefined)
1. 字符串
是存储字符的变量, 可以用单引号或者双引号包围;
let str = 'Hello JavaScript'; let str1 = "Hello Js";
2. 数字
只有一种数据类型,没有其他编程语言中的明确区分,整型还是浮点型,js只有一种,数字可以带小数点也可以不带小数点,对于一些值也可以使用科学计数法表示;
let num = 1024; let num1 = 1024.00; let num2 = 1024e5; //102400000
3. 布尔
只能由两个值,true或者false;我们一般在用作判断或者测试的时候会使用的多一点;
let br = true; let br1 = false;
4. 数组
是js里面比较重要的类型啦,数组是有长度的用[]包起来的多类型的任意元素的集合,数组的下标从0开始的;
let myArr = [1, 2, 3, 4]; let myArr1 = [1, 'js', 'css', true]; let myArr2 = new Array(); myArr2[0] = 1; myArr2[1] = 'arr'; let myArr3 = new Array('html', 'css', 'js');
5. 对象
对象由花括号括起来,在括号内部,对象的属性以名称和值对的形式(name : value)来定义。属性之间由逗号分隔;
let myObj = { name: "javascript", age: 20 } let myObj1 = {} || new Object(); myObj1.name = "js"; myObj1["age"] = 10;
对象属性有两种寻址方式:
let name = myObj.name; let age = myObj["age"];
6. 空和未定义
undefined表示变量没有值,也就是我们只定义了变量却没有给这个变量赋初始值,这时候打印出的变量就是undefined;这种情况下我们可以使用null空来给变量赋初始值来避免undefined情况;
var x = null; let y; console.log(y); // undefined
JavaScript函数
- 函数是使用了关键词function的, 包裹在花括号中的,由事件驱动的或者当它被调用时执行的可重复使用的代码块;
- 当调用该函数时,会执行函数内的代码。可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用;
- JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数;
function myFunc(){
//所需执行代码
}
function myFunc1(param1, param2) {
//执行代码
}
myFunc1(x, y);
函数可进行传值,也就是所谓的参数,这些参数可以在函数内部使用,定义时我们会用形参去占位,实际传的我们称为实参, 且我们传参的时候变量和位置必须一致, 第一个变量对应第一个参数以此类推;
<p>函数传参</p>
<button onclick="myFunc('Js','fe')">点击这里</button>
<script>
function myFunc(name, area){
alert(name + "is the most important part of" + area);
}
</script>
函数的返回值用return, 将需要的值返回,这样调用函数之后就可以拿到该函数的返回值,可以进行其他的操作;
function myFunc1(param1, param2) {
//执行代码
return param1 + param2;
}
myFunc1(1, 2); //会得到返回结果 3
JavaScript作用域
- 在 JavaScript 中, 对象和函数同样也是变量。
- 在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。
JavaScript 函数作用域: 作用域在函数内修改。
1. 局部作用域
变量在函数内声明,变量为局部作用域。局部变量:只能在定义的函数内部访问。
function myFunc2() { let name = 'js'; // 此函数范围内可以调用这个变量 }
2.全局变量
变量在函数外定义,即为全局变量。全局变量有全局作用域: 网页中所有脚本和函数均可使用。但是一般我们都会尽量避免定义过多的全局变量从而避免全局变量污染;
let age = 20; // 函数外可调用age变量, 但是不能调用name变量 function myFunc2() { let name = 'js'; // 此函数范围内可以调用age和name两个变量 }
我们自己设置的全局变量,或者函数,可以覆盖 window 对象的变量或者函数。
局部变量,包括 window 对象可以覆盖全局变量和函数。
JavaScript 变量的生存期
- JavaScript 变量的生命期从它们被声明的时间开始。
- 局部变量会在函数运行以后被删除。
- 全局变量会在页面关闭后被删除。