JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

文章目录

一、了解 JavaScript
二、JavaScript 基本使用
- 2.1、与html结合
- 2.2、数据类型
- - 2.2.1、定义number类型
  - 2.2.2、定义string类型
  - 2.2.3、定义boolean类型
  - 2.2.4、定义null类型
- 2.3、JS 变量定义
三、JavaScript 运算符
- 3.1、算术运算符
- 3.2、赋值运算符
- 3.3、比较运算符
- 3.4、逻辑运算符
四、JavaScript 流程控制
- 4.1、switch 语句
- 4.2、while 循环
- 4.3、do/while 循环
- 4.4、for 循环

一、了解 JavaScript

JavaScript 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。js 可以增强用户和 html 页面的交互过程，可以控制 html 元素，让页面有些动态效果。

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

二、JavaScript 基本使用

2.1、与html结合

① 内部 JS
书写格式：

<script type="text/javascript">// 书写js代码
</script>

② 外部 JS
建立一个 js 文件书写 js 代码，然后再 html 文件导入：

<script src="xxx.js" type="text/javascript" charset="utf-8"></script>

2.2、数据类型

原始数据类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、NaN。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

2.2.1、定义number类型

number 类型可以定义的有：整数、小数、NaN

如：

var a = 1
var b = 1.2
var c = NaN

2.2.2、定义string类型

string 类型定义的值记得加" "或' '，如：

var str = "hello";
var str2 = "你好";
var str3 = '你好';

2.2.3、定义boolean类型

boolean 类型的值只有两种：true 、false，如：

var a = true;
var b = false;

2.2.4、定义null类型

null类型的赋值也有两种类型：null、undefined

var a = null;
var b = undefined;

注意：null 类型进行 typeof 操作符后，结果是 object，原因在于，null 类型被当做一个空对象引用

2.3、JS 变量定义

在 JavaScript 中创建变量通常称为"声明"变量。

我们使用 var 关键词来声明变量（有两种方式）：

方式一-先声明后赋值：

var name;   //变量声明之后，该变量是空的（它没有值）。
name="ww";   //为声明的变量赋值

方式二-在声明变量时对其赋值：：

var name="ww";

注意：
①每一行完整语句后面加分号

② 可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

var name="ww", age=20, sex="man";

③ 在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。
如：

var name;   //在执行过以下语句后，变量 name 的值将是 undefined：

④ 如果重新声明 JavaScript 变量，该变量的值不会丢失。如：

var name="ww";
var name;  //这两条语句执行后，变量 name 的值依然是 "ww"

⑤严格区大小写，并且变量名不能使用关键字和保留字。

三、JavaScript 运算符

3.1、算术运算符

y=5，下面的表格解释了这些算术运算符：

运算符	描述	例子	x 运算结果	y 运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法	x=y/2	2.5	5
%	取模（余数）	x=y%2	1	5
++	自增	x=++y x=y++	6 5	6 6
–	自减	x=–y x=y–	4 5	4 4

对于算术运算符要注意的是：字符串和数字之间的相加减，以及布尔类型和字符、数字之间的相加减。

示例：

var num = 4;
var str1 = '2';
var bol = true;//1、字符串和数字之间的相加减
document.write(num+str1);  // 42
document.write(str1+num);  //24
document.write(num-str1);  //2
document.write(str1-num);  //-2//2、布尔类型和字符类型相加减
document.write(str1+bol);  //2true
document.write(bol+str1);  //true2
document.write(bol-str1);  //-1
document.write(str1-bol);  //1//3、数字和布尔类型相加减  布尔值true相当于1  false相当于0
document.write(num+bol); //5
document.write(bol+num);  //5
document.write(bol-num);  //-3
document.write(num-bol);  //3

一元运算符：++ 、--、 +（正号）、 -（负号）

示例 1(自增)：
（自减和自增差不多，这里就不演示了）

var a = 3;
a++;//相当于a = a+1;  a = 4var b = 4;
var c = ++b;  //5
var d = b++;  //4
//注意到c和d的值不一致,原因: c的话很容易理解b自增1后赋给c; b++后会临时开辟一块内存区,该内存区存放值是5，但实际赋值给d的是b的内存区并不是这个临时内存区。

这里有些人可能会有些疑问：为什么要有正号(+) 有这个必要么？

其实，我们在写正整数时正号的确是可以省略，但是如果运算数不是运算符所要求的类型呢？如：var a = +'2' 。这时正号的意义就显现出来了，js会自动进行类型的转换，接下来看下这几个示例你就会更明白正号的其他用法了：

// 字符串转为number，若为数字则按照字面值转换,若不为数字则为NaN
var e = +"222";   //e=222
alert(typeof e);  //number
var f = +"ww";   //NaN// boolean转为number:true转为1 false 转为0
var flag = +true;  //flag=1
var flag2 = +false;  //flag2=0

(注意：用负号js一样会转换，但相比与正号数字前面会多个-(负号))

3.2、赋值运算符

赋值运算符用于给 JavaScript 变量赋值。

