首页 > > 程序设计 > Java技术 >

JavaScript 简介

2018-08-17 09:39:35来源：博客园阅读 ()

1.JavaScript概述

1.1.什么是js

html：定义网页的内容

css：描述了网页的布局

JavaScript：指定了网页的行为

1.2.js的历史

1995年5月，网景公司，叫Brendan Eich的哥们，10天，LiveScript

1995年12月，改名为JavaScript

1996年8月，微软，Jscript

1997-1999年，ECMA国际组织，ECMAScript，基于已有的JavaScript和Jscript，提出了标准的Script语法规则，JavaScript和Jscript都遵循这套标准。

1999-以后，ECMAScript不断的更新

1.3.js的特点

1）脚本语言，不需要编译，解释运行

2）可以插入到html中的编程代码,所有浏览器都支持

3）基于对象，弱类型的语言

4）很容易学习

1.4.js的优点

交互性：可以与用户进行动态交互

安全性：只能在浏览器内部运行，不能访问本地硬盘或者其他资源

跨平台：无论任何平台，只要有浏览器，就能运行

面试题：javascript是一种什么样的语言

答：解释性脚本语言，代码不进行预编译

　　主要用来向HTML页面添加交互行为

　　可以直接嵌入HTML页面，也可单独写成js文件并引入

　　跨平台性，在绝大多数浏览器支持下，可以在多种平台下运行，linux,windows

2.引入js（案例1）

2.1.通过script标签引入

一般在head中添加此标签

2.2.引入外部的js文件

如果js代码特别多，可以通过script标签引入外部的js文件

注意：

1）引入js文件的script标签中，不要添加任何其他js代码

2）这个script标签不要自闭

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
        <!-- 第一种方式 -->
        <script type="text/javascript">
            function fn1(){
                alert("你还真敢点");
            }
        </script>

        <!-- 第二种方式 -->
        <script type="text/javascript" src="demo.js"></script>
        
    </head>
    <body>
        <input type="button" value="按钮" onclick="fn2()"/>
    </body>
</html>

demo.js 中：

function fn2(){
    alert("你怎么又点了")
}

3.语法

3.1.注释

单行注释：//注释内容

多行注释：/* 注释内容 */

3.2.数据类型

3.2.1.基本数据类型（案例2）

>number数值类型

>string字符串

>boolean布尔值

>undefined类型

>null类型

（1）数值类型

在js中, 所有的数值底层都是浮点型? 在需要时, 整型和浮点型会自动的进行类型的转换.

例如：2.4+3.6=6

特殊值：

Infinity 正无穷大

-Infinity 负无穷大

NaN (not a number) 非数字：NaN和任何数值都不相等, 包括它本身. 如果要判断一个值是否是非数字, 不能用 NaN == xx 来判断, 而是应该使用 isNaN(xx) 进行判断。

在js中, 为number类型提供了对应的包装对象 – Number。

（2）字符串类型

在js中, 字符串类型是基本数据类型的一种, 字符串常量, 可以用单引号或者双引号引起来！

例如：var s1 = “aaa”; var s2 = ‘bbb’;

在js中, 为string类型提供了对应的包装对象 – String。

（3）布尔类型

boolean, 值为true或false

在js中, 为boolean类型提供了对应的包装对象 – Boolean。

（4）undefined

undefined类型的值只有一个, 就是undefined. 表示变量未定义。如果声明了一个变量, 但是没有初始化值, 该变量的值就是undefined

例如：var a; 则a的值即为undefined。

（5）null

null类型的值也只有一个, 就是null, 表示此处的值现在为空。常用来作为函数的返回值, 表示该返回值是一个没有任何内容的空对象

3.2.2.复杂数据类型

复杂数据类型：对象（普通对象，数组，函数..）后面讲

3.2.3.数据类型的转换

在js中，在需要的时候，数据类型会自动进行转换，转换规则为：

数值类型:

转字符串类型, 直接转成对应值的字符串, 3 --> "3"

转布尔类型, 0和NaN转成false, 其他数值转成true

在需要时, 会自动转成对应的包装对象 100 --> new Number(100)

字符串:

空字符串(""): 转数值为0, 转布尔值为false

非空纯数值字符串("123"): 转数值为对应的数值, 转布尔值为true

非空非数值字符串("abc"): 转数值为NaN, 转布尔值为true

