【JavaScript】

一、JavaScript介绍

1、简介及历史

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。

为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。

2、组成部分

一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:

  • 核心(ECMAScript),描述了该语言的语法和基本对象。
  • 文档对象模型(DOM) Document object model (整合js,css,html),描述处理网页内容的方法和接口。
  • 浏览器对象模型(BOM) Broswer object model(整合js和浏览器),描述与浏览器进行交互的方法和接口。

3、特点及用途

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

特点:
  1. 脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

  2. 基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

  3. 简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

  4. 动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

  5. 跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

 

用途:

  1. 嵌入动态文本于HTML页面。

  2. 对浏览器事件做出响应。 

  3. 读写HTML元素。

  4. 在数据被提交到服务器之前验证数据。

  5. 检测访客的浏览器信息。

  6. 控制cookies,包括创建和修改等。

  7. 基于Node.js技术进行服务器端编程。 

 

二、Js基础知识

1、Js的引入方式

1 直接编写
    <script>
        alert('hello world')
    </script>
2 导入文件
    <script src="hello.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // js的引入
        alert("hello world");
    </script>

    <!--<script src="demo.js"></script>-->
</head>
<body>

</body>
</html>

 

2、声明变量

1、声明变量时不用声明变量类型. 全都使用var关键字;

var a;
a=3;

2、一行可以声明多个变量.并且可以是不同类型

var name="hirsi", age=20, job="techer";

3、声明变量时 可以不用var. 如果不用var 那么它是全局变量

4、变量命名,首字符只能是字母,下划线,$美元符 三选一,余下的字符可以是下划线、美元符号或任何字母或数字字符且区分大小写,x与X是两个变量 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
         //   单行注释

         /*
         多行注释
          */


        // var name;      // 声明变量
        // name="alex";   // 为变量赋值
        //
        // // 简写:
        // var age=23;

        // 多变量变量赋值: 默认以换行符作为语句的分割符,但是规范以分号作为语句分割副本
         var name="Hirsi";
         var age=34;
          alert(name)
        
    </script>
</head>
<body>

</body>
</html>
声明变量

 

补充:

  • Camel 标记法

首字母是小写的,接下来的字母都以大写字符开头。例如:
var myTestValue = 0, mySecondValue = "hi";

  • Pascal 标记法

首字母是大写的,接下来的字母都以大写字符开头。例如:
Var MyTestValue = 0, MySecondValue = "hi";

  • 匈牙利类型标记法

在以 Pascal 标记法命名的变量前附加一个小写字母(或小写字母序列),说明该变量的类型。例如,i 表示整数,s 表示字符串,如下所示“
Var iMyTestValue = 0, sMySecondValue = "hi";

 

3、常量及标识符

  • 常量 

直接在程序中出现的数据值

  • 标识符:
  1. 由不以数字开头的字母、数字、下划线(_)、美元符号($)组成
  2. 常用于表示函数、变量等的名称
  3. 例如:_abc,$abc,abc,abc123是标识符,而1abc不是
  4. JavaScript语言中代表特定含义的词称为保留字,不允许程序再定义为标识符

 

4、数据类型

基础数据类型:
             数字类型:number---->....
             字符串:string----->...
             布尔值:boolean------> true,false
             undefined----->undefined: 两种情况
                           1 变量只声明,未赋值,得到undefined
                           2 当一个函数没有返回值得时候

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        /*  基础数据类型:
             数字类型:number---->....
             字符串:string----->...
             布尔值:boolean------> true,false
             undefined----->undefined: 两种情况
                           1 变量只声明,未赋值,得到undefined
                           2 当一个函数没有返回值得时候

         */

        // 基础数据类型
        var i=10;
        var f=3.14;
        var s="hello oldboy";

        var b=true;

        console.log(i,typeof i);    // 10   "number"
        console.log(f,typeof f);    // 3.14 "number"
        console.log(s,typeof s);   //  hello oldboy string
        console.log(b,typeof b);   //  true "boolean"

        var  n;
        console.log(n,typeof n) ; // undefined "undefined"

        // 引用数据类型:数组 对象 {"":""}
        var arr=[11,22,33];
        // var info={"name":"egon","age":1000};
        var info={name:"egon",age:1000};
        console.log(arr[2],typeof arr);    //    [11, 22, 33] "object"
        console.log(info,typeof info);  // {name: "egon", age: 1000} "object"
        console.log(info["age"],typeof info);  // {name: "egon", age: 1000} "object"

        //



    </script>
