JavaScript入门

  • ​​1.JS使用的基本语法​​
  • ​​2.JavaScript解析HTML：DOM​​
  • ​​2.1.JavaScript选择器​​
  • ​​2.1.1.id选择器​​
  • ​​2.1.2.name选择器​​
  • ​​2.1.3.通过标签名找到 HTML 元素​​
  • ​​2.2.事件​​
  • ​​2.2.1.常见的HTML事件​​
  • ​​2.2.23.HTML的事件触发​​
  • ​​2.3.JavaScript 能够改变页面中的所有 HTML 元素​​
  • ​​2.4.改变 HTML 属性​​
  • ​​2.5.改变HTML元素的CSS样式​​
  • ​​2.5.1.改变HTML元素的CSS样式​​
  • ​​2.5.2.使用js实现HTML中元素的隐藏或显示​​
  • ​​2.5.3.升级版本​​
  • ​​2.6.JavaScript对HTML元素的增删​​
  • ​​2.6.1.创建新的html元素​​
  • ​​2.6.2.删除HTML元素​​
  • ​​2.6.扩展--“盖大楼” ( 增 删 )​​
  • ​​3.js语法​​
  • ​​3.1.js语法基础​​
  • ​​3.1.1第一个JS例子​​
  • ​​3.1.2JavaScript 语法​​
  • ​​数字​​
  • ​​逻辑型或布尔型​​
  • ​​Undefined 和 null​​
  • ​​字符串​​
  • ​​日期​​
  • ​​数组​​
  • ​​注释​​
  • ​​连接字符和转义字符​​
  • ​​运算符​​
  • ​​3.1.3JavaScript 输出​​
  • ​​3.1.4基本语句​​
  • ​​3.1.5Break 和 Continue 语句​​
  • ​​3.1.6.JavaScript 数据类型的转换​​
  • ​​3.1.7.JavaScript正则表达式​​
  • ​​3.1.8.JavaScript函数​​
  • ​​3.1.9.补充​​
  • ​​3.2.JS对象​​
  • ​​3.2.1.JavaScript Array（数组） 对象​​
  • ​​3.2.2.JavaScript 字符串（String） 对象​​
  • ​​3.2.3.JavaScript Date（日期） 对象​​
  • ​​3.2.4.JavaScript Number 对象​​
  • ​​3.2.5.JavaScript Math（算术） 对象​​
  • ​​3.2.6JavaScript面向对象编程（了解）​​
  • ​​4.浏览器对象:BOM​​
  • ​​4.1.Window Screen​​
  • ​​4.2.Location的核心属性​​
  • ​​4.3.window.history 对象包含浏览器的历史。​​
  • ​​4.4.window.navigator 对象包含有关访问者浏览器的信息。​​
  • ​​4.5JavaScript 弹窗​​

1.JS使用的基本语法

页面内单独使用

<script type="text/javascript">
  alert("Hello World:js")
</script>

单独写在一个js文件中使用

使用步骤：
1）需要先创建一个.js文件，然后在里面写js代码
2）在需要使用的页面引入刚定义好的.js文件才会起到作用

2.JavaScript解析HTML：DOM

2.1.JavaScript选择器

2.1.1.id选择器

通过 id 查找 HTML 元素，如果找到该元素，则该方法将以对象的形式返回该元素。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JS的第一个例子</title>
    <script type="text/javascript">
      function quickStart(){
      var x=document.getElementById("te").value
      alert(x)
      alert("获取到的数据的类型为："+typeof(x))
      var afterX=parseInt(x)
      alert("获取到的数据的类型为："+typeof(afterX))
      }
      
    </script>
  </head>
  <body>
    <input type="text" id="te" value="" />
    <input type="button" value="点击" onclick="quickStart()" />
  </body>
</html>
2.1.2.name选择器

