JavaScript 基础语法 02

据类型

在 JavaScript 中定义变量的时候使用的是 let/var，例如：

let num=18
let str='18'

这两种方式定义的变量有什么区别呢？这里定义的两个变量 num 和 str 的数据类型不同。例如：描述年龄和工资通过数字来描述，注册某个网站的时候使用的账号和昵称可以是英文字母的组合。不同的数据是由不同的类型来描述的。

下面我们就开始学习 JavaScript 中的数据类型。

JavaScript 中的数据类型可以分为两大类：基本数据类型、复杂数据类型。

简单数据类型

Number
String

Boolean
null

undefined
BigInt - 新增

Symbol - 新增

复杂数据类型

Object

简单数据类型

简单数据类型又叫基本数据类型、原始数据类型(MDN)。

这里我们先来学习简单数据类型中的前5种。

Number 类型

在 JavaScript 中整数(5, 6, 10)和浮点数(11.5, 1.1)都属于 Number 类型，也就是所有的数值类型都是 Number 类型。

数值字面量

数值的固定值表示法
通俗点说就是用字面的形式来代表这种类型的数据

110、1024、60.5

数值判断

NaN：not a number，JavaScript 中一个特殊的值，即非数字
isNaN：is not a number，JavaScript 中的一个方法用来判断一个值是否不是数字

示例

// 返回 NaN，不是一个数字
let n=5 * 'a';

// 返回 false，即不管带不带引号都是一个数字
isNaN('5');
isNaN(5);

// 返回 true，不是一个数字
isNaN('a');

注意：在控制台中打印的数值类型的值是有颜色的。

String 类型

把多个字符组成一串，就是一个字符串。
字符串字面量：字面形式来代表字符串数据

'程序猿'，"程序媛"

定义字符串的时候用单引号和双引号都可以

let userName='jiaoshou';
let nickName="教瘦";

在定义字符串的时候我们推荐使用单引号，这是因为 HTML 中属性值使用双引号包裹，有的时候 HTML 和 JavaScript 可能会嵌套书写，为了区分 HTML 的属性和 JavaScript 中的字符串，所以这里始终推荐字符串使用单引号。

转义符

你尝试打印 '教瘦'，注意打印的结果中要包含单引号。实现不了吧？这是因为引号在 JavaScript 中有特殊的含义，如果我们想要打印引号的话，可以取消引号在 JavaScript 中的特殊含义

let userName='\'教瘦\'';
console.log(userName);

\ 在这里的作用是取消后面修饰符号的特殊含义，类似的内容，见下表：

Boolean 类型

布尔类型是一种专门为了编程设置的一种语法，主要用来表示一个结果的成立与否，其值只有两个 true (真) 和 false (假)。

Boolean 字面量： true 和 false，区分大小写
计算机内部存储：true 为1，false 为0

undefined 类型

undefined 类型只有一个值：undefined。代表变量定义了，但是没有赋值。

var a;
// 输出 undefined
console.log(a);

// or
let b;
// 输出 undefined
console.log(b);

null 类型

null 类型只有一个值：null。代表变量赋值了，但是值代表的是空。

var a=null;

let b=null;

// 变量a和b都赋值了，值为 null

复杂数据类型

复杂数据类型：Object。因为比较复杂所以后面专门学习。

获取变量的类型

在 JavaScript 中定义变量的时候是通过 var/let 定义的变量，也就是在定义变量的时候没有确定数据的类型。

let a=10;
a='abc';

甚至在代码执行的过程中可以对变量重新赋值不同的类型(这样是不推荐的，我们希望同一个变量中的数据是同一数据类型的)。

我们如果想要知道某个变量中存储的数据类型，可以通过关键字 typeof 来获取。

用法：

typeof 字面量/变量
typeof (字面量/变量)

注意：typeof 是关键字。

let a=10;
console.log(typeof a); // number
console.log(typeof 'Hello'); // string
console.log(typeof true); // boolean
console.log(typeof undefined); // undefined
console.log(typeof null); // object

注意：typeof 返回的结果是字符串类型。

快速查看数据类型

如何使用谷歌浏览器，快速地查看数据类型？

在控制台通过 console.log() 打印数据，字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是紫色的，undefined 和 null 是灰色的(如果看到黑色的说明是字符串)

注释

其实学习任何一门语言之前，最应该先学习的语法就是注释语法，这样我们就可以在代码中写一些说明和笔记之类的 JavaScript 里面的注释有两种：单行注释、多行注释。