</head>
<body>

</body>
</html>

注:

undefined 是声明了变量但未对其初始化时赋予该变量的值,null 则用于表示尚未存在的对象。如果函数或方法要返回的是对象,那么找不到该对象时,返回的通常是 null。

 

5、运算符

算术运算符:
+ - * / % ++ --

比较运算符:
> >= < <= != == === !==

逻辑运算符:
&& || !

赋值运算符:
= += -= *= /=

字符串运算符:
+ 连接,两边操作数有一个或两个是字符串就做连接运算

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        // 算术运算符:++   --

        var i=10;
        //i+=1;   // i=i+1
        i++;     // i=i+1
        console.log(i);

        // 比较运算符: ===   !==
        console.log(2=="2");  // true
        console.log(2==="2")  // false

        //逻辑运算符:&&   ||   !
        if(2!=2 && 3<2){
            console.log("OK")
        }

        // 字符串的拼接 +

        // NAN  :属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
        // console.log(+"45abc")

    </script>
</head>
<body>

</body>
</html>

 

注意:

1.自加自减

假如x=2,那么x++表达式执行后的值为3,x--表达式执行后的值为1;i++相当于i=i+1,i--相当于i=i-1;
递增和递减运算符可以放在变量前也可以放在变量后:--i

 

2.单元运算符

- 除了可以表示减号还可以表示负号  例如:x=-y 

+ 除了可以表示加法运算还可以用于字符串的连接  例如:"abc"+"def"="abcdef"

 

3.js不同于python,是一门弱类型语言

静态类型语言
一种在编译期间就确定数据类型的语言。大多数静态类型语言是通过要求在使用任一变量之前声明其数据类型来保证这一点的。Java 和 C 是静态类型语言。 

动态类型语言 一种在运行期间才去确定数据类型的语言,与静态类型相反。VBScript 和 Python 是动态类型的,因为它们确定一个变量的类型是在您第一次给它赋值的时候。
强类型语言 一种总是强制类型定义的语言。Java 和 Python 是强制类型定义的。您有一个整数,如果不明确地进行转换 ,不能将把它当成一个字符串去应用。
弱类型语言 一种类型可以被忽略的语言,与强类型相反。JS 是弱类型的。在JS中,可以将字符串 '12' 和整数 3 进行连接得到字符串'123',然后可以把它看成整数 123 ,所有这些都不需要任何的显示转换。 所以说 Python 既是动态类型语言 (因为它不使用显示数据类型声明),又是强类型语言 (因为只要一个变量获得了一个数据类型,它实际上就一直是这个类型了)。

 

4. ==  ===  

等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号相同,只是它们在检查相等性前,不执行类型转换。

         console.log(2==2);   #true
         console.log(2=="2"); #true
         console.log(2==="2");#false
         console.log(2!=="2");#true

 

5.

比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.

比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较.

var bResult = "Blue" < "alpha";
alert(bResult); //输出 true  
在上面的例子中,字符串 "Blue" 小于 "alpha",因为字母 B 的字符代码是 66,字母 a 的字符代码是 97。

 

6、流程控制

  • 顺序结构(从上向下顺序执行)
    <script>
        console.log("1");
        console.log("2");
    </script>
  • 分支结构

if-else结构:

if (表达式){
   语句1;
   ......
   } else{
   语句2;
   .....
   }

 

if-elif-else结构:

if (表达式1) {
    语句1;
}else if (表达式2){
    语句2;
}else if (表达式3){
    语句3;
} else{
    语句4;
}

 

switch-case结构

switch基本格式
switch (表达式) {
    case 值1:语句1;break;
    case 值2:语句2;break;
    case 值3:语句3;break;
    default:语句4;
}


 

  • 循环结构

for循环:

语法规则:

    for(初始表达式;条件表达式;自增或自减)
    {
            执行语句
            ……
    }

 

