JavaScript初探 二 （了解数据）

JavaScript初探 （二）

JavaScript 事件

HTML事件

• HTML事件是可以在浏览器或用户做的某些事情

• HTML事件的例子：

  • HTML网页完成加载
  • HTML输入字段被修改
  • HTML按钮被点击

  通常，当事件发生时，用户会希望做某些事情，JavaScript则允许您在事件被侦测时执行代码。

  通过JavaScript代码，HTML允许您向HTML元素添加事件处理程序

  <element event = 'JavaScript'> ;	//使用单引号
  <element event = "JavaScript"> ;	//使用双引号
  

  • 实例：

  <button onclick = 'document.getElementById("demo").innerHTML = Data()' >
      当前时间：
  </button>
  

  实例中，onclick 属性（代码）被添加到 元素中

  onclick会生成一个按钮属性，执行后续的代码，由此形成一个HTML事件。

  • 实例：

  <button onclick = "this.innerHTML = Date()">
      当前时间：
  </button>
  

  实例中，使用 this.innerHTML=Date() 改变自身元素的内容

  • 实例：

  <button onclik = "displayDate()">
      当前时间：
  </button>
  

常见的HTML事件

事件	描述
onchange	HTMl元素被改变
onclick	用户点击HTML元素
onmouseover	用户鼠标接触HTML元素上
onmouseout	用户鼠标离开HTML元素
onkeydown	用户按下键盘按键
onload	浏览器完成页面加载

JavaScript可以做的事情

• 事件处理程序可以用于处理、验证用户输入、用户动作、浏览器动作：
  • 页面加载时应该做的事情
  • 页面关闭时应该做的事情
  • 用户点击按钮时被执行的动作
  • 用书输入数据时应该验证的内容
  • ……
• JavaScript处理事件的方法：
  • HTML事件属性可执行JavaScript代码
  • HTML时间属性能够调用JavaScript函数
  • 向HTML元素分配自己的事件处理函数
  • 阻止事件被发送或被处理
  • ……

---

JavaScript 字符串

特殊字符

• 由于字符串必须有引号包围，JavaScript会误解字符串
• 为了避免使用引号的时候被Javascript误解，可以使用转移字符

代码	结果	描述
\ '	'	单引号
\ "	"	双引号
\ \	\	反斜杠
\ b		退格
\ f		换页
\ n		跳到新的一行
\ r		回车
\ t		水平制表符
\ v		垂直制表符

字符串可以是对象

• 通常，JavaScript字符串是原始值，通过字面方式创建：

var firstName = "Bill" ;

• 但是字符串也可以通过关键字 new 定义为对象：

var firstName = new String("Bill") ;

• 实例：

var x = "Bill" ;
var y = new String ("Bill") ;

typeof x ;  //返回String
typeof y ;  //返回object

不建议将字符串创建为对象，会拖慢执行速度，

new 关键字会使代码复杂化

当使用 == 运算时，为 true

当使用 === 运算时，为 false

var x = "Bill" ;
var y = new String ("Bill") ;

x == y ; //true
x === y ; //false

字符串内建方法和属性

字符串长度

• lenght：返回字符串的长度

字符串变量.length;

var txt = "I am is Student" ;
var len = txt.length ;
// 输出txt的长度：len=15

查找字符串中的字符

• indexof(char)：返回字符串中指定的字符首次出现的位置索引

  字符串变量.indexof(size);

var str = "I want world peach" ;
var pos = str.indexof("w");

JavaScript 从零开始计算位置。

• lastIndexof(char) ：返回字符串指定字符最后出现的位置索引

var pos = str.lastIndexo("w");

如果 indexof() 和 lastIndexof() 均为找到，会返回 -1

检查字符串中的字符串

• search(char) ：搜索特定值的字符串，并返回匹配的位置

  字符串变量.search(char);

var str = "I want world peach" ;
var pos = str.search("w")

提取部分字符串

• 提取方法：

  slice(start , end) ;

  substring(start , end);

  substr(start , length);

slice()方法

• slice() 提取字符串的某个开始部分并在新字符串中返回被提取的部分。
• 该方法设置两个参数： 起始索引，终止索引（字符串从零开始索引）
• 实例：

var str = "Refueling Huawei Refueling China";
var res = str.slice(7,13);
// 结果：Huawei

> 如果省略第二个参数，则会以第一个参数开始，到字符的最后。

var res = str.slice(17);
// 结果：Refueling China

如果参数为负数，则是从尾部开始从零计数

var res = str.slice(-5);
// 结果：China

substring()方法

• substring() 类似 slice()，不同之处在于 substring() 无法接收负的索引。

substr()方法

• 类似与slice()，不同之处在于 substr() 的第二个参数规定的是被提取的长度。

var str = "Refueling Huawei Refueling China";
var res = str.substr(10,6);
// 结果：Huawei

如果省略了第二参数则会截取开始位置剩下的所有字符

如果参数为负数，则从字符串的结尾开始计算位置（从零开始）

