一、什么是JavaScript?
JavaScript 由Brendan Eich(布兰登·艾克)创建,是一门完备的动态编程语言,可为网站添加交互功能。
JavaScript是一种脚本语言,也就是说它们不需要特殊的准备或编译即可运行。关于脚本语言的具体介绍,可以参考下面这篇文章:什么是脚本语言?
Java与JavaScript没有任何关系。JavaScript 在刚诞生的时候,它的名字叫“LiveScript”。但是因为当时 Java 很流行,所以决定将一种新语言定位为 Java 的“弟弟”会有助于它的流行。
随着 JavaScript 的发展,它已经成为了一门完全独立的语言,并且也拥有了自己的语言规范 ECMAScript。现在,它和 Java 之间没有任何关系。
用JavaScript可以做很多事情,除了使网页更具交互性外,还可以开发桌面端、移动端应用。还可以进行游戏开发、服务器构建等等。关于JavaScript的更多功能介绍可以参考这篇文章:今日的 JavaScript 都能做什么?
JavaScript 代码相当简洁,却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具,可以使 开发工作事半功倍。其中包括很多API(浏览器应用程序接口)、第三方框架和库,使用这些都可以使我们的web开发变得高效、快捷。关于JavaScript的优缺点的更多内容可以参考这篇文章:JavaScript的优缺点。
二、体验一下JavaScript
⭐ 第一步:首先我们打开我们的IDE(顺便复习一下HTML基础知识),这里我用的是webstorm,新建一个名为index.html
的HTML文档,在与标签间输入以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DABIN</title>
</head>
<body>
<h2>我是小明</h2>
</body>
</html>
运行后如图所示:
🚩 如果你还没有下载合适的IDE,不要着急,你可以暂时使用在线编辑器来代替。
⭐ 第二步:然后再创建一个名为 main.js
的JavaScript文件。
<script src="scripts/main.js" defer></script>
⭐ 第四步:把下列代码复制到main.js
文档中:
let myHeading = document.querySelector('h2');
myHeading.textContent = '我是小刚';
⭐ 第五步:运行项目,看看页面与之前有什么不同 ❔
💡 JavaScript 把页面的标题改成了 “我是小刚” 。接下来我们简单解读一下这段代码:首先引入了一个变量myHeading
,然后用querySelector()
函数获取HTML元素h2
的内容,并将其储存在变量myHeading
中 ,最后用myHeading
变量的textContent
属性将h2
元素的内容修改为“我是小刚”
如果你的英文水平一般,那么刚刚的这段解释你有可能有几个单词不怎么认识,这里做一下翻译。
单词 | 翻译 |
---|---|
query | [查询]、询问 |
querySeletor | [查询选择器] |
content | 目录、[内容] |
(注:翻译结果参考“网易有道词典”进行修改)
三、变量(Variable)
变量就是是存储“值”的容器。
变量来源于数学,是计算机语言中能储存计算结果或能表示值的抽象概念。
——百度百科
引入变量需要我们使用关键字let
或var
。如下面这行代码就引入了一个名字为myVariable
的变量:
let myVariable;
🔥 var
与let
的区别:var
关键字与let
大体相同。
行末的分号表示当前语句结束,不过只有在单行内需要分割多条语句时,这个分号才是必须的。不过作为入门者,在句末加上分号也是一个好习惯。
并不是所有的名字都适合为变量名,变量名必须符合下面几点要求:
- 变量必须以字母开头,即不能以数字开头
- 变量也能以 $ 和 _ 符号开头(不过最好不要这么做)
- 变量名称对大小写敏感(如:y 和 Y 是不同的变量)
- 变量名可以是中文(但不推荐)
- 变量名不能是关键字(如let)
- 连字符 ‘
-
’ 不允许用于变量命名
如果你不确定你的变量名是否规范,你可以访问这个网站来验证一下。
变量值顾名思义就是变量的值。变量的值支持的数据类型大体有这几种:
我们可以通过赋值运算符=为变量赋值。
⭐ 第一步:引入(声明)变量(名)
let message;
⭐ 第二步:为变量赋值
let message;
message ='Hello';
💡 为了编写方便,我们可以把一二步合并,代码如下:
let message = 'Hello!';
我们可以对变量多次赋值:
let message;
message = 'Hello!';
message = 'World!'; // 变量值由hello变为world了!
不过需要注意的是,我们不能多次声明同一变量,如下代码:
let message = "This";
let message = "That"; // 对massage声明了2次
四、注释
类似于HTML与 CSS,JavaScript 中可以添加注释。注释可以分为单行注释与多行注释。
单行注释以"//
"开头,如:
// 这是一条注释。
多行注释以“/*
”开始,以“*/
”结尾,如:
/*
这里的所有内容
都是注释。
*/
五、运算符
运算符是一类数学符号,可以根据两个值(或变量)产生结果。我们从学校里了解到过很多运算符,比如说加号+
、乘号*
、减号-
等。
在正式开始前,我们先了解一下常用术语。
运算元就是运算符应用的对象。比如说乘法运算 5 * 2
,有两个运算元:左运算元 5
和右运算元 2
。有时候人们也称其为“参数”而不是“运算元”。
💡 一元运算符:如果一个运算符对应的只有一个运算元,那么它是 一元运算符。比如说一元负号运算符-,它的作用是对数字进行正负转换,如以下代码:
let x =1;
x =-x;
alert( x );// -1
💡 二元运算符:如果一个运算符拥有两个运算元,那么它是二元运算符。如减号:
let x = 1, y = 3;
alert( y - x );
// 2
扩展知识
下表中介绍了一些最简单的运算符,可以自己在IDE或浏览器中尝试一下:
运算符种类远不止这些,不过目前上表已经够用了。
六、条件语句
条件语句是一种代码结构,用来测试表达式的真假,并根据测试结果运行不同的代码。条件语句共有以下几种类型:
常用的条件语句是if ... else
,如下面这个代码:
let name ="小明";
if (name === "小明"){
alert("我就是小明")
}else{
alert("我不是小明啊")
}
解释一下这段代码:我们首先声明了一个变量,并让变量值为“小明
”,如果变量name
的变量值为“小明”
,则显示对话框“我就是小明”,否则显示对话框“我不是小明啊”。你可以试着将第二行代码中的“小明”修改一下,看看会发生什么。
if语句后为条件,条件应被括在()
内,然后后面接需要执行的代码,需要执行的代码应被括在{}
内,else
后的代码也是同理。
七、函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。函数用来封装可复用的功能。如果没有函数,一段特定的操作过程用几次就要重复写几次,而使用函数则只需写下函数名和一些简短的信息。之前已经涉及过一些函数,
比如:document.querySelector
和alert
是浏览器内置的函数,随时可用。
如果代码中有一个类似变量名后加小括号()
的东西,很可能就是一个函数。函数通常包括参数,参数中保存着一些必要的数据。它们位于括号内部,多个参数之间用逗号分开。
我们也可以定义自己的函数,我们使用函数声明创建函数。比如下面这段代码:
function number(num1, num2) {
let result = num1 + num2;
return result;
}
function关键字首先出现,然后是函数名,然后是括号之间的参数列表(用逗号分隔),最后是花括号之间的代码(即“函数体”)。
这里我们就定义了一个名为number
的函数,该函数有2个参数——num1
和num2
。这里我们又引入了一个新变量“result
”,变量值为num1与num2这两个参数相加。最后返回变量“result
”的值。
简单的说就是:我们定义了一个新函数,函数名为“number
”,函数作用是让两个数相加。
我们要使用函数,我们只需像使用alert()
函数一样即可。 先输入函数名称,再输入()
,然后再括号内输入相关参数即可。如以下代码:
function number(num1,num2){
let result = num1 + num2
return result
}
let display= number(2,3)
alert (display)
你可以试着解读一下这段代码。
八、事件
事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是 点击事件,鼠标的点击操作会触发该事件。 可尝试将下面的代码输入到控制台,然后点击页面的任意位置:
let myHTML = document.querySelector('html');
myHTML.onclick = function() {
alert('别戳我,我怕疼。');
};
💡 Document
对象
每个载入浏览器的 HTML 文档都会成为 Document
对象。Document
对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
💡 querySelector()
函数
该函数用于选用文档中匹配指定HTML选择器的一个元素。其语法为:document.querySelector(HTML selectors)
在这里为了便于理解,我们可以简单的将 document.querySelector('html')
看做成一个函数。
这句代码第一行就是选用了html这个元素。
💡 onclick事件
onclick事件就是用户点击了 HTML (如html
、p
)元素。
💡 匿名函数function()
匿名函数就是没有名字的函数。你仔细观察一下这段代码:我们定义了一个函数,这个函数要执行的语句在{}内,但是这个函数没有名字。
🔥 前面的几个说明看不懂没关系,这几句话能看懂就可以了:我们定义了一个变量,这个变量的内容就是html元素,当用户点击这个元素(也就是这整个页面)时,触发了这个匿名函数,浏览器会执行这个匿名函数内的代码。
我们可以让这段代码更简洁一些,就如这样:
document.querySelector('html').onclick = function() {
alert('别戳我,我怕疼。');
}
现在你已经具备了一些 JavaScript 基础,下节课让我们为网页添加一些更酷的特性:图像切换器与用户切换欢迎页面。
文章创作不易,如果你喜欢本文,别忘了点个赞哦!如本文有不当之处,敬请指出。
文章原创,侵权必究