目录
这篇文章有点长,大家可以根据目录按需分次看
一、JavaScript 简介
Javascript 简称为 JS,在web中用作用于给整个页面添加一些动态效果,例如动态改变页面某个元素的css属性,或给整个页面添加较为流程的用户体验,基础的 JS 学习 一般直接在 web 中嵌入即可。
二、JavaScript 基础入门
2.1 JavaScript HelloWorld
JS代码添加在标签 <script> </script> 之中,通过 JavaScript 写的一段 HelloWorld脚本来了解 JavaScript 代码的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 基础入门</title>
</head>
<body>
<p id="p_id">
这是P元素内容
</p>
<script>
document.write("HelloWorld");
</script>
</body>
</html>
运行结果:
代码解析:
重点看标黄的代码,这就是JS代码,放在一对 <script></script> 标签里, <script></script> 标签中的 document.write("HelloWorld") 指的是在当前文档中写入一个字符串,这个字符串是 HelloWorld。其中的 document 指 html 文档,文档是一个类,write 指这个文档类别对象里面的一个写入功能,也就是 write()函数,写入内容需要一个文本来表示,这个文本就是 HelloWorld。在 document 和 write 之间有一个“ . ”,这个点表示当前文档调用 wirte 这个功能,是面向对象的。在 JS 里字符串要用双引号标识,所以“HelloWorld”字符串用双引号标识。
注意:在<script></script>标签里,写完一行内容要记得加分号 “ ;”
JS代码可以换位置,数量也不限制,示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 基础入门</title>
</head>
<body>
<script>
document.write("我是放在前面的 Hello World");
</script>
<p id="p_id">
这里是 p 元素中的内容。
</p>
<script>
document.write("我是放在后面的 Hello World");
</script>
</body>
</html>
运行结果:
2.2 JavaScript 变量、命名及作用域
(1)JavaScript 变量 var:
变量就是一块存储空间,这块存储空间里一开始没有存储值,变量的创建也叫做 声明 ,声明的时候没有给变量赋值:如 var Name,这里用 var 说明我们声明的是一个变量,变量名为 Name,这个时候我们开辟了一块叫做 Name的存储空间,但是里面没有值,变量的赋值用一个 = 表示,如:Name = " BingDwenDwen ",这个时候变量名为 Name 的存储空间里存放的值是字符串"BingDwenDwen",也可以在声明时直接赋值,如:var Name = " BingDwenDwen " ,变量除了赋值字符串还可以赋值数字,函数等。
示例如下:
<script>
var i = 0;//定义当个变量i并赋值为0
var a = 1, b = 2,c = 3;//一次定义3个变量,分别为a,b,c分别赋值为1,2,3,多个变量记得用逗号分隔
document.write(a+b+c)//表示将变量 a, b, c相加,然后输出write()函数的最终结果:1+2+3=6,输出6
</script>
上面的代码用了单行注释符 " // "在后面一一注释,参考注释理解即可。
变量也可以存储表达式,示例如下:
<script>
var i;
var a = 1,b = 2, c = 3;
i = a+b+c;
document.write(i);
</script>
字符串可以赋值给变量,变量可以做加法运算,所以字符串也可以做加法运算
<script>
var i = "Hello";
var a = "BingDwenDwen",b = "!";
i = i+a+b;
document.write(i);
</script>
运行结果:
(2)JavaScript 变量的命名:
- 变量名可以包含字母,数字,下划线和美元符号。
- 变量名必须以字母开头,也可以以$和_开头(一般不这么用),不能以数字开头
- 变量名区分大小写
- 保留字(如JavaScript关键字)不能作为变量名使用
常用命名规制:驼峰命名法和下划线命名法
- 驼峰命名法:形似驼峰,如:BingDwenDwen 或 bingDwenDwen
- 下划线命名法:用下划线分割,如:起一个叫beijing的变量,用下划线分割法是bei_jing
这些命名方法都是为了我们更加方便的阅读代码在同一个项目里用同一种命名方法更加方便理解。
(3)JavaScript 变量的作用域:
- 变量作用域就是变量起作用,可以被用到的区域,根据作用域的大小,变量可以分为全局变量和局部变量,全局变量的作用域大,局部变量的作用域小。
- 如一个变量被定义在一个函数内部,那么这是一个局部变量,局部变量只能在函数内部访问,因为局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量。局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁。
- 变量在函数外定义,即为全局变量。全局变量可以被网页中所有脚本和函数使用(全局作用域),如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 基础入门</title>
</head>
<body>
<script>
var firstName = "san"; //定义全局变量firstName
document.write(firstName + '<br/>'); // 此处可调用 firstName 全局变量
function MyFunction1()
{
var lastName = "zhang";//定义局部变量lastName
document.write(lastName+firstName + '<br/>');
// 函数内可调用 lastName 局部变量和 firstName 全局变量
}
function MyFunction2() {
firstName = "li";
document.write(firstName + '<br/>');//此处可调用 firstName 变量
document.write(lastName + '<br/>');
//这样写不规范,只是为了证明,局部变量怎能用在声明它的函数内部ÿ