通过name查找到HTML的元素，如果找到元素了，则会返回一个数组

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JS的第一个例子</title>
    <script type="text/javascript">
      function quickStart(){
      //1.通过name选择器获取到一组元素
        var habbies=document.getElementsByName("like")
        
        //2.对数组进行循环
        for(var i =0;i<habbies.length;i++){
          alert(habbies[i].value)
          }
      }
    </script>
  </head>
  <body>
     <input type="button" value="点击" onclick="quickStart()" />
      唱歌 <input type="checkbox" name="like" value="唱歌"/>
     打球<input type="checkbox" name="like" value="打球"/>
      跳舞<input type="checkbox" name="like" value="跳舞"/>
  </body>
</html>
2.1.3.通过标签名找到 HTML 元素
getElementsByTagName("p");
var habbies=document.getElementsByTagName("input")//其他的都与步骤2一样

2.2.事件

2.2.1.常见的HTML事件
  • onchange HTML 元素改变
  • onclick 用户点击 HTML 元素
  • onmouseover 用户在一个HTML元素上移动鼠标
  • onmouseout 用户从一个HTML元素上移开鼠标
  • onkeydown 用户按下键盘按键
  • onload 浏览器已完成页面的加载
  • onmouseover、onmouseout(注重结果)；
  • onmouseenter、onmouseleave(注重过程)；
  • 详解
    1、onmouseover、onmouseout：
    鼠标经过时自身触发事件，经过其子元素时也触发该事件(会冒泡)；（父亲有的东西，儿子也有）
    2、onmouseenter、onmouseleave：
    鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有）

JavaScript基础（一篇入门）_java

2.2.23.HTML的事件触发

那么JavaScript 可以做什么？ 答案肯定是响应：
怎样响应：执行函数

<body >
    <script type="text/javascript">
        function quickEyes()
        {
            alert("确认过眼神，我就是你最爱的人");  
        }
    </script>
    <input type="button" value="函数--求和" onclick="quickEyes()"/> 
</body>

2.3.JavaScript 能够改变页面中的所有 HTML 元素

document.getElementById("p1").innerHTML="新文本!";

2.4.改变 HTML 属性

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JS解析DOM之更改HTML中元素的属性</title>
    <script type="text/javascript">
      function res(){
                var btn1=document.getElementById("btn1");
                btn1.disabled=false;  //恢复按钮的点击;
                btn1.value="可以点击了"; //更新按钮显示的内容;
      }
    </script>
  </head>
  <body>
    <input type="button" value="禁用" id="btn1" disabled="disabled" />
    <input type="button" value="恢复" onclick="res()" />
  </body>
</html>

2.5.改变HTML元素的CSS样式

2.5.1.改变HTML元素的CSS样式
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
        <script type="text/javascript">
            function updateHtmlCss(){
                alert("进入")
                var p1=document.getElementById("p1")
                    p1.style.color="red"
                    p1.style.fontSize="28px"
                    p1.style.fontFamily="微软雅黑"
            }
        </script>
  </head>
  <body>
    <p id="p1">Hello World!</p>
    <input type="button" value="改变 HTML 样式"  onclick="updateHtmlCss()" />
  </body>
</html>
2.5.2.使用js实现HTML中元素的隐藏或显示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function hiddenElement(){
                alert("隐藏")
                var box=document.getElementById("box")
                box.style.display="none"
                //box.style.visibility="hidden"
            }
            function showElement(){
                alert("显示")
                var box=document.getElementById("box")
                box.style.display="block"
                //box.style.visibility="visible"
            }
        </script>
    </head>
    <body>
        <div id="box" style="display: block;">
            <p>上海滩</p>
            <p>大上海。。。百乐门。。。。</p>
        </div>
        <input type="button" value="隐藏"  onclick="hiddenElement()" />
        <input type="button" value="显示"  onclick="showElement()" />
    </body>