在需要时, 会自动转成对应的包装对象. "aaa" --> new String("aaa")

布尔类型:

true: 转数值为 1, 转字符串为"true"

false: 转数值为 0, 转字符串为"false"

在需要时, 会自动转成对应的包装对象.

undefined

转数值为NaN, 转字符串为"undefined", 转布尔值为false, 转对象会抛出异常!

null

转数值为 0, 转字符串为"null", 转布尔值为false, 转对象会抛出异常!

/**
 * 
 */
////引入js,在 Html 的头部中的 script标签中引入使用--------------------
function fn2() {
    alert("你怎么又点了");
    document.write(Date());
}


////对数组中的数据类型进行定义--------------------------------------
/*var a = [3>2>1,1<2<3,7>8>9,9<8<7]
alert(a[0]) //为false
alert(a[1])   //为true
alert(a[2])
alert(a[3])
*/

////定义变量-----
//直接赋值，类型自动定义,后面都没有加 ;
var i = 3
var j = "abc"
var k ='3'
//跟Java中输出类似，还有一个弹出式的对话框alert()也是这么使用：
document.write(i+","+j+k)
//alert(i + "," + j + k)

////运算符，跟Java类似，但有两个 == 和 === 需要进行区别一下-----
/*alert(666 == "666") //返回 true，因为类型不一样，会先将666隐式转换，再与 "666" 判断，但是类型相同就直接比较
alert(666 === "666") *///返回false，严格相同，类型不同就直接返回false,相同再比较，相同返回true,不同返回false

//返回对应值的类型
/*var x = true
alert(typeof x) //返回 boolean
alert(typeof 6 +"66") //进行了拼接，返回 number66
*/
//删除数组，
//会把这个地方给空出来,是一个 undefined 类型的
/*var a = [1,2,3,true,"nihao"]
delete a[1]
alert(a[1])*/

/////分支结构
/*if(6){
    alert("我却如此暴躁")
}else{
    alert("世界如此美好")
}

if("123"){
    alert("大师兄，师傅被妖怪抓走了")
}else{
    alert("师傅，大师兄说得对")
}
*/


///////函数-------------------------------------------------
//定义方法不需要类型
/*function fn1(name, age) {
    alert(name + ":" + age)
}
fn1("tangdiao",18)

//或者,将方法名放到前面去
fn2 = function(name, age){
    alert(name + "," + age)
}
fn2("tangdiao",2)*/


//////数组--------------------------------------------------
//创建数组
//数组中可以定义任意类型的数据，
//数组的长度是可变的
/*var arr1 = new Array()//创建空数组
var arr2 = new Array(10)
var arr3 = new Array("123",3,true,'g')
//arr3.length = 5
alert(arr3)*/


////////内置对象----------------------------------------------
///字符串对象----------------------
//创建字符串
/*var str = new String("nihao")
var str2 = "jiezheyangdingyi"
    
alert(str + "," + str2)    
alert(str.length + str.charAt(2))//返回字符串的长度5和任意一个数据的位置h
//还有一些方法用的时候调用就是了
*/


///RegExp 对象（正则）--------------
//标识符: g -> Global 全局查找    i -> IgnoreCase 忽略大小写
//如果正则需要从头到尾都匹配，需要以"^"开头，以"$"结尾。
var rg1 = new RegExp("","")
var rg2 = /xxxx/;//这里需要加上 ;结束
//检查字符串
str = "123"
rg2.test(str)


///Array 对象---------------------
var arr1 = new Array()
var arr2 = ["123",5,true,'y',9]
//一些属性和方法
//alert(arr2.length) //返回字符串的长度

var arr3 = new Array(1,3,4)
//alert(arr3.concat(arr1,arr2))  //返回 1，3，4，123,5,true,y,9 将几个数组合并，返回一个新的数组，长度增大了

//alert(arr2.join("-"))//返回 123-5-true-y-9，返回一个 String 类型的，但是原先的数组不会改变

//alert(arr2.reverse()) //返回 9，y,true,5,123，在 java中需要一个循环，前后颠倒

//alert(arr2.slice(1,4)) //返回 5，true,y,含头不含尾

//alert(arr2.splice(1,3,"zzz")) //返回 5，true,y 是删掉的元素，原先的位置就一个 zzz 了

//alert(arr2.pop()) //返回 9，是被移除了

//alert(arr2.push("l")) //返回6，是数组长度，最后一个元素为l