for循环的另一种形式:

for( 变量 in 数组或对象)
    {
        执行语句
        ……
    }

 

while循环:

while (条件){
    语句1;
    ...
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 流程控制语句: 分支控制语句  循环控制语句

        // if 分支语句:

        // var score=86;
        //
        // if(score>90){
        //     alert("优秀")
        // }
        // else if (score>80){
        //     alert("凑活")
        // }
        // else {
        //     alert("语句体不及格")
        // }

//        switch(6){
//            case 1:console.log(1);    break;
//            case 2:2;    break;
//            case 3:y="星期三";    break;
//            case 4:y="星期四";    break;
//            case 5:y="星期五";    break;
//            case 6:console.log(999);    break;
//            case 7:y="星期日";    break;
//            default: y="未定义";
//            }
        
      // 循环结构 :遍历循环  条件循环

        // while循环
              var count=0;
              while (count<100){
                   if(count%2===0){
                       console.log(count);
                   }
                   if(count===80){
                       break
                   }
                   count++;
              }

        //for 循环

        // 方式1: 推荐
        for(var i=100;i>0;i--){
                  console.log("for:",i)
        }

        // 方式2:

        var arr=[111,222,3,4,45,657];

        for(var i in arr){
           console.log(i,arr[i])
        }

        //

        // for(var i=0;i<arr.length;i++){
        //     console.log(arr[i])
        // }

        

    </script>
</head>
<body>

</body>
</html>
流程控制

 

  • 异常处理
try {
    //这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
    // 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。
    //e是一个局部变量,用来指向Error对象或者其他抛出的对象
}
finally {
     //无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。
}

 

三、JavaScript对象

1、函数

  • 定义
function 函数名 (参数){

    函数体;
    return 返回值;
}

 

用 Function 类直接创建函数的语法如下:

var 函数名 = new Function("参数1","参数n","function_body");
    <script>
    function func1(name){
        alert('hello'+name);
        return 8
    }
    
        ret=func1("hx");
        alert(ret);
    
    
    var func2=new Function("name","alert(\"hello\"+name);")
    func2("hirsi")

    </script>

 

注意:

js的函数加载执行与python不同,它是整体加载完才会执行,所以执行函数放在函数声明上面或下面都可以

 

  • 函数调用
    <script>
        function func1(a,b){
        
            alert(a+b);
        }
        
            func1(1,2);  //3
            func1(1,2,3);//3
            func1(1);    //NaN
            func1();     //NaN

    </script>

 

  • 函数的内置对象arguments
function add(a,b){

        console.log(a+b);//3
        console.log(arguments.length);//2
        console.log(arguments);//[1,2]

    }
    add(1,2)

 

  • 匿名函数
// 匿名函数
    var func = function(arg){
        return "tony";
    }

// 匿名函数的应用
    (function(){
        alert("tony");
    } )()

    (function(arg){
        console.log(arg);
    })('123')

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        // 定义函数   调用一个函数   函数的参数和返回值
        foo();
        function foo() {
            console.log("1234");

            //return "hello";
        }
        // 调用
        var ret=foo();
        console.log(ret);

        // 参数
        function add() {
            console.log(arguments);  //   arguments是实参集合对象  [3,4,6,8]
            var s=0;
            for (var i=0;i<arguments.length;i++){
                s+=arguments[i]
            }
            return s

            // return x+y;
        }

        // var ret2=add(3,6,7,9);
        // console.log(ret2);



        // 匿名函数
        /*
        function (x) {
            console.log(x)
        }

        */
        // 匿名函数的调用
        (function (x) {
            console.log(x)
        })(34)



    </script>
</head>
<body>

</body>
</html>
函数

 

2.Date对象

  • 创建
//方法1:不指定参数
var nowd1=new Date();
alert(nowd1.toLocaleString( ));
//方法2:参数为日期字符串
var nowd2=new Date("2004/3/20 11:12");
alert(nowd2.toLocaleString( ));
var nowd3=new Date("04/03/20 11:12");
alert(nowd3.toLocaleString( ));
//方法3:参数为毫秒数
var nowd3=new Date(5000);
alert(nowd3.toLocaleString( ));
alert(nowd3.toUTCString());

//方法4:参数为年月日小时分钟秒毫秒
var nowd4=new Date(2004,2,20,11,12,0,300);
alert(nowd4.toLocaleString( ));//毫秒并不直接显示

 

  • 获取日期或时间的方法
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月(0-11)
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)

 

  • 设置日期或时间的方法
