JavaScript笔记总结(三)

事件

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

以下是 HTML 事件的实例：

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

JavaScript 可以触发 HTML 页面中的这些事件

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

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo">123</p>
// 点击按钮，‘123’会变为现在的时间

<button onclick="this.innerHTML=Date()">现在的时间是?</button>
//点击按钮，按钮上面的文字会变为现在的时间
//使用 this.innerHTML 修改自身元素的内容

运算符

+	-	*	/	%	++	–
加法	减法	乘法	除法	取模（余数）	自增	自减

运算符	例子	等同于
+=	x+=y	x=x+y
-=	x-=y	x=x-y
*=	x*=y	x=x*y
/=	x/=y	x=x/y
%=	x%=y	x=x%y

对字符串和数字进行加法运算

两个数字相加，返回数字相加的和；两个字符串相加，变量会连接成一个字符串；如果数字与字符串相加，返回字符串。

button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var x=5+5;
	var y="5"+5;
	var z="Hello"+5;
	test1="hello w";
	test2="orld day";
	test3=test1+test2;
	var demoP=document.getElementById("demo");
	demoP.innerHTML=x + "<br>" + y + "<br>" + z + "<br>" + test3 ;
}
</script>

比较与逻辑运算符

比较	运算符	描述
	==	等于（值相等就行）
	===	绝对等于（值和类型均相等）
	!=	不等于
	!==	不绝对等于（值和类型有一个不相等，或两个都不相等）
	>	大于
	<	小于
	>=	大于或等于
	<=	小于或等于
逻辑	&&	and
	||	or
	!	not

条件语句

if语句

if (condition)
{
  当条件为 true 时执行的代码
}

if…else 语句

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

if…else if…else 语句

if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

switch 语句

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:                  //用 default 关键词来规定匹配不存在时做的事情
        与 case 1 和 case 2 不同时执行的代码
}

循环

For 循环

for (语句 1; 语句 2; 语句 3)             
{                                    //语句 1 （代码块）开始前执行
    被执行的代码块                     //语句 2 定义运行循环（代码块）的条件
}                                    //语句 3 在循环（代码块）已被执行之后执行 

for/in 语句循环遍历对象的属性

<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var y="";
	var person={fname:"Yao",lname:"Ge",age:20}; 
	for (x in person){
		y=y + person[x];
	}
	document.getElementById("demo").innerHTML=y;
}
</script>                //输出YaoGe20

while 循环

在指定条件为真（或者伪真）时，会循环执行代码块，不会结束，可能导致浏览器崩溃

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

do/while 循环

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

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

typeof 操作符

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
	typeof 3.14 + " " +
	typeof false + " " +
	typeof {name:'john', age:34};
</script>
//输出number boolean object
//数组是一种特殊的对象类型

null

typeof null 返回 object

null是一个只有一个值的特殊类型。表示一个空对象引用

undefined

typeof undefined 返回 undefined

是一个没有设置值的变量

类型转换

在 JavaScript 中有 6 种不同的数据类型：

• string
• number
• boolean
• object
• function
• symbol

3 种对象类型：

• Object
• Date
• Array

2 个不包含任何值的数据类型：

• null
• undefined

将数字转换为字符串

全局方法 String() 可以将数字，字母，变量，表达式转换为字符串。

（toString() 也有相同的效果）

String(x)            // 将变量 x 转换为字符串并返回
String(123)          // 将数字 123 转换为字符串并返回
String(100 + 23)     // 将数字表达式转换为字符串并返回
String(false)        // 返回 "false"
String(true)         // 返回 "true"
String(new Date())   // 返回此刻的日期时间

将字符串转换为数字

全局方法 Number() 可以将字符串、布尔值、日期转换为数字

Number("3.14")    // 返回 3.14 ||字符串包含数字(如 "3.14") 转换为数字 (如 3.14).
Number(" ")       // 返回 0    
Number("")        // 返回 0    ||空字符串转换为 0
Number("99 88")   // 返回 NaN  ||其他的字符串会转换为 NaN (不是个数字)
Number(d = new Date())   //返回此刻的时间戳

原始值	转换为数字	转换为字符串	转换为布尔值
false	0	“false”	false
true	1	“true”	true
0	0	“0”	false
1	1	“1”	true
“0”	0	“0”	true
“000”	0	“000”	true
“1”	1	“1”	true
NaN	NaN	“NaN”	false
Infinity	Infinity	“Infinity”	true
-Infinity	-Infinity	“-Infinity”	true
“”	0	“”	false
“20”	20	“20”	true
“Runoob”	NaN	“Runoob”	true
[ ]	0	“”	true
[20]	20	“20”	true
[10,20]	NaN	“10,20”	true
[“Runoob”]	NaN	“Runoob”	true
[“Runoob”,“Google”]	NaN	“Runoob,Google”	true
function(){}	NaN	“function(){}”	true
{ }	NaN	“[object Object]”	true
null	0	“null”	false
undefined	NaN	“undefined”	false

参考来源https://www.runoob.com/js/js-type-conversion.html

后续参考https://www.runoob.com/js/js-tutorial.html

本文地址：https://blog.csdn.net/weixin_45663905/article/details/107223807