//alert(arr2.shift()) //返回 123,是被移除了

//alert(arr2.unshift("nihao1")) //返回 6，数组长度，第一个为 nihao1

//alert(arr2.sort())  //返回排序后的数组


///Date对象--------------------
var date1 = new Date()
//alert(date1)  //返回 Wed Aug 15 2018 10:25:08 GMT+0800（中国标准时间）

//alert(new Date(2018,8,15)) //指定日期，注意月是从 0 开始，这里就是 9 月

//alert(date1.toLocaleString()) //返回 2018/8/15 10：30，转为本地时间的格式

//还有几个是获取年月日，星期几，毫秒数的，用的时候查看一下就行了


///Math 对象------------------
//可以直接拿来使用！！

//alert(Math.PI) //返回圆周率的值：3.141592653

//alert(Math.exp(1)) //自然对数e的几次幂，这里是1次，为：2.7182818

//alert(Math.abs(-7)) //返回一个数的绝对值

//alert(Math.ceil(3.1415)) //向上取整，为 4

//alert(Math.floor(3.1415)) //向下取整，为3

//alert(Math.round(3.1415)) //四舍五入为整数，这里是 3


///全局对象（gloabal）-------------

//alert(typeof parseFloat("3.14")) //将这个字符串转化为 float,为数字 3.14

//alert(typeof parseInt("9.99"))  //将这个字符串转化为整型，为 9

//alert(isNaN("abcd"))  //返回 true
//alert(isNaN("123"))   //返回 false，判断一个值是否为非数字，不是数字就返回true,是数字就返回 false

//eval("alert(1 + 2)")  //加不加引号都差不多，将里面的按代码执行，为 3


///自定义对象--------------------
/*function Person(){}
var p3 = {
        "name":"tangdiao",
        "age":18,
        "run":function(){
            alert(this.name + this.age) 
        }
}
//取值
alert(p3.name)
alert(p3["name"])
alert(p3.run()) //调用有方法的后面需要加上（），不然就是取那个字符串的值

function Person2(name,age){
    this.name = name,
    this.age = age,
    this.run = function(){
        alert(name + ":" + age)
    }
}

var p1 = new Person2("唐雕",19)
alert(p1.name)
alert(p1.age)
p1.run()*/

//////DHTML-------------------------------------------

/////BOM---------------
///Window对象
function clickfn(obj){

    if(obj.value == "123"){
        obj.value = "456"
    }else{
        obj.value = "123"
    }

}

//获得焦点触发
//需要在html的onfocus()事件关联这个方法
function focusfn(obj){
    obj.value = "请输入密码"
}

//失去焦点触发，
//需要在html的onblur()事件关联这个方法
function blurfn(obj){
    obj.value = "你离开了"
}

//这个方法只需要在js文件下定义，不需要到html中再写
//在页面加载完毕就触发这个事件
/*onload = function(){
    
    var inp = document.getElementById("input3")
    alert(inp.value)
    
}*/

//confirm提示框的使用
function confirmfn(){
    if(confirm("是否删除商品")){
        alert("商品已删除")
    }else{
        alert("商品还在")
    }
}

//location对象-----------
//获取当前的url（该html本地路径）
/*alert(location.href)
alert("此页面将要跳转到tmooc")
location.href = "http://www.tmooc.cn/"
*/    

//Dom 对象---------------
//对元素进行增删改

//id
function demo1(){
    var inp = document.getElementById("input2")
    alert(inp.value)
    inp.value = "兰姐"
}

//name
//注意：这里是Elements，
//还有匹配的后面要有一个[],定义查出来的第几个
function demo2(){
    var inp = document.getElementsByName("name1")[0]
    alert(inp.value)                                
}

//tagname**
function demo3(){
    var inp= document.getElementsByTagName("name")[0]
    alert(inp.value)
}

//font**
function demo4(){
    var inp = document.getElementById("input1").getElemetsByTagName("font")
    alert(inp.innerHtml)
    inp.innerHtml = "<font color = 'green'>我要变身啦！！</font>"
}

3.3.如何定义变量

在js中有数据类型，但是变量不区分数据类型，所以，js是弱类型语言

在js中声明变量，可以通过var关键字声明

例如：var i = 5; var a = “abc”;

3.4.运算符（案例3）

js中的运算符和java中的运算符基本一致

不同点：