给定 x=10 和 y=5，下面的表格解释了赋值运算符:

运算符	例子	等同于	运算结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

3.3、比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。

x=5，下面的表格解释了比较运算符：

运算符	描述	比较	返回值
==	等于	x==8 x==5	false true
===	绝对等于（值和类型均相等）	x===“5” x===5	false true
!=	不等于	x!=8	true
!==	不绝对等于(值和类型有一个不相等，或两个都不相等)	x!=="5" x!==5	true false
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

3.4、逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3，下表解释了逻辑运算符：

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
\| \|	or	(x5\| \| y5) 为 false
!	not	!(x==y) 为 true

注意：

true && false --->false
true && true ---->true
false && false --->false
false && true ---->falsetrue || false --->true
true || true --->true
false || true --->true
false || false --->false

四、JavaScript 流程控制

4.1、switch 语句

switch 语句用于基于不同的条件来执行不同的动作。

语法

switch(n)
{case 1:执行代码块 1break;case 2:执行代码块 2break;default:与 case 1 和 case 2 不同时执行的代码
}

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

实例

var d=1;
switch (d)
{ case 0:x="今天是星期日"; break; case 1:x="今天是星期一"; break; case 2:x="今天是星期二"; break; case 3:x="今天是星期三"; break; case 4:x="今天是星期四"; break; case 5:x="今天是星期五"; break; case 6:x="今天是星期六"; break; default:alert("默认的");break;
}

注意：default 关键词是用来规定匹配不存在时做的事情。比如上面例题，如果d不是0-6那么就会执行 default里的语句。

4.2、while 循环

while 循环会在指定条件为真时循环执行代码块。

语法

while (条件)
{需要执行的代码
}

实例

while (i<5)   //只要变量i小于 5,循环将继续运行
{x = x + "The number is " + i + "<br>";i++;
}

4.3、do/while 循环

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

语法

do
{需要执行的代码
}
while (条件);

实例

do    //该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行
{x=x + "The number is " + i + "<br>";i++;
}
while (i<5);

4.4、for 循环

for 循环是您在希望创建循环时常会用到的工具。

语法

for (语句 1; 语句 2; 语句 3)
{被执行的代码块
}

注意：
①语句 1(代码块)开始前执行；
②语句 2 定义运行循环(代码块)的条件；
③语句 3 在循环(代码块)已被执行之后执行。

实例

for (var i=0; i<5; i++)
{x=x + "该数字为 " + i + "<br>";
}

有想学习 JavaScript 基本运用的可以看看我这几篇博客：
学习笔记（六）——JavaScript（三）
学习笔记（五）——JavaScript（二）

学习笔记（四）——JavaScript（一）相关推荐

JavaScript学习笔记(四)(DOM)
JavaScript学习笔记(四) DOM 一.DOM概述二.元素对象 2.1 获取方式 (1).通过ID获取一个元素对象,如果没有返回null (2).通过`标签名`获取一组元素对象,,如果没有返 ...
JavaScript-WebGL2学习笔记四-蒙板
stencil test(蒙板) demo的显示效果这个例子由四个源文件构成 webgl.html <html> <head><!--Title: JavaScript ...
C#可扩展编程之MEF学习笔记(四)：见证奇迹的时刻
前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
IOS学习笔记(四)之UITextField和UITextView控件学习
IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...
RabbitMQ学习笔记四：RabbitMQ命令（附疑难问题解决）
RabbitMQ学习笔记四:RabbitMQ命令(附疑难问题解决) 参考文章: (1)RabbitMQ学习笔记四:RabbitMQ命令(附疑难问题解决) (2)https://www.cnblogs. ...
JSP学习笔记(四十九)：抛弃POI，使用iText生成Word文档
POI操作excel的确很优秀,操作word的功能却不敢令人恭维.我们可以利用iText生成rtf文档,扩展名使用doc即可. 使用iText生成rtf,除了iText的包外,还需要额外的一个支持rt ...
Ethernet/IP 学习笔记四
Ethernet/IP 学习笔记四 EtherNet/IP Quick Start for Vendors Handbook (PUB213R0): https://www.odva.org/Port ...
OpenCV学习笔记四-image的一些整体操作
title: OpenCV学习笔记四-image的一些整体操作 categories: 编程 date: 2019-08-08 12:50:47 tags: OpenCV image的一些操作 sP4 ...
吴恩达《机器学习》学习笔记四——单变量线性回归（梯度下降法）代码
吴恩达<机器学习>学习笔记四--单变量线性回归(梯度下降法)代码一.问题介绍二.解决过程及代码讲解三.函数解释 1. pandas.read_csv()函数 2. DataFrame ...
esp8266舵机驱动_arduino开发ESP8266学习笔记四—–舵机
arduino开发ESP8266学习笔记四-–舵机使用时发现会有ESP8266掉电的情况,应该是板上的稳压芯片的限流导致的,观测波形,发现当舵机运转时,电源线3.3V不再是稳定的3.3V,大概是在3 ...

学习笔记（四）——JavaScript（一）