16. JS events, string and operator

如果是我,If I had fifty-three minutes to spend as I liked,That I will be at my leisure toward a spring of fresh water and.
——《小王子》

1.什么是JS事件

当在 HTML 页面中使用 JS 时, JS 可以触发这些事件.

2.HTML事件

(1)HTML 事件可以是浏览器行为,也可以是用户行为.
比如:
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击
在事件触发时 JS 可以执行一些代码.

(2)HTML 元素中可以添加事件属性,使用 JS代码来添加 HTML 元素.

比如:

//JS代码将修改 id="demo" 元素的内容
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>


//代码将修改自身元素的内容 (使用 this.innerHTML):
<button onclick="this.innerHTML=Date()">现在的时间是?</button>

(3)常见的HTML 事件

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

3.事件可以做什么

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

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

(2) 可以使用多种方法来执行 JS 事件代码：

HTML 事件属性可以直接执行 JS 代码
HTML 事件属性可以调用 JS 函数
可以为 HTML 元素指定自己的事件处理程序
To prevent the occurrence of the event 等等 …

4.JS字符串

(1) 字符串可以是插入到引号中的任何字符.

可以使用单引号或双引号：

var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';

//可以使用反斜杠 (\) 来转义 "Vikings" 字符串中的双引号,如下:
var answer ="We are the so-called \"Vikings\" from the north."

(2)字符串长度
可使用 length 来计算：

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

(3)转义字符 () 可以用于转义撇号,换行,引号,等其他特殊字符.

\'	单引号
\"	双引号
\\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

(4)可以使用 new 关键字将字符串定义为一个对象：

var firstName = new String("John")
var x = "John";
var y = new String("John");
typeof x                     // 返回 String
typeof y                    // 返回 Object

(5)字符串属性和方法
原始值字符串,如 “John”, 没有属性和方法(因为他不是对象).
原始值可以使用 JS的属性和方法,因为 JS 在执行方法和属性时可以把原始值当作对象.

//属性 描述
constructor	          //返回创建字符串属性的函数
length	              //返回字符串的长度
prototype	          //允许向对象添加属性和方法

5.JS运算符

(1)算术运算符

运算符	描述	  例子	  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	     6		      6	
		     x=y++	      5		       6	
--	  自减	x=--y	     4		      4	
		     x=y--	      5		       4	

(2)赋值运算符

运算符	例子		等同于		  运算结果	
=	  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)对字符串和数字进行加法运算

两个数字相加,返回数字相加的和,如果数字与字符串相加,返回字符串

x=5+5;
y="5"+5;
z="Hello"+5;
//输出结果： 10 55 hello5

6.JS比较

(1)比较运算符

运算符	      描述		比较		 返回值	
==	        等于		  x==8		false	
			           x==5		  true	
===	       绝对等于	    x==="5"		false	
			           x===5	  true	
!=	       不等于		 x!=8		true	
!==	      不绝对等于  	x!=="5" 	true	
			           x!==5		false	
>	       大于		  x>8		 false	
<	       小于		  x<8		 true	
>=	     大于或等于	    x>=8		false	
<=	     小于或等于	    x<=8		true

(2)逻辑运算符

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