</html>
2.5.3.升级版本
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
        <script type="text/javascript">
            function hiddenAndShow(){
                    var btn1=document.getElementById('btn');
                    var box=document.getElementById("box")
                    alert(btn1.value)
                    if(btn1.value=="隐藏"){
                        box.style.display="none"
                        btn1.value="显示"
                    }
                    else{
                        box.style.display="block"
                        btn1.value="隐藏"
                    }
            }
        </script>
  </head>
  <body>
    <div id="box" >
      <p>上海滩</p>
      <p>大上海。。。百乐门。。。。</p>
    </div>
    <input type="button" id="btn" value="隐藏"  onclick="hiddenAndShow()" />
  </body>
</html>

2.6.JavaScript对HTML元素的增删

2.6.1.创建新的html元素
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

            function addElement(){
                var div1=document.getElementById('div1');
                var para=document.createElement("p");
                var node=document.createTextNode("这是一个新段落的内容：666");
                para.appendChild(node);
                div1.appendChild(para)
            }
        </script>
    </head>
    <body>
        <div id="div1">
            <p id="p1">这是一个段落。</p>
            <p id="p2">这是另一个段落。</p>
        </div>
        <input type="button" id="btn" value="增加"  onclick="addElement()" />
    </body>
</html>
2.6.2.删除HTML元素
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

            function removeElement(){
                var parent=document.getElementById('div1');
                var child=document.getElementById('p1');
                parent.removeChild(child)
            }
        </script>
    </head>
    <body>
        <div id="div1">
            <p id="p1">这是一个段落。</p>
            <p id="p2">这是另一个段落。</p>
        </div>
        <input type="button" id="btn" value="删除"  onclick="removeElement()" />
    </body>
</html>
2.6.扩展–“盖大楼” ( 增 删 )
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function addRows() {
                var table = document.getElementById("tad");    
                var oneRow = table.insertRow();//插入一行  
                oneRow.id=getRowId()
                alert(oneRow.id)
                var cell1= oneRow.insertCell();//单单插入一行是不管用的，需要插入单元格  
                var cell2=oneRow.insertCell();  
                cell1.innerHTML = "第一列的内容";   
                cell2.innerHTML="第二列的内容：<a  href=\"javascript:delRows('"+oneRow.id+"')\"  >[删除]<\a>";  
            }
            function delRows(a){
                alert("删除该行"+a)
                var newTr=document.getElementById(a)
                alert(newTr.id)
                newTr.parentNode.removeChild(newTr);
            }
            function getRowId(){
                return Math.floor(Math.random()*256)
            }
        </script>
    </head>
    <body>
        <table width="100%" height="300px" border="1px"  id="tad">  
            <tr>
                <td>商品单价</td>
                <td>商品数量</td>
            </tr> 
        </table>
        <input type="button" value="添加一行" onclick="addRows()" />
    </body>
</html>

3.js语法

3.1.js语法基础

3.1.1第一个JS例子
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body >
        <script type="text/javascript">
            alert("Hello World")
        </script>
    </body>
</html>

小结：

  • 1.js在页面内使用的时候必须要写在
3.1.2JavaScript 语法
  • JavaScript： 是一个脚本语言。它是一个轻量级，但功能强大的编程语言
  • 数据类型：虽然JavaScript在书写校验上不去区分数据的类型，但是并不意味着是不区分数据类型，而是通过在浏览器中内置的JS解析器/引擎自动的去判断的
数字
1.1数字：
        var a=12 //整数
        var b=2.3 //浮点数或者说是小数型
        var c=-0.5
友情提示：1）在js中变量名必须以字母或下划线（"_"）开头
        2）变量可以包含数字、从 A 至 Z 的大小写字母
        3）JavaScript 区分大小写，即变量 myVar、 myVAR 和 myvar 是不同的变量
逻辑型或布尔型
var a= true
          var b=false
          alert(a)
          alert(b)
Undefined 和 null
  • Undefined： 用于存放 JavaScript 的 undefined 值，表示一个未声明的变量，或已声明但没有赋值的变量，或一个并不存在的对象属性
  • null:可以通过将变量的值设置为 null 来清空变量，其意思为空值
var a="" 
      var a=null 
      var a
      alert(typeof(a))
字符串

可以使用单引号或双引号