==：如果数据类型不同，会先转换数据类型，再比较，如果类型相同，直接比较

===:严格相等，如果数据类型不同，则直接返回false，如果类型相同，才会进行比较。

typeof：可以返回变量、常量、表达式的数据类型

格式：var x = 123 typeof x

delete：删除数组中的元素或者对象的属性

格式：var arr = [123,”abc”,true] delete arr[1]

//1.分别用"=="和"==="判断数字666和字符串"666"是否相等

//alert(666 == "666")//true

//alert(666 === "666")//false

//2.分别对x进行不同的赋值，利用typeof查看x的数据类型

var x = true;

//alert(typeof x)

//3.问题：判断typeof 6+"66" 的值是什么？

//alert(typeof 6+"66")

//4.删除下面数组中的第二个元素

var arr = [111,"abc",true];

alert(arr)

delete arr[1]

alert(arr)

alert(arr[1])//undefined

3.5.语句

js的语句和java的语句基本一致

if语句：

判断时，会先将数据类型转换为boolean值

switch语句

和java中一样，也支持字符串

循环语句

while、do...while、for，语法与java一致

注意：js不支持增强for循环

3.6.函数(案例4)

定义方式一：通过function关键字定义

格式： function 函数名(形参列表){

函数体

}

调用：函数名(参数)

定义方式二：通过函数表达式定义

格式：var fn2 = function(形参列表){

函数体

}

调用：函数名(参数)

//方式一

function fn1(name,age){

alert(name+":"+age)

}

//fn1("尼古拉斯赵四",18);

//方式二

var fn2 = function(name,age){

alert(name+":"+age)

}

fn2("小沈阳",17);

3.7.数组

创建一：通过构造函数创建数组

var arr1 = new Array() //创建空数组

var arr2 = new Array(10) //创建长度为10的空数组

var arr3 = new Array(123,”abc”,true) //创建有初始值的数组

创建二：通过数组直接量创建

var arr4 = [] //创建空数组

var arr5 = [“aaa”,111,false] //创建有初始值的数组

注意：

1)数组可以存放任意数据类型

如：var arr5 = [“aaa”,111,false]

2)数组的长度可以随便改变

如：var arr5 = [“aaa”,111,false] arr5.length = 1;

3)如果数组中的某一位置没有元素，这个位置的值为undefined

如：var arr5 = [“aaa”,111,false] arr5[10]

3.8.内置对象（案例5）

3.8.1.String对象

创建：

var str1 = new String(“xxx”); //创建字符串对象

var str2 =“xxx”; //创建字符串基本类型，但是也可以

常用属性和方法：

str.length 返回字符串长度。

str.charAt(index) 返回指定索引位置处的字符。

例如：var str = "abcdeabc"; str.charAt(3) // d

str.indexOf(subString, startIndex) 返回第一次出现子字符串的位置。

例如：var str = "abcdeabc"; x.indexOf("bc",2) // 6，从第3个开始数

str.lastIndexOf(substring, startindex) 返回最后出现子字符串的位置。

例如：var str = "abcdeabc"; x.lastIndexOf("bc",8); // 6，从后往前数

str.split(delimiter) 将字符串按照指定字符分割为字符串数组。

例如：var str = "a:b:c:d"; str.split(":") //返回为一个数组[a,b,c,d]

str.slice(start, end) 提取字符串的某个部分，含头不含尾。

例如：var str = "abcdeabc"; str.slice(2,4); // cd

str.substr(start, length) 返回从指定位置开始的指定长度的子字符串。

例如：var str = "abcdeabc"; str.substr(2,4); //cdea

str.toLowerCase( ) 字符串中的字母转换为小写。

例如：var str = "ABCDE"; str.toLowerCase(); //abcde

str.toUpperCase( ) 字符串中的字母转化为大写。

例如：var str = "abcde"; str.toUpperCase(); //ABCDE

str.match(regexp) 在字符串中查找指定匹配正则表达式的值。

str.replace(regexp, replaceText) 字符串中匹配正则的值替换为其他值。

str.search(regexp) 查找与正则表达式匹配的第一个子字符串的位置。

3.8.2.RegExp对象（正则）

创建：

var reg1 = new RegExp("", "");

var reg2 = /xxx/;

标识符: g à Global 全局查找 i à IgnoreCase 忽略大小写

如果正则需要从头到尾都匹配，需要以”^”开头，以”$”结尾。

