JavaScript的那些事儿 ｜ 青训营笔记

TheWhile
118 阅读9分钟

这是我参与「第四届青训营 」笔记创作活动的第3天

JavaScript 是一门编程语言，可为网站添加交互功能（例如：游戏、动态样式、动画以及在按下按钮或收到表单数据时做出的响应等）。下面我来介绍精彩之处和主要用途。

JavaScript 到底是什么？

JavaScript（缩写：JS）是一门完备的 动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性。由布兰登·艾克（Brendan Eich，Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人）发明。

JavaScript 的应用场合极其广泛，简单到幻灯片、照片库、浮动布局和响应按钮点击，复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。

JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具，可以使 开发工作事半功倍。其中包括：

  • 浏览器应用程序接口(API) —— 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成 3D 图像与音频样本等等。
  • 第三方 API —— 让开发者可以在自己的站点中整合其它内容提供者（Twitter、Facebook 等）提供的功能。
  • 第三方框架和库 —— 用来快速构建网站和应用。

第一步：Hello world!
JavaScript 比 HTML 和 CSS 学习起来更加复杂一点，所以必须一步一个脚印地学习。首先，来看看如何在页面中添加一些基本的 JavaScript 脚本来建造一个“Hello world!”示例

  1. 首先，打开你的测试站点，创建一个名为 scripts 的文件夹。然后在其中创建一个名为 main.js 的文件。
  2. 下一步，在 index.html 文件添加以下代码。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="main.js" defer></script>
</head>
<body>
<h1></h1>
</body>
</html>
  1. 与 CSS 的 <link> 元素类似，它将 JavaScript 引入页面以作用于 HTML（以及 CSS 等页面上所有内容）：
  2. 现在将以下代码添加到 main.js 文件中：
let myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';
  1. 最后，保存 HTML 和 JavaScript 文件，用浏览器打开 index.html。可以看到如下内容：

image.png

发生了什么？

JavaScript 把页面的标题改成了“Hello world!” 。首先用 querySelector() 函数获取标题的引用，并把它储存在 myHeading 变量中。这与 CSS 选择器的用法非常相像：若要对某个元素进行操作，首先得选择它。

之后，把 myHeading 变量的属性 textContent （标题内容）修改为“Hello world!” 。

JavaScript 快速入门

我们来学习一些 JavaScript 的核心特性，从而更好地理解它的运行机制。学习这些知识很有意义，因为这些原理普遍适用于所有编程语言，掌握好它们，可以做到融会贯通。

变量（Variable

变量 (en-US) 是存储值的容器。要声明一个变量，先输入关键字 let 或 var，然后输入合适的名称：

let myVariable;

变量定义后可以进行赋值：

myVariable = '李雷';

也可以将定义、赋值操作写在同一行：

let myVariable = '李雷';

可以直接通过变量名取得变量的值：

myVariable;

变量在赋值后是可以更改的：

let myVariable = '李雷';
myVariable = '韩梅梅';

注意变量可以有不同的 数据类型 ：

变量解释示例
String字符串（一串文本）：字符串的值必须用引号（单双均可，必须成对）扩起来。let myVariable = '李雷';
Number数字：无需引号。let myVariable = 10;
Boolean布尔值（真 / 假）： true/false 是 JS 里的特殊关键字，无需引号。let myVariable = true;
Array数组：用于在单一引用中存储多个值的结构。let myVariable = [1, '李雷', '韩梅梅', 10]; 元素引用方法：myVariable[0], myVariable[1] ……
Object对象：JavaScript 里一切皆对象，一切皆可储存在变量里。这一点要牢记于心。let myVariable = document.querySelector('h1'); 以及上面所有示例都是对象。

那么变量有什么用呢？我们说，编程时它们无所不在。如果值无法改变，那么就无法做任何动态的工作，比如发送个性化的问候，或是改变在图片库当前展示的图片。

注释

类似于 CSS，JavaScript 中可以添加注释。

/*
这里的所有内容
都是注释。
*/

如果注释只有一行，可以更简单地将注释放在两个斜杠之后，就像这样：

// 这是一条注释。

运算符

运算符也叫作操作符。通过运算符可以对一个或多个值进行运算，并获取运算结果。
typeof就是一个运算符，作用是获取一个值的数据类型，它的返回值是一个字符串类型

var a=123;
var result=typeof a;
console.log(typeof result);

结果为String。

算术运算符

+、-、*、/、%等
当对非Number类型的值进行运算时，会将这些值转换为Number然后进行运算。任何值和NaN运算都得NaN。
+ :
如果对两个字符串进行+运算就是将两个字符串相拼接！任何值和字符串进行+运算都会先转换成字符串再进行拼接！也可以利用这一种特点将任意数据类型转换成string类型，只需要将任意数据类型加上一个空串即可！

任何值做-、*、/运算时都会自动转换成Number，可以利用这一特点做隐式的强制类型转换，-0、*1、/1将其转换成Number。

% ：取模运算（去余数）

一元运算符