第二个参数不能为负数

替换字符串内容

• replace()：用另一个值替换字符串中指定的值。

var str = "Refueling Huawei Refueling China";
var rep = str.replace("Huawei","China");
// 结果：Refueling China Refueling China

replace方法调用不会改变字符串的原有内容，只会在替换后，返回一个新的字符串。

默认的，replace只替换首个匹配到的字符(串)。

默认的，replace对大小写敏感区分，如果要忽略大小写区分，可以使用正则：/ i

var str = "Refueling Huawei Refueling China";
var rep = str.replace("/HUAWEI/i","China");
// 结果：Refueling China Refueling China

注意：正则表达式不带引号。

var str = "Refueling Huawei Refueling China Refueling Huawei Refueling China Refueling Huawei Refueling China ";
var rep = str.replace("/Huawei/g","China");
// 结果：Refueling China Refueling China Refueling China Refueling China Refueling China Refueling China

如需替换所有匹配，使用正则的 /g 标志（用于全局搜索）——如上

大小写转换

• toUpperCase()：全部转为大写

var txt = "Huawei Refueling";
var Upptxt = txt.toUppercase();
// 结果：HUAWEI REFUELING

• toLowerCase() ：全部转为小写

var txt = "Huawei Refueling";
var Upptxt = txt.toLowercase();
// 结果：huawei refueling

concat()方法：连接字符

• concat()：连接两个或多个字符

var str = "Huawei Refueling";
var str1= "China Refueling";
var txt = str.concat(" & ",str1);
// 结果：Huawei Refueling & China Refueling

concat()方法可用于代替加运算符；如下是等效的两条：

var txt = "Huawei Refueling" + " & " + "China Refueling";
var txt = "Huawei Refueling".concat(" & ","China Refueling");
// 结果：Huawei Refueling & China Refueling
// 1,2 行代码的结果是等效的

改变的不是字符串，只是生成了一个新的字符串

String.trim()

• trim()：删除字符串两端的空白字符

var str = "    Huawei Refueling    ";
var txt = str.trim();

提取字符串字符

• 方法：
  • charAt(position)
  • charCodeAt(position)

charAt()方法

• charAt()：返回字符串中指定下标索引的字符

var str = "Huawei Refueling";
var txt = str.charAt(7);
// 结果：R

charCodeAt()方法

• charCodeAt()：返回字符串中指定索引的字符的 unicode编码

var str = "Huawei Refueling";
var txt = str.charCodeAt(7);
// 结果：82

属性访问

var str = "Huawei Refueling";
str[0];
//结果：H

• 问题：
  • 不适合早起版本
  • 看着像数组实际上不适数组
  • 如果找不到字符，[] 返回 undefined ，而charAt() 返回空字符串
  • [] 是只读的；str[0] = "A" ; 不会产生错误，因为，str[]不支持存入的

字符串转数组

• split()：字符串转为数组

var str = "a,b,c,d,e";
str.split(",");		// 逗号分隔
str.split("|");		// 竖线分隔
str.split(" ");		// 空格分隔
// 以指定的字符作为分隔条件将str字符串转为数组

如果没有分隔条件约束，字符串将包含到一个数组空间中即：str[0]=a,b,c,d,e

如果分隔符是""，返回的是间隔单个字符的数组

var str = "Huawei";
str.split("") ;

---

JavaScript 数字

JavaScript 数值

书写JavaScript数值，既可以带小数点，也可以不带。

• 超小或超大的数可以通过科学计数法来写：

var x = 123e5 ; // 12300000
var y = 123e-5 ; // 0.00123

JavaScript 数值始终是 64 位的浮点数

数值精度

• 小数最大是精确到—17位（浮点数的算法是不100%精确的）

数字和字符串相加

警告！！！

• JavaScript的加法和级联都使用 + 运算符；
• 数字用加法+ ，字符串用 级联；

数字字符串

• JavaScript 字符串可以拥有数字内容

var x = 100 ;	// x是数字
var y = "100" ; // y是字符串

在数字运算中，JavaScript会尝试将字符串转为数字进行运算

var x = "100" ;
var y = "10" ;
var z = x / y ;  //结果：z = 10

javaScript会对乘法、除法、减法等除了加法以外的字符串数字进行算数运算

但是，不会对 加法 进行算数运算；

会对加法进行字符串的级联

NaN - 非数值

• NaN：属于JavaScript保留字，表示某个数不是合法的数。

var x = 100 / "Huawei" ;
// 结果：x = NaN

表示x现在是不合法的

• isNaN ：全局函数，用于判断某个值是不是 数值

var x = 100 / "Huawei";
isNaN(x);//返回 true

NaN 在typeof会认定为 number ===> 认为是一个数

Infinity

• Infinity ：JavaScript在计算数值时超出最大可能数范围时返回的值

var myNumber = 2 ;
while(myNumber != Infinity){
    myNumber = myNumber * myNumber ;
}

