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