var firstName="biil"
        var familyName='Gates'
        alert(firstName+familyName)
日期

Date是js中的一个内置的类
new：为类Date在内存中创建一个内存空间，进而实现实例化

var myDate=new Date() 
        alert(myDate)/*默认是格里尼形式的日期格式*/

提示：Date: 是js中的一个内置的类
new：为类Date在内存中创建一个内存空间，进而实现实例化
补充：关键字：就是具有特殊含义的词

数组

是一种存放数据的容器，其一般可以存放多个，且需要知道其长度

var array=[40, 100, 1, 5, 25, 10]
       alert(array[0])
注释
单行注释：//
多行注释：/**/

扩展：注释的作用：
1）统一规范
2）注解，帮助理解/阅读代码
3）扯淡

连接字符和转义字符
  • 连接字符：在js中场用+表示为连接字符
  • 转义字符：具有特殊含义的字符
例如： var a=123
alert('变量a的值为：'+a)
\n  换行符     alert(“这是第一局 \n 这是第二句”)
\t  制表符   alert(“这是第一局 \t 这是第二句”)
运算符
2.1算术运算符： +， -， *，  /， %，++，--
++：自动加1 例如 var a=12
                           alert(a++)
++在前：先计算再输出；  ++在后：先输出再计算
--：自动减1，例如 var h=6
                           alert(a--)
---------------------------------------------------------------------------------------------------------
2.2关系运算符： > ，>=， <，<=, !=, ==（值比较）,=== （全等于）
---------------------------------------------------------------------------------------------------------
2.3逻辑运算符：
与 ：&&   ：全真为真，只要有一个假则为假
或 ：||   ：全假为假，只要有一个为真则为真
非 ：!    ：取相反的
3.1.3JavaScript 输出

JavaScript 可以通过不同的方式来输出数据：
1）使用 window.alert() 弹出警告框。

<!DOCTYPE html>
<html>
    <body>
        <h1>使用 window.alert() 弹出警告框</h1>
        <script>
            window.alert(5 + 6);
        </script>
    </body>
</html>

2）使用 document.write() 方法将内容写到 HTML 文档中。

<!DOCTYPE html>
<html>
    <body>
        <h1>我的第一个 Web 页面</h1>
        <script>
            document.write(123);
        </script>
    </body>
</html>

3）使用 innerHTML 写入到 HTML 元素。

<!DOCTYPE html>
<html>
    <body>

        <h1>使用 innerHTML 写入到 HTML 元素</h1>
        <p id="demo">我的第一个段落</p>
        <script type="text/javascript">
            document.getElementById("demo").innerHTML = "段落已修改。";
        </script>
    </body>
</html>
3.1.4基本语句

1）顺序语句：js默认是从上向下自动执行的

2）选择语句：

2.1）二路分支：
if(条件)
{
    //JavaScript代码;
}
else
{
    //JavaScript代码;
}

---------------------------------------------------------------------------------------------------------
    
    多路决策：
switch (表达式)
{
    case 常量1 : 
        JavaScript语句;
        break;
    case 常量2 : 
        JavaScript语句;
        break;
        ...
        default : 
        JavaScript语句;
}
小结：switch...case...default不仅有多路决策的特性，还有穿透性

    ---------------------------------------------------------------------------------------------------------
    
    或者：
if (time<10)
{
    alert("<b>早上好</b>");
}
else if (time>=10 && time<16)
{
    alert("<b>今天好</b>");
}
else
{
    alert("<b>晚上好!</b>");
}

3）循环语句：

for循环语句：
for (var i=0;i<10;i++)
{ 
    alert("当前i的值为:"+i)
}

---------------------------------------------------------------------------------------------------------

while循环语句：
var i =1
while (i>5)
{
   alert("当前i的值为："+i)
    i++;
}

---------------------------------------------------------------------------------------------------------

do...while循环：
var i=5
do
{
   alert("执行了")
    i++;
}
while (i<5);

备注：

  • for：知道次数的循环
  • while：>=0次的循环
  • do…while：>=1次的循环