reg.test(str); 检查字符串是否符合该正则, 如果符合返回true, 不符合返回false！！！

3.8.3.Array对象

创建：

var arr1 = new Array();

var arr2 = [];

常用属性和方法：

arr.length 返回数组中元素的个数

例如：var arr = ["a","b","c"]; arr.length; // 3

arr.concat(arr1,arr2,arr3...) 将多个数组合并成一个

例如：

var arr1 = ["a","b","c"]; var arr2 = ["d","e","f"]; var arr3 = ["x","y","z"];

arr1.concat(arr2,arr3); // ["a","b","c","d","e","f","x","y","z"]

arr.join(string) 将数组中所有元素按照指定字符串连接成一个字符串

例如：var arr = ["aaa",123,true]; arr.join("-"); // aaa-123-true

arr.reverse( ) 返回一个元素顺序被反转的 Array 对象。

例如：var arr = ["a","b","c"]; arr.reverse(); //["c","b","a"]

arr.slice(start, end) 返回一个数组的一段，含头不含尾。

例如：var arr = ["a","b","c",1,2,3]; arr.slice(2,4); // ["c",1]

arr.splice(start, deleteCount,value...)

从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。

例如：var arr = ["a","b","c","d","e","f"]; arr.splice(2,2,"zzz");

// 返回值为["c","d"]，arr则变为["a","b","zzz","e","f"]，中间被替换

arr.pop( ) 移除数组中的最后一个元素并返回该元素

例如：var arr = ["aaa",123,"x",true,8]; arr.pop();

//返回值为 8，arr则变为["aaa",123,"x",true]

arr.push(value) 在数组的末尾加上一个或多个元素，并返回新数组的长度值

例如：var arr = ["aaa",123,"x",true,8]; arr.push("last")

//返回值为6，arr则变为 ["aaa",123,"x",true,8,"last"]

arr.shift( ) 移除数组中的第一个元素并返回该元素

例如：var arr = ["aaa",123,"x",true,8]; arr.shift()

//返回值为 "aaa" ，arr则变为[123,"x",true,8]

arr.unshift(value) 为数组的开始部分加上一个或多个元素,并且返回该数组的新长度

例如：var arr = ["aaa",123,"x",true,8]; arr.unshift("first")

//返回值为6，arr则变为["first","aaa",123,"x",true,8]

arr.sort(sortfunction) 返回排序后的数组。

3.8.4.Date对象

创建：

var date1 = new Date(); // 当前时间

var date2 = new Date(年,月,日[,时,分,秒]); //指定时间，可以只有年月日

注意：当创建指定时间的时候，月是从0开始，例如：

var date2 = new Date(2008,7,8,20,0,0);

这个时间是2008年8月8日晚上8点整

常用方法：

data.toLocaleString() 把日期(一个数值)转变成本地日期格式字符串

例如：var date2 = new Date(2008,7,8); date2.toLocaleString();

// "2008/8/8 上午12:00:00"

data.getFullYear() 获取日期对象中所表示时间的年份

例如： var date = new Date(2008,7,8); date.getFullYear(); // 2008

data.getMonth() 获取日期对象中所表示时间的月份，返回一个 0 到 11 之间的整数，0表示一月。

例如：var date = new Date(2008,7,8); date.getMonth(); // 7

data.getDate() 获取日期对象中所表示一个月的日期值，返回值是一个处于 1 到 31 之间的整数，代表了相应的日期值。

例如：var date = new Date(2008,7,8); date.getDate(); // 8

data.getDay() 获取日期对象中所表示一个周的日期值。返回的值是一个处于 0 到 6 之间的整数，0表示周日，6表示周六。

例如：var date = new Date(2008,7,8); date.getDay(); // 5，表示周五

data.getTime() 返回从 1970 年 1 月 1 日至指定时间的毫秒数。

例如：var date = new Date(2008,7,8); date.getTime(); //1218124800000

3.8.5.Math对象

Math可以直接拿来用！

常用属性和方法：

Math.PI 返回圆周率的值，约等于 3.141592653589793。

例如：var num = Math.PI; // num 的值为3.141592653589793。

Math.exp(number) 返回 e（自然对数的底）的幂。

例如：Math.exp(1) // e1 约等于2.718281828459045

Math.abs(number) 返回数字的绝对值。

例如：Math.abs(-5) // 5

Math.ceil(number) 向上取整