//设置日期和时间
//setDate(day_of_month)       设置日
//setMonth (month)                 设置月
//setFullYear (year)               设置年
//setHours (hour)         设置小时
//setMinutes (minute)     设置分钟
//setSeconds (second)     设置秒
//setMillliseconds (ms)       设置毫秒(0-999)
//setTime (allms)     设置累计毫秒(从1970/1/1午夜)
    
var x=new Date();
x.setFullYear (1997);    //设置年1997
x.setMonth(7);        //设置月7
x.setDate(1);        //设置日1
x.setHours(5);        //设置小时5
x.setMinutes(12);    //设置分钟12
x.setSeconds(54);    //设置秒54
x.setMilliseconds(230);        //设置毫秒230
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日5点12分54秒

x.setTime(870409430000); //设置累计毫秒数
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日12点23分50秒

 

  • 日期或时间转换的方法

getTimezoneOffset():8个时区×15度×4分/度=480;
返回本地时间与GMT的时间差,以分钟为单位
toUTCString()
返回国际标准时间字符串
toLocalString()
返回本地格式时间字符串
Date.parse(x)
返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.UTC(x)
返回累计毫秒数(从1970/1/1午夜到国际时间)

 

3、Math对象


abs(x)    返回数的绝对值。
exp(x)    返回 e 的指数。
floor(x)对数进行下舍入。
log(x)    返回数的自然对数(底为e)。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)    返回数的正弦。
sqrt(x)    返回数的平方根。
tan(x)    返回角的正切。
//方法练习:
        //alert(Math.random()); // 获得随机数 0~1 不包括1.
        //alert(Math.round(1.5)); // 四舍五入
        //练习:获取1-100的随机整数,包括1和100
             //var num=Math.random();
             //num=num*10;
             //num=Math.round(num);
             //alert(num)
        //============max  min=========================
        /* alert(Math.max(1,2));// 2
        alert(Math.min(1,2));// 1 */
        //-------------pow--------------------------------
        alert(Math.pow(2,4));// pow 计算参数1 的参数2 次方.

 

4、String对象

  • 创建

字符串创建(两种方式)
       ① 变量 = “字符串”
       ② 字串对象名称 = new String (字符串)

var str1="hello world";
var str1= new String("hello word");

 

  • 字符串对象的属性和函数
 x.length         ----获取字符串的长度
 x.toLowerCase()        ----转为小写
 x.toUpperCase()        ----转为大写
 x.trim()               ----去除字符串两边空格       


----字符串查询方法

x.charAt(index) ----获取指定位置字符,其中index为要获取的字符索引

x.indexOf(findstr,index)----查询字符串位置
x.lastIndexOf(findstr)  

x.match(regexp)         ----match返回匹配字符串的数组,如果没有匹配则返回null
x.search(regexp)        ----search返回匹配字符串的首字符位置索引

示例:
var str1="welcome to the world of JS!";
var str2=str1.match("world");
var str3=str1.search("world");
alert(str2[0]);  // 结果为"world"
alert(str3);     // 结果为15
                        

----子字符串处理方法

x.substr(start, length) ----start表示开始位置,length表示截取长度
x.substring(start, end) ----end是结束位置

x.slice(start, end)     ----切片操作字符串
                       
 示例:
                           
 var str1="abcdefgh";
                           
 var str2=str1.slice(2,4);
                           
 var str3=str1.slice(4);
                          
  var str4=str1.slice(2,-1);
                          
 var str5=str1.slice(-3,-1);

                        
    alert(str2); //结果为"cd"
                            
                        
    alert(str3); //结果为"efgh"
                            
                         
   alert(str4); //结果为"cdefg"
                            
                        
    alert(str5); //结果为"fg"


x.replace(findstr,tostr) ----    字符串替换