+（正号）、-（负号）：当对非Number类型的值进行运算时，会将这些值转换为Number然后进行运算。可以对一个其它数据类型使用+，来将其转换成Number，它的原理和Number（）函数一样
e.g.

var result=1++"2"+3;
console.log("result="+result);

结果为result=6

逻辑运算符

！ ：非运算符。取反操作。
&& ：与运算符。
|| ：或运算符。
对于非布尔值的数据类型，会先将其转换成布尔值，再进行逻辑运算。返回的值：
在与运算中：如果第一个值为true，则返回第二个值；如果第一个值为false，则直接返回第一个值。
在或运算中：如果第一个值为true，则直接返回第一个值；如果第一个值为false，则直接返回第二个值。

关系运算符

>  ：大于号关系成立返回true，否则返回false
**>=**大于等于
< : 小于号关系成立返回true，否则返回false
<=:小于等于
对于非数字的类型，会先将其转换成数值在进行比较。
任何值和NaN做任何比较都是false。
如果关系运算符两侧都是字符串，则不会将其转换成数值，而是会比较Unicode字符编码，在比较字符编码时是一位一位进行比较的，如果两位一样，则比较下一位，所以可以借用它来对英文进行排序。

补充：有关Unicode的知识：
在字符串中使用转义字符输入Unicode编码。语法：\u四位编码
在网页标签中使用Unicode编码必须先转换成十进制。语法：&#编码；<h1>&#2620;</h1>

相等运算符

相等运算符“==”用来比较两个值是否相等。相等返回true，否则返回false。
当用相等运算符来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换成相同的类型，然后再比较。
注：1、undefined是衍生于null，所以这两个值做相等判断时，返回的是true
2、NaN和任何值做相等判断都为false，包括他本身。
可以通过isNaN()函数来检查一个值是否是NaN。

不相等运算符!=：用来比较两个值是否不相等。当用不相等运算符来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换成相同的类型，然后再比较。

全等===：判断两个值是否全等，与相等运算符类似，不同的是不会自动进行类型转换。

不全等！==：判断两个值是否不全等，与不相等运算符类似，不同的是不会自动进行类型转换。

条件运算符（三元运算符）

语法：条件表达式？语句1：语句2；
首先对条件表达式进行求值，若为true则执行语句1，若为false则执行语句2.
如果条件表达式的求值结果是一个非布尔值，则会将其转换为布尔值，然后再运算

补充：代码块：
在JS中可以使用{}来为语句进行分组，同一个{}中的语句我们称为是一组语句，要么都执行，要么都不执行。一个{}中的语句我们称为一个代码块，在代码块的后边就不用加;了
JS中的代码块只有分组的作用，代码块中的内容在外部是完全可见的。

流程控制语句

条件判断语句

if语句：if（条件表达式）语句

if(true)
     alert("值为真");

if-else语句：if（条件表达式）{语句一；} else {语句二；}

补充：
prompt（）：可以弹出一个提示框，该提示框中会带有一个文本框，用户可以在文本框只能怪输入一段内容，该函数需要一个字符串作为参数，该字符串将会作为提示框的提示文字

var score=prompt("请输入小明的成绩：");

条件分支语句

switch:条件分支语句。
switch(条件表达式){
case 表达式一：
语句一
break；
case 表达式二：
语句二
break；
case 表达式三：
语句三
break；
default：
语句
break；
}

循环语句

while：先判断再执行
while（条件表达式）{
语句；
}

do…while：先执行循环体，再进行判断
do{
}while（条件表达式）

for循环：
for（初始表达式；条件表达式；更新表达式）{
}

函数

函数也是一个对象。函数中可以封装一些功能（代码），在需要时可以执行这些功能。函数中可以保存一些代码在需要是被调用。

创建函数对象

1、使用new关键字（很少用，几乎不用）

var fun=new Function();

调用函数对象：语法：函数对象（）

fun();

2、使用函数声明来创建一个函数：语法：
function 函数名[形参1，形参2，…]{
语句；
}

3、使用函数表达式创建一个函数
var 函数名=function（[形参1，形参2，…]）{ 语句； }

立即执行函数

立即执行函数：函数顶一万，立即被调用，这种函数被叫做立即执行函数。立即执行函数往往只会执行一次。

(function(a,b){
            console.log("a="+a);
            console.log("b="+b);
        })(123,456);

方法

对象的属性值可以是任何数据类型，函数也可以称为对象的属性，如果一个函数作为一个对象的属性保存，那么我们称这个函数是对象的方法，调用这个函数就说调用对象的方法。

枚举：枚举对象中的属性，使用for… in语句
语法：for（var n in 对象名）{}

var obj={
    name:"周深",
    age: 29,
    address: "贵阳"
};
for(var n in obj){
    console.log("属性名："+n);
    console.log("属性值："+obj[n]); //调用属性值
}

[小结]

JavaScript就讲到这里了，还有更深入的对象等高级应用大家可以关注后续文章深入学习，谢谢

avatar
文章
阅读
粉丝