例如：Math.ceil(3.14) // 4

Math.floor(number) 向下取整

例如：Math.floor(3.14) // 3

Math.round(number) 四舍五入到整数

例如：Math.round(5.67) // 6

Math.random() 返回介于 0 和 1 之间的伪随机数。

3.8.6.全局对象（global）

全局对象没有语法。直接调用其方法。

parseFloat(numString) 将字符串转换成浮点数。

例如：parseFloat("13.14") // 返回number类型的13.14

parseInt(numString) 将字符串转成整数，非四舍五入。

例如：parseInt("9.99") // 返回number类型的9

isNaN(numValue) 判断一个值是否为非数字。

例如： isNaN("abc") // true

isNaN("123") // false

eval(codeString) 判断一个字符串并将其以脚本代码的形式执行

例如：eval("alert(1+2)"); //会直接将"alert(1+2)"当作代码执行，弹出3

//一、字符串String

//1.将字符串中所有的"java"提取到一个数组中

var str = "zhang,java,wang,JAVA,li,java,zhao";

var reg1 = /java/g

//alert(str.match(reg1));

//2.将字符串中所有的"java"不分大小写提取到一个数组中

var reg2 = /java/gi

//alert(str.match(reg2))

//3.将所有的"java"不分大小写，全部换成"C++"

//alert(str.replace(reg2,"C++"))

//4.查找第一个"java"出现的位置(不分大小写)

//alert(str.search(reg2))

//二、正则

//检查str字符串是否符合如下正则

var reg3 = /wang/;

var reg4 = /^wang$/;

//alert(reg3.test(str))

//alert(reg4.test(str))

//三、数组

//对arr进行排序，思考排序后的顺序

var arr = ["aaa",123,"x",true,8];

//var str = arr.pop();

//alert(str)

//alert(arr)

//var i = arr.push("last")

//alert(i)

//alert(arr)

var arr1 = arr.sort()

//alert(arr1)

var date = new Date(2008,7,8)

//alert(date)

var date1 = date.toLocaleString();

//alert(date1)

//四、Math对象

//1.返回一个1-100之间的随机整数

//alert(Math.PI)

//alert(Math.ceil(Math.random()*100))

//2.返回一个30-50直接的随机整数

//alert(Math.round(Math.random()*20+30))

eval("alert(1)")

3.9.自定义对象（案例6）

方式一：通过构造函数定义

格式：function Person(){} //创建一个空对象

function Person2(参数1，参数2..){

对象内容....

}

方式二：通过对象直接量定义

格式：var p3 = {

“name”:”张三”,

“age” : 18,

“run” : function(){}

}

对象中取值：

p1.key 或 p1[“key”]

//1.分别用两种方式定义一个对象，包含姓名和年龄，以及弹出姓名年龄的方法

//方式一

function Person(){}

var p1 = new Person();

p1.name="刘能";

p1.age = 19;

p1.run = function(){

alert(this.name+":"+this.age)

}

//alert(p1.name)

//p1.run();