x.split();                 ----分割字符串
                               
示例: 
 var str1="一,二,三,四,五,六,日"; 
                             
   var strArray=str1.split(",");
                            
    alert(strArray[1]);//结果为"二"
                                
x.concat(addstr)         ----    拼接字符串

 

5、Array(数组)对象

  • 创建
创建方式1:
var arrname = [元素0,元素1,….];          // var arr=[1,2,3];

创建方式2:
var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);

创建方式3:
var arrname = new Array(长度); 
           
// 初始化数组对象: var cnweek=new Array(7); cnweek[0]="星期日"; cnweek[1]="星期一"; ... cnweek[6]="星期六";

 

  • 数组的对象及方法

join方法:

x.join(bystr)       ----将数组元素拼接成字符串

                var arr1=[1, 2, 3, 4, 5, 6, 7];
                var str1=arr1.join("-");
                alert(str1);  //结果为"1-2-3-4-5-6-7" 

 

concat方法:

x.concat(value,...)    ---- 用于连接两个或多个数组。
                   var a = [1,2,3];
                  var b=a.concat(4,5) ;
                  alert(a.toString());  //返回结果为1,2,3            
                  alert(b.toString());  //返回结果为1,2,3,4,5

 

数组排序-reverse sort:

var arr1=[32, 12, 111, 444];
//var arr1=["a","d","f","c"];

arr1.reverse(); //颠倒数组元素
alert(arr1.toString());
//结果为444,111,12,32

arr1.sort();    //排序数组元素
alert(arr1.toString());
//结果为111,12,32,444

 

数组切片操作:

//x.slice(start, end)

//x代表数组对象
//start表示开始位置索引
//end是结束位置下一数组元素索引编号
//第一个数组元素索引为0
//start、end可为负数,-1代表最后一个数组元素
//end省略则相当于从start位置截取以后所有数组元素

var arr1=['a','b','c','d','e','f','g','h'];
var arr2=arr1.slice(2,4);
var arr3=arr1.slice(4);
var arr4=arr1.slice(2,-1);

alert(arr2.toString());
//结果为"c,d" 
alert(arr3.toString());
//结果为"e,f,g,h"
alert(arr4.toString());
//结果为"c,d,e,f,g"

 

删除子数组:

//x. splice(start, deleteCount, value, ...)

//x代表数组对象
//splice的主要用途是对数组指定位置进行删除和插入
//start表示开始位置索引
//deleteCount删除数组元素的个数
//value表示在删除位置插入的数组元素
//value参数可以省略       
        
var a = [1,2,3,4,5,6,7,8];
a.splice(1,2);

alert(a.toString());//a变为 [1,4,5,6,7,8]

a.splice(1,1);

alert(a.toString());//a变为[1,5,6,7,8]

a.splice(1,0,2,3);

alert(a.toString());//a变为[1,2,3,5,6,7,8]

 

数组的push和pop:

//push pop这两个方法模拟的是一个栈操作

//x.push(value, ...)  压栈
//x.pop()             弹栈      

//x代表数组对象
//value可以为字符串、数字、数组等任何值
//push是将value值添加到数组x的结尾
//pop是将数组x的最后一个元素删除


var arr1=[1,2,3];
arr1.push(4,5);
alert(arr1);
//结果为"1,2,3,4,5"
arr1.push([6,7]);
alert(arr1)
//结果为"1,2,3,4,5,6,7"
arr1.pop();
alert(arr1);
//结果为"1,2,3,4,5"

 

数组的shift和unshift:

//x.unshift(value,...)
//x.shift()
//使用注解

//x代表数组对象
//value可以为字符串、数字、数组等任何值
//unshift是将value值插入到数组x的开始
//shift是将数组x的第一个元素删除

var arr1=[1,2,3];
arr1.unshift(4,5);
alert(arr1);  //结果为"4,5,1,2,3"

arr1. unshift([6,7]);
alert(arr1);  //结果为"6,7,4,5,1,2,3"

