Day2JavaScript

Day02

JavaScript

1.   JavaScript的简介

(1)    JavaScript: 基于对象和事件驱动的语言，应用于客户端。

a)        基于对象：js里面提供好了一些对象，直接使用

b)        事件驱动：每次滑动鼠标，变换一张图片

c)        客户端：浏览器

(2)    JavaScript的特点

a)        交互性

b)        安全性

c)        跨平台性

(3)    Java和JavaScript区别

 

Java

JavaScript

公司

Sun公司

网景公司

 

面向对象

基于对象

跨平台机制

依靠虚拟机

浏览器支持

 

强类型语言

弱类型语言

实现机制

先编译通过虚拟机运行

支持的浏览器直接打开

(4)    JavaScript由三部分组成

a)        ECMAScript

ECMA组织制定语句，语法

b)        BOM

broswerobject  model：浏览器对象模型

c)        DOM

document object model：文档对象模型

2.js和html的结合方式

方式

使用html中的标签

使用html的标签，引入外部的js文件

代码

<script type="text/javascript"> js代码 </script>

<script type="text/javascript" src="js文件的路径"></script>

 

js的注释: 单行注释

多行注释

注意: 不要在script标签里面写js代码了，不会执行

结束script标签 </script>，不要在标签内结束

3.js的变量声明和数据类型

(1)    声明变量，都是使用一个关键字var

(2)    js的原始类型

类型

string：字符串类型

number：数字类型

boolean：布尔类型

null

undefined

使用

var a = "abc"

var b = 10

var c = true

Var date = null

var a

 

 

 

 

null是特殊的引用类型

表示定义了一个变量，但是没有赋值

(3)    typeof(变量的名称): 查看当前变量的类型

4. js的引用类型和类型转换

         (1)引用对象

                   a)Object 对象：所有对象都由这个对象继承而来

                   b)Boolean 对象：Boolean 原始类型的引用类型

                   c)Number 对象： Number 原始类型的引用类型

         (2)类型转换

                   a)转换成字符串toString()

                   b)转换成数字：parseInt() 和 parseFloat()

                   c)强制类型转换:

                                     Boolean(value)- 把给定的值转换成 Boolean 型；

                                     Number(value)- 把给定的值转换成数字（可以是整数或浮点数）；

                                     String(value)- 把给定的值转换成字符串；

5.js的语句

语句

if 语句

switch语句

while循环语句

for循环语句

document.write()向页面输出内容

代码

var a = 10;

if(a==10) {

         alert("10");

} else {

         alert("other");

}

var b = 5;

switch(b) {

         case 4:

          alert("4");

          break;

         case 5:

          alert("5");

          break;

         default:

         alert("other");

}

var i = 4;

while(i<6) {

         alert(i);

         i++;

}

for(var i=0;i<3;i++) {

         alert(i);

}

document.write(i);

document.write("<br/>")

6.js的运算符

运算符

算术运算符

赋值运算符

比较运算符

逻辑运算符

 

+ - * /....

+=

==

&&  ||  !

js的运算符和java不同的内容

a)      js里面不区分整数和小数

b)      字符串相加是字符串的拼接操作，字符串相减是真正的相减运算，如果字符串不是数字提示NaN

c)      如果布尔类型值是true，把类型当成1运算；如果布尔类型值是false，把类型当成0运算

d)      ==比较的是值, === 比较的是值和类型

7. js的数组

js里面定义数组的方式

方式

var arr1 = []

var arr2 = ["10",10,true]

var arr3 = new Array(3)

var arr4 = new Array(4,5,6)

 

 

可以写任意的类型

表示定义数组名称是arr3，数组的长度是3

表示定义数组名称是arr4，数组里面的值4 5 6

数组里面的属性：查看数组的长度 length, 长度可变的

8. js的string对象

(1)字符串对象

         创建字符串：var a ="abc"; var b = new String("bb");

(2)属性 length 字符串的长度

(3)方法:

与html相关的方法

bold()

fontcolor()

fontsize()

link()

作用

使用粗体显示字符串

使用指定的颜色来显示字符串

使用指定的尺寸来显示字符串

将字符串显示为链接

代码

document.write(a.bold())

document.write(a.fontcolor("red"))

document.write(a.fontsize(7))

document.write(a.link("04-练习99乘法表.html"))

 

与java相似的方法

作用

代码

charAt()

返回在指定位置的字符。 如果位置不存在字符，返回空字符串""