function Person2(name,age){

this.name = name;

this.age = age;

this.run = function(){

alert(this.name+"--"+age)

}

var p2 = new Person2("宋小宝",20);

//p2.run()

var a = "name"

//alert(p2[a])

//方式二

var p3 = {

"name" : "小沈龙",

"age" : 16,

"run" : function(){

alert(this.name+"#"+this.age)

}

p3.run();

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
        <!-- js内置对象 -->
        <script type="text/javascript">
            //一、字符串String
            //1.将字符串中所有的"java"提取到一个数组中
            var str = "zhang,java,wang,JAVA,li,java,zhao";
            var reg1 = /java/g
            //alert(str.match(reg1));
            
            //2.将字符串中所有的"java"不分大小写提取到一个数组中
            var reg2 = /java/gi
            //alert(str.match(reg2))
            
            //3.将所有的"java"不分大小写，全部换成"C++"
            //alert(str.replace(reg2,"C++"))
            
            //4.查找第一个"java"出现的位置(不分大小写)
            //alert(str.search(reg2))

            //二、正则
            //检查str字符串是否符合如下正则
            var reg3 = /wang/;
            var reg4 = /^wang$/;
            
            //alert(reg3.test(str))
            //alert(reg4.test(str))
            
            //三、数组
            //对arr进行排序，思考排序后的顺序
            var arr = ["aaa",123,"x",true,8];
            //var str = arr.pop();
            //alert(str)
            //alert(arr)
            //var i = arr.push("last")
            //alert(i)
            //alert(arr)

            var arr1 = arr.sort()
            //alert(arr1)

            var date = new Date(2008,7,8)
            //alert(date)
            var date1 = date.toLocaleString();
            //alert(date1)
            
            //四、Math对象
            //1.返回一个1-100之间的随机整数
            //alert(Math.PI)
            //alert(Math.ceil(Math.random()*100))
            //2.返回一个30-50直接的随机整数
            //alert(Math.round(Math.random()*20+30))


            eval("alert(1)")
            
        </script>

        
        
    </head>
    <body>
        js内置对象演示
    </body>
</html>

4.DHTML

4.1.DHTML概述

DHTML: Dynamic HTML 动态的 html

DHTML并不是一门新的技术, 而是将现有的HTML, CSS, JavaScript整合在一起, 形成了DHTML技术.

DHTML分为BOM和DOM。

BOM：Browse Object Modle 即浏览器对象模型，其中封装了浏览器操作相关对象。

DOM：Document Object Modle 即文档对象模型，将整个HTML文档按照文档结构组织成了树形结构。

4.2.BOM

4.2.1.window对象

此对象是全局对象，可以直接调用方法或者属性

常用事件：

onclick事件 - 当窗口被电击时触发

onfocus事件 - 当窗口获取焦点时触发

onblur事件 - 当窗口失去焦点时触发

onload事件 - 当整个html文档加载完之后触发

常用方法：

alert() - 弹出提示框

confirm() - 弹出确认框，电击确定，返回true，反之为false

location对象

属性

href - 可以获取或者设置浏览器的地址栏

//window对象

//1.在按钮点击时弹出提示框

function clickfn(){

alert("恭喜，您点中了")

}

//2.输入框1获得焦点时弹出提示框

function focusfn(){

alert("获得焦点了")

}

//3.输入框2失去焦点时弹出提示框

function blurfn(){

alert("失去焦点了")

}

//4.弹出输入框3中的value值

//获取输入框3的input按钮

onload = function(){

var inp = document.getElementById("input3");

//alert(inp.value)

}

//5.点击删除商品按钮，弹出提示是否删除,如果确定，则弹出商品已删除，否则弹出商品还在

function delfn(){

if(confirm("是否删除")){

alert("商品已删除")

}else{

alert("商品还在")

}

//location对象

//1.弹出当前url

//alert(location.href)

//2.将页面url设置为"http://www.baidu.com"

alert("此页面将要跳转到tmooc")

location.href = "http://www.tmooc.cn"

4.3.DOM

4.3.1.获取元素

document.getElementById("id值"); 通过id值获取指定id的元素

document.getElementsByName("name属性值"); 通过name属性获取指定name值的所有元素组成的集合数组

document.getElementsByTagName("元素名"); 通过元素的名称获取指定元素名的所有元素组成的集合数组

value属性：获取或设置输入框的value值

innerText： (部分浏览器不支持) 获取或设置元素内的文本内容

innerHTML：获取或设置元素的html内容

4.3.2.对元素进行增删改

dom案例一：

/* --通过ID获取并弹出用户名输入框的值-- */

function demo1(){

var inp1 = document.getElementById("username")

alert(inp1.value)

inp1.value = "兰姐"

}

/* --通过name属性获取并弹出密码输入框的值-- */

function demo2(){

var inp2 = document.getElementsByName("password")[0]

alert(inp2.value)

}

/* --通过元素名称获取并弹出确认密码输入框的值-- */

function demo3(){

var inp3 = document.getElementsByTagName("input")[2]

alert(inp3.value)

}

/* --获取元素内容-- */

function demo4(){

var p = document.getElementById("pid").getElementsByTagName("font")[0]

//alert(p.innerText)

alert(p.innerHTML)

p.innerHTML = "<font color='green'>我要变身了。。。</font>"

}

一个面试题：添加删除替换插入到某个节点的方法

答：添加：obj.appendChild(childNode)

　　删除：obj.removeChild(childNode)

　　替换：obj.replaceChild(newChild,oldChild)

　　插入：obj.innersetBefore(newChild,oldChild)

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：Mybatis笔记(一)-----Mybatis基础xml配置文件解释

下一篇：浅析Java的Thread.join函数

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签