3.1.5Break 和 Continue 语句
  • break 语句用于跳出循环。
  • continue 用于跳过循环中的一个迭代。
for (i=0;i<10;i++)
{
    if (i==3)
    {
        break;//结束本重循环
    }
    alert("当前i的值为："+i)
}
for (i=0;i<=10;i++)
{
    if (i==3){
        continue//结束本次循环
    }
    alert("当前i的值为："+i)

}
3.1.6.JavaScript 数据类型的转换
1.typeof 操作符：可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。
 
---------------------------------------------------------------------------------------------------------

2.将数字转换为字符串
             var a=123
            //var castResult=String(a)
            var castResult2=a.toString()
            alert(typeof(castResult2))

---------------------------------------------------------------------------------------------------------

3.将字符串转换为数字

            var a="123"
        var  b=Number(a)
        var  b=parseInt(a)//浮点数不常用
            alert(typeof(b))
            alert(b+998)
3.1.7.JavaScript正则表达式
1.match():匹配字符串
            var  a="jack"
        var  b="[a-z]+"
           
        alert((a.match(b))!=null? true:false)

---------------------------------------------------------------------------------------------------------
            
2.search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置
           var str = "Super Start"; 
           alert(str.search("pe"))//返回查找到的下标位置
           alert(str.search("wyh"))//查查找不到的时候返回-1

---------------------------------------------------------------------------------------------------------
               
3.replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
           var str = "Super Start"; 
           alert(str.replace("Start","wyh"))

ps:用一定的规律描述出来的表达式，匹配则执行，不匹配不执行

3.1.8.JavaScript函数
1.js中的函数定义
语法： function 函数名( ){

}
示例一：
    <script type="text/javascript">

        function sum(a,b){
        alert(a+b)
    }        
    </script>
<input type="button" value="函数--求和" onclick="sum(2,3)"/> 

---------------------------------------------------------------------------------------------------------
    
示例二：
var fun=function(){  
    alert("匿名函数");  
}  
fun(); //执行匿名函数

---------------------------------------------------------------------------------------------------------

示例三：
var aa = function(x,y){  
    alert(x+y);  
}(1,2);

小结：1）js中的函数可以没有返回值，就是不必须要有return
2 ) 常用事件(点击，鼠标移入，键盘输入)来触发函数，也可以匿名自执行函数（见示例三）
3）函数可以没有名字，这样的函数称之为匿名函数（现实世界中的一首歌曲：《干就完了》）

3.1.9.补充

==称作（相等）

===称作（严格相等）

对于Array,Object等高级类型，== 和 ===是没有区别的

js中的基本数据类型：undefined，boolean，number，string，null.

js中高级类型：Object、Array和Function

3.2.JS对象

3.2.1.JavaScript Array（数组） 对象

1.数组对象：是使用单独的变量名来存储一系列的值

1）创建一个数组：有3种方式

1: 常规方式:
var myCars=new Array(); 
myCars[0]="BYD";       
myCars[1]="Volvo";
myCars[2]="BMW";

2.简洁方式:
var myCars=new Array("Saab","Volvo","BMW");

3.字面方式:
var myCars=["Saab","Volvo","BMW"];

2）访问数组：通过指定数组名以及索引号码，你可以访问某个特定的元素

例如：var name=myCars[0];

3）数组方法和属性：

var x=myCars.length             // myCars 中元素的数量
var y=myCars.indexOf("Volvo")   // "Volvo" 值的索引值

4）数组排序

sort():按照字符进行升序

<body>
<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.sort();
  var x=document.getElementById("demo");
  x.innerHTML=fruits;
}
</script>
</body>

reverse（）：将一个数组中的元素的顺序反转（即是将数组中的元素的头变成了尾，尾变成了头，可不是其他的）
提示：fruits.reverse() 其他的都不变

3.2.2.JavaScript 字符串（String） 对象

字符串中常用的属性和方法

  • str.length:获取字符串的长度
  • str.match(""):内容匹配
  • str.replace():替换内容