arr1.shift();
alert(arr1);  //结果为"4,5,1,2,3"

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
             // 字符串对象
            var s="hello wolrd  ";

            console.log(s.toUpperCase());
            console.log(s.charAt(6));    // 通过索引找字符
            console.log(s.indexOf("w")); // 通过字符找索引
            console.log(s.replace("","")); // 字符串的替换
            console.log(s.split(" ")); // 字符串分割成数组
            console.log(s.substr(2,2));   //  截断方法
            console.log(s.substring(2,3)); // 截断方法
            console.log(s.slice(2,-1));       // 切片方法  s[2:-1]

            console.log(s.trim()) ;        // 去除两端空格
            console.log("hello"+"world");

           // 数组对象  []
           var arr=["hello",123,true];
           console.log(arr[2]);

           // 遍历
           for(var i=0;i<arr.length;i++){
               console.log(arr[i])
           }

           // push pop      shift unshift
           // var arr=[111,222,333,444];
           // arr.push(555);
           // console.log(arr);    // [111, 222, 333, 444, 555]
           //
           // var ret=arr.pop();
           //  console.log(ret);
           //  console.log(arr);
           /// ===========
              var arr=[111,222,333,444];
              arr.unshift(555);
              console.log(arr);    //  [555, 111, 222, 333, 444]

              var ret=arr.shift();
              console.log(ret);
              console.log(arr);

           // date对象
              //  当前时间对象
              var date=new Date();
              console.log(date.toString()); //Sun Dec 17 2017 15:33:23 GMT+0800 (中国标准时间)
              console.log(date.toLocaleString()); //2017/12/17 下午3:36:09
             // 具体时间对象
                var date1=new Date("2012,12,12 08:12");
                console.log(date1.toString());
                console.log(date1.toLocaleString()); // 2012/12/12 上午12:00:00

             // 获取时间片信息
                console.log(date.getFullYear());  // 2017
                console.log(date.getDate());     // 17号
                console.log(date.getDay());      // 0
                console.log(date.getHours());    // 15


           // Math对象


             console.log(Math.abs(-1));
             console.log(Math.random());
             console.log(Math.round(3.64));
             console.log(Math.floor(3.14));  // 向下取整
             console.log(Math.ceil(3.64));  // 向上取整





    </script>
</head>
<body>

</body>
</html>
js的对象

 

补充:

四、BOM对象

1、定义

BOM(Browser Object Document)即浏览器对象模型。
BOM提供了独立于内容 而与浏览器窗口进行交互的对象;
由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window;
BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性;

window对象

所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可

 

2、windows对象的方法

alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。

setInterval()      按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

 

3、方法使用

  • alert confirm prompt以及open函数
//----------alert confirm prompt----------------------------
    //alert('aaa');
    
    
    /* var result = confirm("您确定要删除吗?");
    alert(result); */

    //prompt 参数1 : 提示信息.   参数2:输入框的默认值. 返回值是用户输入的内容.

    // var result = prompt("请输入一个数字!","haha");
    // alert(result);


    方法讲解:    
        //open方法 打开和一个新的窗口 并 进入指定网址.参数1 : 网址.
        //调用方式1
            //open("http://www.baidu.com");
        //参数1 什么都不填 就是打开一个新窗口.  参数2.填入新窗口的名字(一般可以不填). 参数3: 新打开窗口的参数.
            open('','','width=200,resizable=no,height=100'); // 新打开一个宽为200 高为100的窗口
        //close方法  将当前文档窗口关闭.
            //close();

 

  • setInterval,clearInterval

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法:     setInterval(code,millisec)
其中,code为要调用的函数或要执行的代码串。millisec周期性执行或调用 code 之间的时间间隔,以毫秒计。
<input id="ID1" type="text" onclick="begin()">
<button onclick="end()">停止</button>

<script>
    function showTime(){
           var nowd2=new Date().toLocaleString();
           var temp=document.getElementById("ID1");
           temp.value=nowd2;

    }
    var ID;
    function begin(){
        if (ID==undefined){
             showTime();
             ID=setInterval(showTime,1000);
        }
    }
    function end(){
        clearInterval(ID);
        ID=undefined;


    }

</script>
示例

 

posted @ 2017-12-18 22:17  小火星_Hirsi  阅读(702)  评论(0编辑  收藏  举报