var str = "abcdefg"

document.write(str.charAt(1))

 

concat()

连接字符串

document.write(str.concat(str1))

indexOf()

检索字符串，得到检索的字符的位置，如果没有找到返回-1

var str2 = "ABCD";

document.write(str2.indexOf("R"));

split()

把字符串分割为字符串数组

var str3 = "a-b-c";

var arr = str3.split("-");

substr()

从起始索引号提取字符串中指定数目的字符

var str4 = "MARYJACKLUCY";

document.write(str4.substr(2,3));

substring()

提取字符串中两个指定的索引号之间的字符

document.write(str4.substring(2,3))

9. js的Array对象

方法:

方法

作用

代码

concat()

连接数组

document.write(arr1.concat(arr2))

join()

把数组根据指定字符进行分隔

document.write(arr3.join("-"))

pop()

删除并返回数组的最后一个元素

document.write(arr4.pop())

push()

向数组的末尾添加元素，并返回新的长度

document.write(arr5.push("lucy"))

reverse()

颠倒数组中元素的顺序

document.write(arr8.reverse())

10. js的Math对象

(1) 使用Math.方法名称进行调用

(2)    方法

        

方法

作用

代码

ceil(x)

对一个数进行上舍入(天花板)

document.write(Math.ceil(10.2))

floor(x)

对一个数进行下舍入(地板)

document.write(Math.floor(10.2))

round(x)

把一个数四舍五入为最接近的整数

document.write(Math.round(10.2))

random()

返回 0 ~ 1 之间的随机数

document.write(Math.random())

11. js的Date对象

(1)使用Date对象，newDate();

(2)方法

方法

作用

注意

toLocaleString()

得到当前的时间

把 Date 对象转换为字符串

getFullYear()

得到当前的年

Date对象以四位数字返回年份

getMonth()

得到当前的月

Date 对象返回月份 (0 ~ 11)

getDay()

得到当前的星期

从 Date 对象返回一周中的某一天 (0 ~ 6)

星期日返回的是0

getDate()

得到当前的日

返回一个月中的某一天 (1 ~ 31)

getHours()

得到当前的小时

 

getMinutes()

得到当前的分

 

getSeconds()

得到当前的秒

 

getTime()

得到毫秒数

返回 1970 年 1 月 1 日至今的毫秒数

12. js的RegRxp对象

(1) RegExp 对象表示正则表达式

(2)使用new RegExp("正则表达式")

                   /正则表达式/

(3)方法

test() 检索字符串中指定的值。如果存在匹配的字符返回 true,如果不存在匹配的字符返回 false。

13. js的bom对象

(1) script标签放到</body>后面

(2) bom:浏览器对象模型

第一个：navigator浏览器的信息

第二个：screen屏幕的信息

第三个: history访问地址的历史信息

第四个: location

         设置url

         href设置或返回完整的 URL

第五个: window（***）

          window对象是窗口对象，是顶层对象

         方法:

          setInterval("执行的js代码",毫秒数) 在指定的时间内，重复执行js代码

                   **有两个参数(必需2个都要有)

                   ***第一个参数要执行的js代码（js的方法），第二个参数是时间（毫秒数）

                   **代码

                   setInterval("alert('setinterval');",3000);

 

          setTimeout("执行的js代码",毫秒数) 在指定的时间之后，执行js代码，执行一次

                   **有两个参数

                   ***第一个参数要执行js代码（js的方法），第二个参数是时间（毫秒数）

                   **代码

                   setTimeout("alert('settimeout');",3000);

 

          clearInterval(id) 取消由setInterval() 设置的 timeout。

        

          clearTimeout(id) 取消由setTimeout()方法设置的 timeout。

14. js的全局变量和局部变量

(1) 全局变量 

         在js里面，如果在一个script标签里面定义变量，在页面中的其他script标签里面都可以使用。（要注意上下顺序）

(2) 局部变量

         在js的方法里面定义一个变量，这个变量只能在方法里面使用。

15. js的全局函数

(1) 不属于任何对象，可以使函数

(2) 主要的函数:

函数

作用

注意

eval()

把字符串当成js代码执行

 

isNaN()

检查某个值是否是数字

如果是数字返回 false,如果不是一个数字返回 true。

parseInt()

解析一个字符串并返回一个整数

 

encodeURI()

把字符串编码为 URI

 

decodeURI()

解码某个编码的 URI