例如：str="Welcome to beiJing"
    var n=str.replace("beiJing","shangHai");替换内容
    str.toUpperCase()，str.toLowerCase()：字符串大小写转换
    str.split(","):字符串的截取
3.2.3.JavaScript Date（日期） 对象

1.日期的常用方法
getDate()：如何使用 getDate() 来取得当前月份的日期。

myDate.getFullYear()+“"+myDate.getMonth()+"”+myDate.getDay()+“"+myDate.getHours()+"”+myDate.getMinutes()+"****"+myDate.getSeconds()

var time = new Date( ); //获得当前时间

Date()  //  返回当日的日期和时间。
getDate()  // 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()  //  从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()  //  从 Date 对象返回月份 (0 ~ 11)。
getFullYear()  // 从 Date 对象以四位数字返回年份。
getYear()  // 请使用 getFullYear() 方法代替。
getHours()  //  返回 Date 对象的小时 (0 ~ 23)。
getMinutes()  //  返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()  //  返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()  // 返回 Date 对象的毫秒(0 ~ 999)。
getTime()  // 返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()  // 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()  //  根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()  // 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth()  // 根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear()  //  根据世界时从 Date 对象返回四位数的年份。
getUTCHours()  // 根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes()  // 根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds()  // 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds()  //  根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse()  // 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()  // 设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()  //  设置 Date 对象中月份 (0 ~ 11)。
setFullYear()  // 设置 Date 对象中的年份（四位数字）。
setYear()  // 请使用 setFullYear() 方法代替。
setHours()  //  设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()  //  设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()  //  设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()  // 设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()  // 以毫秒设置 Date 对象。
setUTCDate()  //  根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth()  // 根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear()  //  根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours()  // 根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes()  // 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds()  // 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds()  //  根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource()  //  返回该对象的源代码。
toString()  //  把 Date 对象转换为字符串。
toTimeString()  //  把 Date 对象的时间部分转换为字符串。
toDateString()  //  把 Date 对象的日期部分转换为字符串。
toGMTString()  // 请使用 toUTCString() 方法代替。
toUTCString()  // 根据世界时，把 Date 对象转换为字符串。
toLocaleString()  //  根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString()  //  根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString()  //  根据本地时间格式，把 Date 对象的日期部分转换为字符串。
UTC()  // 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf()  // 返回 Date 对象的原始值。
3.2.4.JavaScript Number 对象

1.Number: 数字对象，经过封装的能让你处理数字值的对象

2.常量，属性

MAX_VALUE 可表示的最大的数。 // 1.7976931348623157e+308 
MIN_VALUE 可表示的最小的数。 // 5e-324 
NaN 非数字值。 // NaN 
NEGATIVE_INFINITY 负无穷大，溢出时返回该值。//-Infinity 
POSITIVE_INFINITY 正无穷大，溢出时返回该值。//Infinity 

例如： //alert(Number.MAX_VALUE+","+Number.MIN_VALUE)
      var a="123";
      var b="Jack";
      alert(Number(b));//NaN:not a number :不是一个数字

3.方法

toString():将类型转换成字符串
3.2.5.JavaScript Math（算术） 对象

1.Math 对象：用于执行数学任务

语法
var x = Math.PI; // 返回PI
var y = Math.sqrt(16); // 返回16的平方根

2.Math 对象方法

abs(x)  返回 x 的绝对值。
ceil(x) 对数进行上舍入。
floor(x)  对 x 进行下舍入。
max(x,y,z,...,n)  返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n)  返回 x,y,z,...,n中的最低值。
pow(x,y)  返回 x 的 y 次幂。
random()  返回 0 ~ 1 之间的随机数。
round(x)  把数四舍五入为最接近的整数。
sqrt(x) 返回数的平方根。
3.2.6JavaScript面向对象编程（了解）

1.对象：是属性和/方法的组合
属性：是对象所拥有的一组外观特征，一般为名词
方法：是对象可以执行的功能，一般为动词
例如：对象：汽车
属性：型号：法拉利 颜色：绿色
方法：前进、刹车、倒车