单行注释

用来描述下面一个或多行代码的作用
VSCode 中的快捷键：Ctrl + /

// 这是一个变量
let nickName='js';

多行注释

用来注释多条代码
VSCode 中的快捷键：Shift+ Alt + A

)HTML标签

1.1 双标签有:<html></html>,<head></head><title></title>等

1.2 单标签有:<br/>,<hr/>,<img/>等

2标签属性

标签的属性现在暂时写在标签内,其格式为属性名="属性值"

属性值:HTML中属性值既可以用单引号括起来,也可以用双引号括起来或者不用引号都可以(不推荐)单双引号一定要配对出现

3)HTML注释: HTML与XML一样使用来做注释

4)常见标签

1) meta: meta标签需要写在head标签中,meta属性及值有两种写法

1.1 指定name:<meta name=“名字” content=“值” />网页的描述信息。

比如:<meta name=“keywords” content=“网页关键词,有助于SEO”/>

1.2 指定http-equiv:<meta http-equiv="名字" content="值" />模拟http响应头信息。

比如:<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />指定网页编码,防止网页中的中文出现乱码

2)h1-h6标签一般用于标题,表示字体的大小,h1最大h6最小,有助于SEO

3)<p></p>与<br/>标签作用都是换行

<p>标签前后会有比较大的空白一般用于段落,<br/>标签只是换行

4)<center></center>使页面内容居中显示

5)<b>文字显示为粗体</b>与<strong>文字显示为粗体粗体(推荐)</strong>

6)<i>文字显示为斜体</i> 7)<u>文字带下划线</u> 8)<em>文字显示为斜体</em>

9) <sup>2</sup>上标,比如10的平方：10<sup>2</sup>

<sub>2</sub>下标,比如水的化学式：H<sub>2</sub>O

10)<pre></pre> 预格式化可以在页面原样输出

<!DOCTYPE html>
<html>
<head>
  <title>常见标签与属性</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>  
    <h1>预祝大家虎年快乐</h1>
    <h2>预祝大家虎年快乐</h2>
    <h3>预祝大家虎年快乐</h3>
    <h4>预祝大家虎年快乐</h4>
    <h5>预祝大家虎年快乐</h5>
    <h6>预祝大家虎年快乐</h6>
    致敬所有抗疫人员<br />
    你们辛苦了!!!<br />
    <p>致敬所有边防军人,消防员,警察等</p>
    <p>祝你们虎年快乐,身康体健</p>
  <center>居中显示</center>
  <b>文字显示为粗体</b>与<strong>文字显示为粗体粗体(推荐)<strong/><br>
  <i>文字显示为斜体</i>与<em>文字显示为斜体(推荐)</em> <u>文字带下划线</u><br/>
  10<sup>2</sup> <br/><!--水的化学式-->
  H<sub>2</sub>O <br/><!--10的平方-->
  <pre>
      葡萄美酒夜光杯，欲饮琵琶马上催。 
      醉卧沙场君莫笑，古来征战几人回？
  </pre>
  </body>
</html>

显示效果

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

单引号:

<some-HTML-element some-event='some JavaScript'>

双引号:

<some-HTML-element some-event="some JavaScript">

在以下实例中，按钮元素中添加了 onclick 属性 (并加上代码):

实例

<button onclick='getElementById("demo").innerHTML=Date()'>现在的时间是??</button>

以上实例中，JavaScript 代码将修改 id="demo" 元素的内容。

在下一个实例中，代码将修改自身元素的内容 (使用 this.innerHTML):

实例

<button onclick="this.innerHTML=Date()">现在的时间是?</button>

	JavaScript代码通常是几行代码。比较常见的是通过事件属性来调用：

实例

<button onclick="displayDate()">现在的时间是?</button>

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

更多事件列表: JavaScript 参考手册 - HTML DOM 事件。

JavaScript 可以做什么?

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性
等等 ...

可以使用多种方法来执行 JavaScript 事件代码：

HTML 事件属性可以直接执行 JavaScript 代码
HTML 事件属性可以调用 JavaScript 函数
你可以为 HTML 元素指定自己的事件处理程序
你可以阻止事件的发生。
等等 ...

	在 HTML DOM 章节中你将会学到更多关于事件及事件处理程序的知识。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：JavaScript 调用提速 40% 的实践
下一篇：.net文件夹上传源码

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商