JavaScript 基础

最新推荐文章于 2020-04-27 09:33:16 发布

翻译最新推荐文章于 2020-04-27 09:33:16 发布 · 3.3k 阅读

Other 专栏收录该内容

59 篇文章

订阅专栏

本文介绍JavaScript的基础知识，包括语言特性、基本语法、事件处理等，并通过实例演示如何创建动态网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 什么是JavaScript

JavaScript 简称 JS，是一种非常成熟的动态编程语言，为HTML文档提供动态交互功能。由Mozilla项目的联合创人，Mozilla基金会和Mozilla公司的Brendan Eich开发，JavaScript 和Java是两种完全无关的语言，语法及应用各不相同。

JavaScript非常灵活，从响应按钮点击到开发游戏，动画以及数据库驱动应用程序都能完成。

JavaScript提供的功能包括：

浏览器应用程序编程接口（API） - API 内建到Web浏览器中，可以动态创建HTML，设置CSS样式，可以从用户的网络摄像头收集和处理视频流，还能够生成3D图形和音频样本。
第三方API，允许开发人员在其网站上合并其他内容提供商（如Twitter或Facebook）的功能。
可以应用于HTML的第三方框架和库，以实现快速构建网站和应用程序。

2 Hello World

先创建一个文件夹叫做scripts, 在scripts内新建一个main.js文件，内容如下：

var myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';

在scripts文件夹外部新建一个index.html文件，在结束的</body>标签之前加入下列语句:

<script src="scripts/main.js"></script>

index.html内容如下：

<!DOCTYPE html>
<html> 
    <head>   
        <meta charset="utf-8">   
        <title>My test page</title>    
    </head> 
    <body>
        <h1>Mozilla is cool</h1>
        <p>At Mozilla, we are a global community of</p>
        <ul> <!-- changed to list in the tutorial -->
            <li>technologists</li>
            <li>thinkers</li>
            <li>builders</li>
            </ul>   
        <script src="scripts/main.js"></script>
    </body>
</html>

打开index.html文件，就会发现h1标签的内容被替换成了Hello World！：

Hello world!

At Mozilla, we are a global community of

technologists
thinkers
builders

之所以将 <script src="scripts/main.js"></script>加在结束标签之前，是因为，浏览器按照HTML在文件中出现的顺序加载，如果首先加载JavaScript，它有可能不工作。因此，将JavaScript放在文件末尾之前通常是最好的策略。

函数querySelector()用于抓取heading的引用，然后将引用存储到名为myHeading的变量中。上述特征是 Document Object Model (DOM) API 的一部分，用以操作文档。

3 基本语法

3.1 变量

变量用于存储值，声明变量用var关键字，结束的分号不是必须的：

var myVariable;

JavaScript 对大小写敏感，变量的使用同其他语言：

var myVariable = 'Bob';
myVariable = 'Steve';

变量的数据类型：

变量	说明	例子
String	文本序列，为表明值为字符串，必须将值放在引号中	`var myVariable = 'Bob';`
Number	不用引号	`var myVariable = 10;`
Boolean	True/False 值， The words `true` 和`false`在JS中是关键字, 不需要引号	`var myVariable = true;`
Array	在单一引用中存储多个值的结构	`var myVariable = [1,'Bob','Steve',10];`引用数组成员: `myVariable[0]`, `myVariable[1]`等
Object	基本上什么都算上，JS中的一切都是对象, 可以存储在变量中。	`var myVariable = document.querySelector('h1');` 包括以上所有的例子

3.2 注释

注释方法同C/C++:

/*
Everything in between is a comment. 
*/
// 单行可以这样注释

3.3 操作符

操作符	说明	符号	例子
加	可以加两个数字，也可以加两个字符串.	+	`6 + 9; "Hello " + "world!";`
减, 乘, 除	同数学含义	-, *, /	`9 - 3; 8 * 2; 9 / 3;`
赋值	将值赋给变量	=	`var myVariable = 'Bob';`
相等	判断两个值是否相等，返回true或false.	===	`var myVariable = 3; myVariable === 4;`
非, 不等	值取反，或者判断两个值是否不等	!, !==	`var myVariable = 3;!(myVariable === 3);`，`var myVariable = 3; myVariable !== 3;`

3.4 条件

即 if else 结构：

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
    alert('Yay, I love chocolate ice cream!');    
} else {
    alert('Awwww, but chocolate is my favorite...');    
}

3.5 函数

可以随时调用浏览器内建的函数，例如：

var myVariable = document.querySelector('h1');
alert('hello!');

也可以自定义函数，例如：

function multiply(num1,num2) {
    var result = num1 * num2;
    return result;
}

3.6 事件(Event)

要实现真正的交换，需要使用事件，事件为监听浏览器中发生事件的代码，然后以执行代码作为响应。

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

这里选择元素，将它的onlick handler属性设为一个匿名(无名)函数，这个函数包含了点击事件要执行的代码。

代码：

document.querySelector('html').onclick = function() {};

和代码

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

是等价的，只是前面的写法更短。

4 Supercharging our example website

4.1 添加 image changer

新建一个images文件夹，里面放两种尺寸相同或相近的图片，名称分别为firefox-icon.png和firefox2.png，然后在网页中先使用标签嵌入其中一张图片

<img src = 'images/firefox-icon.png'/>

，在JavaScript中加入下面的代码, 加载index.html, 点击图片，自动切换成另一张图片，再点击一下，又切换回来:

var myImage = document.querySelector('img');
myImage.onclick = function() {
    var mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute ('src','images/firefox2.png');
    } else {
      myImage.setAttribute ('src','images/firefox-icon.png');
    }
}

4.2 添加自定义的欢迎信息

在index.html中增加一个按钮：

<button>Change user</button>

然后 main.js中增加以下内容：

var myButton = document.querySelector('button');
var myHeading = document.querySelector('h1');

function setUserName() {
  var myName = prompt('Please enter your name.');
  localStorage.setItem('name', myName);
  myHeading.textContent = 'Mozilla is cool, ' + myName;
}
if(!localStorage.getItem('name')) {
  setUserName();
} else {
  var storedName = localStorage.getItem('name');
  myHeading.textContent = 'Mozilla is cool, ' + storedName;
}
myButton.onclick = function() {
  setUserName();
}