学习笔记——JavaScript

Posted 2021-06-07 别呀

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习笔记——JavaScript相关的知识，希望对你有一定的参考价值。

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

文章目录

一、了解 JavaScript
二、JavaScript 基本使用
三、JavaScript 运算符
四、JavaScript 流程控制

一、了解 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 = 4

var 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 ---->false

true || false --->true
true || true --->true
false || true --->true
false || false --->false

四、JavaScript 流程控制

4.1、switch 语句

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

语法

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    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的主要内容，如果未能解决你的问题，请参考以下文章

ReactJs学习笔记01

Javascript MVC 学习笔记视图和模板

译文：18个实用的JavaScript代码片段，助你快速处理日常编程任务

[原创]java WEB学习笔记61：Struts2学习之路--通用标签 property，uri，param,set,push,if-else,itertor,sort,date,a标签等(代码片段

如鹏网学习笔记JavaScript

Javascript学习笔记：闭包题解