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 属性（代码）被添加到
- 实例：
```
<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

！

posted @ 2019-06-19 00:33 Mirror王宇阳阅读(241) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Mirror王宇阳

在学习的道路上不断努力，用技术和实力证明自己存在的意义！

JavaScript初探 二 （了解数据）

JavaScript初探 （二）

JavaScript 事件

HTML事件

常见的HTML事件

JavaScript可以做的事情

JavaScript 字符串

特殊字符

字符串可以是对象

字符串内建方法和属性

字符串长度

查找字符串中的字符

检查字符串中的字符串

提取部分字符串

slice()方法

substring()方法

substr()方法

替换字符串内容

大小写转换

concat()方法：连接字符

String.trim()

提取字符串字符

charAt()方法

charCodeAt()方法

属性访问

字符串转数组

JavaScript 数字

JavaScript 数值

数值精度

数字和字符串相加

警告！！！

数字字符串

NaN - 非数值

Infinity

十六进制

toString()方法

数值可以是对象

JavaScript 数值方法

Number方法和属性

toSring()方法*

toExponential()方法

toFixed()方法

toPrecision()方法

valueOf()方法*

变量转为数值

全局方法

Number()方法

用于日期的Number()方法

parsInt()方法

parseFloat()方法

数值属性

数字属性不可用于变量

公告

JavaScript初探二（了解数据）

JavaScript初探（二）