PS:三类已经存在的对象：
浏览器对象：BOM(已经存在于浏览器中的，到时候我们直接调用即可，例如Screen,History,Location,Navigator)
js脚本对象:数组，字符串，日期，Math等(JS语言中已经写好的具有某一些功能的对象，例如Array,Number,Math…)
HTML文档对象：DOM（已经存在于HTML中的，且已经写好了，用的时候可以直接调用即可，例如Document）

2.js面向对象编程实例
<body>
     <script type="text/javascript">
        　function Cat(name,color){
　　　　this.name = name;
　　　　this.color = color;
　　　　this.type = "猫科动物";
　　　　this.eat = function(){alert("吃老鼠");};
　　}
   var cat1 = new Cat("大毛","黄色");
　　var cat2 = new Cat ("二毛","黑色");
　　alert(cat1.type); // 猫科动物
　　cat1.eat(); // 吃老鼠
     </script>
</body>

4.浏览器对象:BOM

4.1.Window Screen

Window Screen:包含有关用户屏幕的信息 , window.screen对象在编写时可以不使用 window 这个前缀。

1)常用的属性
screen.width / screen.height:总宽度/高度

screen.availWidth /screen.availHeight:可用宽度/高度

screen.colorDepth: 颜色深度 

screen.pixelDepth: 颜色分辨率

4.2.Location的核心属性

  • location.hostname 返回 web 主机的域名
  • location.pathname 返回当前页面的路径和文件名
  • location.port 返回 web 主机的端口 （80 或 443）
  • location.protocol 返回所使用的 web 协议（http:// 或 https://）
  • location.href 属性返回当前页面的 URL。
  • location.assign()方法：加载新的文档
<html>
    <head>
        <meta charset="utf-8" />
        <script>
            function newDoc()
            {
                window.location.assign("http://www.w3cschool.cc")
            }
        </script>
    </head>
    <body>
        <input type="button" value="Load new document" onclick="newDoc()">
    </body>
</html>

4.3.window.history 对象包含浏览器的历史。

一些方法：

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同

例如：从一个页面跳转到当前页面的时候，可以用这个进行页面的跳转

<html>
    <head>
        <meta charset="utf-8" />
        <script>
            function goBack()
            {
                window.history.back()
            }
        </script>
    </head>
    <body>
        <input type="button" value="Back" onclick="goBack()">
    </body>
</html>

4.4.window.navigator 对象包含有关访问者浏览器的信息。

txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;

4.5JavaScript 弹窗

JavaScript 弹窗:可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框

1)警告框

<!DOCTYPE html>
<html>
    <head>
        <script>
            function myFunction()
            {
                alert("你好，我是一个警告框！");
            }
        </script>
    </head>
    <body
          <input type="button" onclick="myFunction()" value="显示警告框">
    </body>
</html>

2）确认框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>确认框</title>
    </head>
    <body>
        <p>点击按钮，显示确认框。</p>
        <button onclick="myFunction()">点我</button>
        <p id="demo"></p>
        <script>
            function myFunction(){
                var x;
                var r=confirm("按下按钮!");
                if (r==true){
                    x="你按下了\"确定\"按钮!";
                }
                else{
                    x="你按下了\"取消\"按钮!";
                }
                document.getElementById("demo").innerHTML=x;
            }
        </script>
    </body>
</html>

3）提示框

提示框经常用于提示用户在进入页面前输入某个值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>提示框</title>
    </head>
    <body>
        <p>点击按钮查看输入的对话框。</p>
        <button onclick="myFunction()">点我</button>
        <p id="demo"></p>
        <script>
            function myFunction(){
                var x;
                var person=prompt("请输入你的名字","Harry Potter");
                if (person!=null && person!=""){
                    x="你好 " + person + "! 今天感觉如何?";
                    document.getElementById("demo").innerHTML=x;
                }
            }
        </script>
    </body>
</html>