除以 零 也会生成 Infinity

var x = 2 / 0 ;		//x ==> Infinity
var y = -2 / 0 ;	//y ==> -Infinity

• Infinity是数；typeof Infinity 返回 number

十六进制

• 前缀为 0x 的数值常量会被解释为 十六进制

var x = 0xFF ;
// 结果： 255

一些版本也会把 0 带头的数解释为八进制

toString()方法

• toString(x)：按照x设定的进制数，输出数。

var myNumber = 128 ;
myNumber.toString(16) ; // 十六进制输出 80
myNumber.toString(8) ;	// 八进制输出 200
myNumber.toString(2) ;	// 二进制输出 1000 0000

数值可以是对象

通常JavaScript 数值是通过字面量创建的原始值：var x = 123 ;

也可以通过关键字 new 定义为对象： var y = new Number(123);

var x = 123 ;
var y = new Number(123) ;
// typeof x 返回 number
// typeof y 返回 object

不建议使用new定义对象，因为 JavaScript对象无法逻辑对比

---

JavaScript 数值方法

Number方法和属性

toSring()方法*

• toString()：以字符串返回数值

所有数字方法可用于任何类型的数字（字面量、变量或表达式）

• toString(x)：以x进制返回数值

var myNumber = 128 ;
myNumber.toString(16) ; // 十六进制输出 80
myNumber.toString(8) ;	// 八进制输出 200
myNumber.toString(2) ;	// 二进制输出 1000 0000
myNumber.toString() ; // 默认进制输出 128
myNumber.toString(10) ; // 十进制输出 128

toExponential()方法

• toExponential(x)：返回字符串值，包含四舍五入并指数计数的数字

var x = 3.145 ;
x.toExponential(2) ;  // 返回 3.15e+0
x.toExponential(4) ;  // 返回 3.1450e+0
x.toExponential(6) ;  // 返回 3.145000e+0

x参数是可选的，没有设置就不会对数值进行四舍五入；如果设置了，就会按照x位小数进行四舍五入并以指数的方法进行输出字符串值类型。

toFixed()方法

• toFixed(x)：返回字符串值，指定小数位数并进行四舍五入（不以指数计数）

var x = 3.145 ;
x.toFixed(0); // 返回 3
x.toFixed(2); // 返回 3.15
x.toFixed(4); // 返回 3.1450

toPrecision()方法

• toPrecision(x)：返回字符串值，包含指定长度的数字（总长度）

var x = 3.145 ;
x.toPrecision() ; // 返回 3.145
x.toPrecision(2); // 返回 3.1
x.toPrecision(4); // 返回 3.145
x.toPrecision(6); // 返回 3.14500

valueOf()方法*

• valueOf()：以数值返回数值

变量转为数值

• 三种方法将变量转为数字：

  • Number()方法
  • parseInt()方法
  • parseFloat()方法

  这些方法是全局的JavaScript方法

全局方法

• JavaScript的全局方法使用于所有JavaScript数据类型

方法	描述
Number()	返回数值，由其参数转换而来
parseFloat()	解析其参数并返回浮点数
parseInt()	解析其参数并返回整数

Number()方法

• Number()：把JavaScript变量转换为数值

x = true ;
Number(x) ; // 返回 1
x = false ;
Number(x) ;	// 返回 0
x = new Data() ;
Number(x) ;	// 返回 14045680277739
x = "10" ;
Number(x) ; // 返回 10
x = "10 20" ;
Number(x) ; // 返回 NaN

如果变量无法转为数字，则返回 NaN（非数值）

用于日期的Number()方法

• Number也可以把标准格式的日期转换为数字

Number(new Date("2019-06-18")) ;
// 返回：1560816000000

parsInt()方法

• paresInt()：解析一段字符串并返回数值；允许空格；只返回首个数字

paresInt("10") ; // 返回 10
paresInt("10.33"); // 返回 10
paresInt("10 20 30"); // 返回 10
paresInt("Huawei 10"); // 返回 NaN

如果无法转换为数值，则返回 NaN

parseFloat()方法

• parseFloat()：解析一段字符串并返回数值；允许空格；只返回首个数字

paresFloat("10"); // 返回 10
paresFloat("10.33"); // 返回 10.33
paresFloat("10.11 2.2 22"); // 返回 10.11
paresFloat("Huawei 10.11"); // 返回 NaN

如果无法转换为数值，则返回 NaN

数值属性

属性	描述
MAX_VALUE	返回JavaScript中可能的最大的数
MIN_VALUE	返回JavaScript中可能的最小的数
NEGATIVE_INFINITY	表示负的无穷大
NaN	表示非数字值
POSITIVE_INFINITY	表示无穷大（溢出返回）

数字属性不可用于变量

• 数字属性属于名为Number的JavaScript数字对象包装

  这些属性只能作为Number.MAX_VALUE访问

  使用 myNumber.MAX_VALUE，其中myNumber是变量、表达式或值，将返回undefined

---

！