js笔记

Day01

客户端与服务器端

1 javascript 脚本语言:嵌入到网页上,实现一些动态的效果

              动态的显示

              数据录入的验证

              DOM效果(动态的安排页面元素的显示)

              BOM效果:browser

 

2 javascript 的基础应用--UI相关

  JQuery

  Ajax

 

3 NetScape---javascript语言

  Microsoft---JScript

 

4 语言特点

              一种基于对象和事件驱动的脚本语言

              由浏览器软件解释运行

 

5 基础语法

              弱类型的语言

              统一使用var声明变量,变量的类型以赋值为准

                            var s = "hello";

                            var n = 12;

                            n = true;

              变量的命名(标识符)

                            字母/数字/下划线/$组成

                            不能以数字开头

                            大小写敏感

              语句:以分号结束

              注释: //              /**/

 

6 书写脚本的方式

              <head><script>

              js文件:脚本代码书写在一个后缀为js的文件里

                            引入js文件

 

7 流程控制语句

              条件语句:if/else   switch/case

              循环语句:for/while

 

8 数据类型的转换

              弱类型的语言:

                            ==  比较的值

                            === 比较值和类型---严格相等

                            奇怪的比较,比如 0 ""

                                             比如 0 true

             

              基础数据类型:string/number/bool

              其他:null/undefined

 

              直接(隐式)转换:不同数据类型进行运算

                            string number:string

                            number bool:number

                            string bool:string

 

              显式转换:

                            转换为数值类型:parseInt/parseFloat

                            有可能转换失败:

                                          isNaN:is not a number

 

                                          var i = parseInt("12");

                                          var i = parseint("12");//error

                            转换为字符串类型:toString

 

 

6 常用内置对象

              String/Array/Math/Date

 

7 DOM:动态的安排页面元素

 

8 BOM/高级应用

 

first.html

<html>

              <head>

                            <script language="javascript">

                                          function FirstMethod()

                                          {

                                                        alert("hello!");

                                          }

                            </script>

                            <!--引入外部的js文件-->

                            <script language="javascript" src="first.js"></script>

              </head>

              <body>

                            <form>

                                          <input type="button" value="第一个按钮" οnclick="FirstMethod();">

                                          <input type="button" value="调用js中的方法" οnclick="SecondMethod();">

                                          <input type="button" value="1累加45的和" οnclick="TestSum();">

                                          <br>

                                          <input type="button" value="测试数据类型" οnclick="TestType();">

                                          <input type="button" value="数据类型的隐式转换" οnclick="TestConvert();">

                                          <br>

                                         计算录入数值的平方:

                                          <input type="text" id="txtNumber" value="12">

                                          <!--放置一个文本标记-->

                                          <span id="spanInfo"></span>

                                          <input type="button" value="Calculate" οnclick="Calculate();">

 

                            </form>

              </body>           

</html>

first.js

//只能包含符合js语法的代码

function SecondMethod()

{

              alert("位于js文件中的方法");

}

 

function TestSum()

{

              var sum = 0;

              for(var i=0;i<=45;i++)

              {

                            sum += i;

              }

              alert(sum);

}

 

function TestType()

{

              var s = "100";

              var n = 100;

              //测试相等

              if(s == n)

                            alert("equal");

              else

                            alert("no");

              //测试相同

              if( s === n)

                            alert("same");

              else

                            alert("no");

              //比较数值0和空字符串

              if ( 0 == "")

                            alert("ok");

}

 

//测试隐式转换

function TestConvert()

{

              var s = "aa";

 

              var n1 = 100;

              var n2 = 200;

              alert(n1+n2);//300

              alert(s+n1);//aa100

 

              var b1 = true;

              var b2 = false;

              alert(b1+b2);//1

 

              alert(n1 + b1);//101

              alert(s + b1);//aatrue

}

 

function Calculate() {

              //找到文本框元素并得值

              var txt = document.getElementById("txtNumber");

              var data = txt.value;

              var span = document.getElementById("spanInfo");

              //先判断

              if(isNaN(data)) {

                            //提示

                            //alert("请重新录入");

                            span.innerHTML = "请录入数值类型";

              }

              else {

                            //转换为数值类型

                            var n = parseInt(data);

                            //将结果显示在文本框

                            var result = n* n;

                            txt.value = result.toString();

                            span.innerHTML = "";

              }

}

 

 

 

Day02

客户端与服务器端

 

1 javascript 脚本语言:嵌入到网页上,实现一些动态的效果

              动态的显示

              数据录入的验证

              DOM效果(动态的安排页面元素的显示)

              BOM效果:browser

 

2 javascript 的基础应用--UI相关

  JQuery

  Ajax

 

3 NetScape---javascript语言

  Microsoft---JScript

 

4 语言特点

              一种基于对象和事件驱动的脚本语言

              由浏览器软件解释运行

 

5 基础语法

              弱类型的语言

              统一使用var声明变量,变量的类型以赋值为准

                            var s = "hello";

                            var n = 12;

                            n = true;

              变量的命名(标识符)

                            字母/数字/下划线/$组成

                            不能以数字开头

                            大小写敏感

              语句:以分号结束

              注释: //              /**/

 

6 书写脚本的方式

              <head><script>

              js文件:脚本代码书写在一个后缀为js的文件里

                            引入js文件

 

7 流程控制语句

              条件语句:if/else   switch/case

              循环语句:for/while

 

8 数据类型的转换

              弱类型的语言:

                            ==  比较的值

                            === 比较值和类型---严格相等

                            奇怪的比较,比如 0 ""

                                             比如 0 true

             

              基础数据类型:string/number/bool

              其他:null/undefined(声明了但是没有赋值)

 

              直接(隐式)转换:不同数据类型进行运算

                            string number:string

                            number bool:number

                            string bool:string

 

              显式转换:

                            转换为数值类型:parseInt/parseFloat

                            有可能转换失败:

                                          isNaN:is not a number

 

                                          var i = parseInt("12");

                                          var i = parseint("12");//error

                            转换为字符串类型:toString

 

              获取变量的数据类型

                            typeof(s)---string/number/bool/object

 

9 内置对象(string)

              创建一个字符串对象:一对单引号或者双引号括起文本

                            var s = "mary";

                            var s = 'mary';

                            var s = new String("mary");

 

              属性

                            s.length

 

              方法

              获取单个字符

                            charAt(index)--字符

              查询字符出现的位置

                            indexOf("a")---位置 -1

                            lastIndexOf

              截取子字符串

                            substring(start,end)

                                          end是真实的结束位置加1

              大小写转换

                            toLowerCase

                            toUpperCase

                                          GCD Gcd GCd gcd

              常和正则表达式一起使用

                            replace(findstr,replacestr)

                                         

                            search("abc")---index

                            search(/\d+/)

 

                            match---匹配的结果--数组

 

              正则表达式:匹配/替换/搜索等

                            匹配 \d \w [a-e] \d{3,5}

                                 +(1-n)

                                 ?(0/1)

                                 *(0-n)

              拆分方法

                            split(",")---数组

 

10 常用内置对象(Array)

              创建数组,初始化

                            var a = new Array();

                            a[0] = "mary";

                            a[1] = true;

                            a[2] = 100;

                            //

                            var a = ["mary",true,100];

 

              属性:length

 

              方法

                            得到数组的内容

                                          join("|")

                                          toString();返回以逗号分开的内容串联值

                            数组的相加,得到一个大数组

                                          a1.concat(a2)

                            返回数组的一部分

                                          a1.slice(start,end)--end还是+1

                            翻转

                                          reverse()

                            排序

                                          sort():按照字符串的比较

                                          sort(方法的名称):传入一个方法对象

 

11 常用内置对象Math

              使用 Math.

              属性:常用于得到数学常数

                            Math.PI

 

              方法

                            计算用:min/max/round/ceil/floor

                                          random:0=< <1的小数

                            复杂计算:

                                         三角函数sin

 

12 function 对象

              声明和调用

                            function MethodName(p1,p2,p3)

                            {

                                          //方法语句

                                          return返回值;

                            }

 

                            var r = MethodName(12,34);

 

              方法的重载:没有

                            如果定义了相同名称的方法,以最后一次定义的为准

 

              必须要实现类似于重载的效果:

                            arguments:得到当前方法的参数的数组

                            方法定义时,没有定义参数,依然可以传入

                            传入的参数都存放到arguments

                                          function M()

                                          {

                                                        //方法体

                                          }

 

              局部变量和全局变量

              脚本中直接调用执行方法:在页面显示之前就执行

 

练习:模拟机选一注双色球号码

              按钮,点击:

              1/随机出6133(包括133)之间的整数

              2/6个数不能重复,且按照升序排列,显示

              3/随机出1116(包括116)之间的整数

              4/显示在界面上

             

13  DOM:document object model

              将整个 html文档对象化:树形结构

              第一步:找到目标节点

                            通过id查找单个节点:document.getElementById

                            查找多个节点:document.getElementsByTagName

                                         查找某类,返回节点对象的数组

 

              第二步:操作目标节点(查询,修改)

查询: html标记对象化--元素标记的属性作为对象的属性用

                            比如style为集合属性

                                          obj.style.样式属性

                                          style.color

                                          style.backgroundColor

                                          style.fontSize

                            样式比较复杂:

                                         声明样式类

                                          obj.className = "有效的样式类的名称";

                                         

     .innerHTML        --元素标记的文本内容

 

常见的效果:页签/二级菜单/输入验证

              输入验证:检查用户的录入,提示,不允许提交

              正则表达式的用法:

                            和字符串对象的方法一起使用:实现对于字符串的操作处理

                                          string.replace/search/match

                            使用正则表达式对象的方法实现验证

                                          var reg = /[a-z]{3}/;

                                          reg.test(string)--bool

              取消事件:取消提交

                            onxxxx = "return false;"

 

先在页面上布置好标记,修改样式/文本

 

创建新元素

              createElement("a/img/input")

              appendChild--追加

              parent.insertBefore(newEle,refEle)

                            --定位在谁的某个子元素前面

 

              obj.childNodes[index]

其他操作

              obj.removeChild(childNode)

              obj.replaceChild(newEle,oldChildNode)

 

下拉框的联动效果

 

 

 

 

 

 

 

 

 

 

 

 

onclick

onblur:失去焦点,录入完毕

onmouseover:移入

onmouseout:移出

onchange:下拉框的选择改变

 

second.html

<html>

              <head>                           

                            <link type="text/css" href="second.css" rel="stylesheet">

                            <script language="javascript">

                                         

                            </script>

                            <!--引入外部的js文件-->

                            <script language="javascript" src="second.js"></script>

              </head>

              <body>

<!--下拉框联动的效果-->

<form>

              <select id="selSubjects" οnchange="showClasses();" >

                            <option>--请选择--</option>

                            <option>java</option>

                            <option>php</option>                         <option>.net</option>

              </select>

              <select id="selClasses">

              </select>

</form>

 

<!--模拟登陆的验证-->

<form id="form1">

              <input type="button" value="在页面上添加新元素" οnclick="createNewObj();">

              <br>

              用户名:

              <input id="txtName" type="text" οnblur="checkName();" ><!--目标位置-->

              <span id="nameError"></span>

              <br>

              密码:

              <input id="txtPwd" type="text" οnblur="checkPwd();" >

              <span id="pwdError"></span>

              <br>

              <input type="submit" value="login" οnclick="return checkData();">

</form>

 

 

<!--二级菜单的动态显示-->

<ul >

              <li  οnmοuseοver="showSubMenu(this,true);" οnmοuseοut="showSubMenu(this,false);">

                            aaaaa

                            <ul class="subMenu" >

                                          <li>a1</li>

                                          <li>a2</li>

                                          <li>a3</li>

                            </ul>

              </li>

              <li   οnmοuseοver="showSubMenu(this,true);" οnmοuseοut="showSubMenu(this,false);">

                            bbbbb

                            <ul class="subMenu">

                                          <li>b1</li>

                                          <li>b2</li>

                                          <li>b3</li>

                            </ul>

              </li>

</ul>

 

                            <!--多个页签-->

<div id="divTabs">

              <div οnclick="changeTab(0);">我的帐户</div>

              <div οnclick="changeTab(1);">上传照片</div>

              <div οnclick="changeTab(2);">修改密码</div>

</div>

                           

                            <form>

                                          <input type="text">

                                          <input type="button" value="测试dom的用法" οnclick="TestDom();">

                                          <input type="button" value="查找多个元素对象" οnclick="FindElements();">

                            </form>

                            <p id="p1" style="color:red;font-size:10pt;">段落元素</p>

                            <p>sddf</p>

                            <div id="div1">div text</div>

                            <img id="img1" src="">

                                         

              </body>           

</html>

Second.css

div.style1  {

              width:200px;

              height:50px;

              border:1px solid red;

              border-top:2px dashed green;

              color:yellow;

              font-size:20pt; }

 

#divTabs div {

              width:100px;

              height:30px;

              border:1px solid black;

              background-color:gray;

              float:left;

              margin-left:3px;

              text-align:center;

}

/*display:block/inline/none*/

ul {list-style-type:none;}

ul.subMenu {display:none;}

 

second.js

function TestDom() {

              //修改图片的显示

              var imgObj = document.getElementById("img1");

              imgObj.src = "cat.jpg";

 

              //修改段落中的文本/字体颜色/背景色

              var pObj = document.getElementById("p1");

              pObj.innerHTML = "new text";

             

              //集合属性:适用于修改个别属性

              pObj.style.color = "green";

              pObj.style.backgroundColor = "silver";

 

              //修改div元素的样式类:样式比较复杂

              var divObj = document.getElementById("div1");

              divObj.className = "style1";

}

 

function FindElements()

{

              /*

              //得到页面上每个段落的文本

              var array = document.getElementsByTagName("p");

              for(var i=0;i<array.length;i++)

              {

                            //每个p元素对象

                            alert(array[i].innerHTML);

              }

 

              //show界面上的按钮的个数

              var inputArray = document.getElementsByTagName("input");

              //得到type="button"的元素的个数

              var count = 0;

              for(var i=0;i<inputArray.length;i++) {

                            //是否为普通按钮

                            if(inputArray[i].type == "button") {

                                          count++;

                            }

              }

              alert(count);*/

}

 

/*1/先构建页面 2/构建样式 3/js动态的修改*/

function changeTab(index){

              //先找到父div

              var parentDiv = document.getElementById("divTabs");

              //找到divTabs标记里的所有的div元素

              var divArray = parentDiv.getElementsByTagName("div");

             

              //修改背景色

              for(var i=0;i<divArray.length;i++) {

                            if(i == index)

                                          divArray[i].style.backgroundColor = "silver";

                            else

                                          divArray[i].style.backgroundColor = "gray";

              }

}

 

function showSubMenu(liObj,isShow){

              //从参数得到li的对象

              var ddd = liObj.getElementsByTagName("ul")[0];

              if(isShow)

                            ddd.style.display = "block";

              else

                            ddd.style.display = "none";

}

 

//验证用户名必须为35位的字母和数字的组合

function checkName() {

              //定义正则表达式对象

              var reg = /^[a-zA-Z0-9]{3,5}$/;

              var name = document.getElementById("txtName").value;

              var isMatch = reg.test(name);

              if(isMatch)

                            document.getElementById("nameError")

                                                        .innerHTML = "";

              else

                            document.getElementById("nameError")

                                                        .innerHTML = "用户名错误";

              //返回验证是否通过

              return isMatch;

}

//密码必须为4位数字

function checkPwd()  {

              var reg = /^\d{4}$/;

              var name = document.getElementById("txtPwd").value;

              var isMatch = reg.test(name);

              if(isMatch)

                            document.getElementById("pwdError").innerHTML = "";

              else

                            document.getElementById("pwdError").innerHTML = "密码错误";

              //返回验证是否通过

              return isMatch;

}

//调用,得到验证是否通过,决定是否提交

function checkData(){

              var r1 = checkName();

              var r2 = checkPwd(); 

              return r1&&r2;

}

 

//方法:替代document.getXXX,类似于第三方封装

function $(id) {

              return document.getElementById(id);

}

//创建一个超级链接元素,加入到form

//创建一个按钮

function createNewObj() {

              //创建:<a href="">ccc</a>

              var aObj = document.createElement("a");

              aObj.href = "http://bbs.tarena.com.cn";

              aObj.innerHTML = "Click Me";

              //加入到文档中的form

              $("form1").appendChild(aObj);

 

              //一个按钮:<input type="button" value="">

              var btn = document.createElement("input");

              btn.type = "button";

              btn.value = "new button";

              //为按钮添加事件:function对象赋值

              btn.onclick = AAA;

              $("form1").appendChild(btn);

 

              //创建一个文本框

              var txt = document.createElement("input");

              //得到参考位置的节点:通过索引或者id查找

              var refNode = $("form1").childNodes[0];

              //var refNode = $("nameError");

              $("form1").insertBefore(txt,refNode);

}

function AAA()  {

              alert("new button click");

}

 

//用二维数组存储数据

var dataArray =

                            [

                             ["JSD1204","JSD1205","JSD1206"],

                             ["PSD1201","PSD1202"],

                             ["MSD1207"]

                            ];

//根据第一个下拉框的选项,创建第二个下拉框的选项

function showClasses()

{

              var index = $("selSubjects").selectedIndex;

              //先清除旧数据,再添加

              $("selClasses").options.length = 0;

              //得到目标数据:选择0 java 1 php 2 net 3

              if(index < 1)

                            return;

              var classesArray = dataArray[index-1];

              for(var i=0;i<classesArray.length;i++)

              {

                            var option = document.createElement("option");

                            option.innerHTML = classesArray[i];

                            $("selClasses").appendChild(option);

              }

}

 

Day03

客户端与服务器端

 

1 javascript 脚本语言:嵌入到网页上,实现一些动态的效果

              动态的显示

              数据录入的验证

              DOM效果(动态的安排页面元素的显示)

              BOM效果:browser

 

2 javascript 的基础应用--UI相关

  JQuery

  Ajax

 

3 NetScape---javascript语言

  Microsoft---JScript

 

4 语言特点

              一种基于对象和事件驱动的脚本语言

              由浏览器软件解释运行

 

5 基础语法

              弱类型的语言

              统一使用var声明变量,变量的类型以赋值为准

                            var s = "hello";

                            var n = 12;

                            n = true;

              变量的命名(标识符)

                            字母/数字/下划线/$组成

                            不能以数字开头

                            大小写敏感

              语句:以分号结束

              注释: //              /**/

 

6 书写脚本的方式

              <head><script>

              js文件:脚本代码书写在一个后缀为js的文件里

                            引入js文件

 

7 流程控制语句

              条件语句:if/else   switch/case

              循环语句:for/while

 

8 数据类型的转换

              弱类型的语言:

                            ==  比较的值

                            === 比较值和类型---严格相等

                            奇怪的比较,比如 0 ""

                                             比如 0 true

             

              基础数据类型:string/number/bool

              其他:null/undefined(声明了但是没有赋值)

 

              直接(隐式)转换:不同数据类型进行运算

                            string number:string

                            number bool:number

                            string bool:string

 

              显式转换:

                            转换为数值类型:parseInt/parseFloat

                            有可能转换失败:

                                          isNaN:is not a number

 

                                          var i = parseInt("12");

                                          var i = parseint("12");//error

                            转换为字符串类型:toString

 

              获取变量的数据类型

                            typeof(s)---string/number/bool/object

 

9 内置对象(string)

              创建一个字符串对象:一对单引号或者双引号括起文本

                            var s = "mary";

                            var s = 'mary';

                            var s = new String("mary");

 

              属性

                            s.length

 

              方法

              获取单个字符

                            charAt(index)--字符

              查询字符出现的位置

                            indexOf("a")---位置 -1

                            lastIndexOf

              截取子字符串

                            substring(start,end)

                                          end是真实的结束位置加1

              大小写转换

                            toLowerCase

                            toUpperCase

                                          GCD Gcd GCd gcd

              常和正则表达式一起使用

                            replace(findstr,replacestr)

                                         

                            search("abc")---index

                            search(/\d+/)

 

                            match---匹配的结果--数组

 

              正则表达式:匹配/替换/搜索等

                            匹配 \d \w [a-e] \d{3,5}

                                 +(1-n)

                                 ?(0/1)

                                 *(0-n)

              拆分方法

                            split(",")---数组

 

10 常用内置对象(Array)

              创建数组,初始化

                            var a = new Array();

                            a[0] = "mary";

                            a[1] = true;

                            a[2] = 100;

                            //

                            var a = ["mary",true,100];

 

              属性:length

 

              方法

                            得到数组的内容

                                          join("|")

                                          toString();返回以逗号分开的内容串联值

                            数组的相加,得到一个大数组

                                          a1.concat(a2)

                            返回数组的一部分

                                          a1.slice(start,end)--end还是+1

                            翻转

                                          reverse()

                            排序

                                          sort():按照字符串的比较

                                          sort(方法的名称):传入一个方法对象

 

11 常用内置对象Math

              使用 Math.

              属性:常用于得到数学常数

                            Math.PI

 

              方法

                            计算用:min/max/round/ceil/floor

                                          random:0=< <1的小数

                            复杂计算:

                                         三角函数sin

   Date

              var t1 = new Date();

              var t2 = new Date("2011-01-01");

 

12 function 对象

              声明和调用

                            function MethodName(p1,p2,p3)

                            {

                                          //方法语句

                                          return返回值;

                            }

 

                            var r = MethodName(12,34);

 

              方法的重载:没有

                            如果定义了相同名称的方法,以最后一次定义的为准

 

              必须要实现类似于重载的效果:

                            arguments:得到当前方法的参数的数组

                            方法定义时,没有定义参数,依然可以传入

                            传入的参数都存放到arguments

                                          function M()

                                          {

                                                        //方法体

                                          }

 

              局部变量和全局变量

              脚本中直接调用执行方法:在页面显示之前就执行

 

练习:模拟机选一注双色球号码

              按钮,点击:

              1/随机出6133(包括133)之间的整数

              2/6个数不能重复,且按照升序排列,显示

              3/随机出1116(包括116)之间的整数

              4/显示在界面上

             

13  DOM:document object model

              将整个 html文档对象化:树形结构

              第一步:找到目标节点

                            通过id查找单个节点:document.getElementById

                            查找多个节点:document.getElementsByTagName

                                         查找某类,返回节点对象的数组

 

              第二步:操作目标节点(查询,修改)

查询: html标记对象化--元素标记的属性作为对象的属性用

                            比如style为集合属性

                                          obj.style.样式属性

                                          style.color

                                          style.backgroundColor

                                          style.fontSize

                            样式比较复杂:

                                         声明样式类

                                          obj.className = "有效的样式类的名称";

                                         

     .innerHTML        --元素标记的文本内容

 

常见的效果:页签/二级菜单/输入验证

              输入验证:检查用户的录入,提示,不允许提交

              正则表达式的用法:

                            和字符串对象的方法一起使用:实现对于字符串的操作处理

                                          string.replace/search/match

                            使用正则表达式对象的方法实现验证

                                          var reg = /[a-z]{3}/;

                                          reg.test(string)--bool

              取消事件:取消提交

                            onxxxx = "return false;"

 

先在页面上布置好标记,修改样式/文本

 

创建新元素

              createElement("a/img/input")

              appendChild--追加

              parent.insertBefore(newEle,refEle)

                            --定位在谁的某个子元素前面

 

              obj.childNodes[index]

其他操作

              obj.removeChild(childNode)

              obj.replaceChild(newEle,oldChildNode)

 

下拉框的联动效果

 

dom回顾:动态的安排页面元素(是否显示/显示的外观)

              纯粹的js代码:

                            find元素/修改

                            create元素/设置属性/加入

              第三方封装:JQuery

                            对于表格的操作做了封装

var row = tableObj.insertRow(index);<tr></tr>

var cell = row.insertCell(index);  <td class=""></td>

cell.innerHTML = "";

cell.rowspan = "3";

cell.className = "";

 

 

如果需要创建一个option:<option value="1">text</option>

              js代码:

var obj = document.createElement("option");

obj.innerHTML = "text";

obj.value = "1";

selectObj.appendChild(obj);

 

              封装:html页面引入prototype.js文件

var obj = new Option("text","1");

selectObj.options[index] = obj;

 

14 对象模型(树形)---BOM(brower object model)

                                          window

  document    location   history  navigator   screen  event

 文档的内容   地址栏      历史  浏览器软件   屏幕   事件

 

15 window对象:代表浏览器窗口

              常用属性

                            window.status

              常用方法

                            window.open(url,name,config):动态

                                         静态<a target="_blank" href="">click</a>

                            window.close

                            window.focus

                            弹出对话框窗口

                                          window.alert();--警告框

                                          window.confirm();--确认框

                                          window.prompt();--输入框

                            定时器

                                          window.setInterval(function,time以毫秒为单位)

                                         启动周期性时钟,返回时钟对象

                                          window.clearInterval(timer);

 

                                          window.setTimeout(function,time)

                                         启动一次性时钟,返回时钟对象

                                         常用于类似于倒计时的效果

                                          window.clearTimeout(timer)

 

                                          <a href="javascript:method();"></a>

 

16 location 对象

              window对象的子对象,代表地址栏,

              使用它修改载入的页面

                            window.location.

                            或者

                            location.

              属性

                            location.href = "url";

              方法

                            location.replace("url");

              window.open的区别:打开新窗口

 

17 history 对象

              也是window对象的子对象,代表的历史访问记录

              history.length

              history.back()

              history.forward()

 

18 screen 对象

              window 对象的子对象,机器的屏幕信息

              只有属性,没有方法

              width/height:高和宽

              availWidth/availHeight:可用的高和宽

 

19 navigator 对象:代表的浏览器及操作系统的软件信息

              只有属性,访问信息

              for(var p in navigator)

              {

                            navigator[p]

              }

 

20 事件

              事件的类型

                            鼠标事件

                                          onmouseover:移入

                                          onmouseout:移出

                                          onclick:单击

                                          ondblclick:双击

                            键盘事件

                                          onkeydown

                                          onkeyup

                            状态改变事件

                                          onblur:失去焦点,录入完毕

                                          onfocus:得到焦点

                                          onchange:下拉框的选择改变

                                          onload:body元素

                                          onsubmit:form元素

 

              可以取消事件

                            onxxx = "return false;"

             

              冒泡机制

                            各层元素都定义了相同的事件,

                            引发该事件时,会从触发层开始,层层向上传递

                            大多数情况下,可以取消冒泡机制

                                          event.cancelBubble=true;

                            元素有大量的子元素具有相同的事件

                            为了避免重复定义,为其父元素定义事件

             

              event 对象:只要页面发生事件,包含与事件相关的所有信息

                            event.clientX

                            event.clientY

                            event.srcElement:引发事件的元素(仅限于firefox以外)

                            event.target:引发事件的元素(firefox)

              考虑浏览器兼容问题

                            IE/Chrome:event获取事件对象

                            firefox:在页面上使用event关键字将事件对象传入

             

              事件的动态注册:onxxx = function对象

                            先声明一个function,赋值

                            使用匿名方法

                            btn.onclick =

                                          function(){alert("function");}

                                          ;

                            如何选择:

                                          1.取决于逻辑代码的复杂程度

                                          2.如果要传参数,使用匿名函数,

 

21 自定义对象对于数据的封装

              使用 Object对象:适用于当前方法里

                            var p = new Object();

                            p.name = "mary";

                            p.age = 23;

                            p.sex = "F";

 

              使用new实现自定义对象:实现重用

                            function Person(n,a)

                            {

                                          this.name = n;

                                          this.age = a;

                            }

                            var p = new Person("mary",23);

 

              JSon:服务器端要求客户端传递数据

var p = {"name":"mary" , "age":13, "sing":AAA};

alert(p.name);

 

练习(选做):

              走马灯的效果(每隔3s切换图片,

              当鼠标移入图片上,停止切换;

              鼠标移走,继续):

              <img src="a1.jpg">

third.html

<html>

              <head>

                            <!--引入外部的js文件-->

                            <script language="javascript" src="third.js"></script>

              </head>

              <body οnlοad="AddEventToButton();">

<form>

              <!--使用object对象实现数据的封装-->

              <input type="button" value="使用object对象" οnclick="TestObject();">

              <input type="button" value="使用自定义类" οnclick="TestCreateClass();">

              <input type="button" value="使用JSon" οnclick="TestJSon();">

              <br>

 

              <input id="btn1" type="button" value="动态注册点击事件">

              <!--模拟计算器-->

              <div οnclick="Calculator(event);" style="border:1px solid red;width:200px;height:100px;">

                            <input type="button" value="1">

                            <input type="button" value="2">                     <input type="button" value="3"><br>

                            <input type="text" id="txtNumber">

              </div>

</form>

 

<!--事件的冒泡机制-->

<div οnclick="alert('1');" style="border:1px solid red;width:200px;height:200px;">

              <div οnclick="alert('2');" style="border:1px solid green;width:100px;height:100px;">

                            <div οnclick="alert('3');" style="border:1px solid red;width:50px;height:50px;">

             

                            </div>

              </div>

</div>

 

                            <form>

<input type="button" value="测试navigator对象" οnclick="TestNavigator();">

 

 

<br>

<input type="button" value="测试location对象" οnclick="TestLocation();">

 

 

<!--5s后页面将自动跳转(重定向)-->

<input type="button" value="5s后页面将自动跳转" οnclick="AutoRedirect();"><br>

<span id="spanInfo" style="display:none;">5s后页面将自动跳转,如果取消请点击

<a href="javascript:CancelRedirect();">这里<a/></span>

<br>

 

<span id="spanTime"></span><br>

<input type="button" value="显示当前时间" οnclick="ShowTime();">

<input type="button" value="启动时钟" οnclick="StartTime();">

<input type="button" value="停止时钟" οnclick="StopTime();">

<br>

 

<!--在新窗口中打开页面-->

<input type="button" value="打开新窗口" οnclick="OpenNewWindow();">

<!--模拟删除-->

<input type="submit" value="删除" οnclick="return Delete();">

<!--输入框-->

<input type="button" value="录入数据" οnclick="InputData();">

 

 

<table id="t1" border="1" width="200">

              <caption>信息列表</caption>

              <tr>

                            <td>name</td>

                            <td>age</td>

              </tr>

</table>

用户名:<input id="txtName"><br>

年龄:<input id="txtAge"><br>

<input type="button" value="Save" οnclick="SaveData();">

<input type="button" value="封装方式实现" οnclick="SaveData1();">

                            </form>

             

                                         

              </body>           

</html>

third.js

 

 

//js实现
/*
<tr>
 <td colspan="3">mary</td>
</tr>
*/
function SaveData() {
 var name = document.getElementById("txtName").value;
 var age = document.getElementById("txtAge").value;
 //创建行
 var row = document.createElement("tr");
 //创建两个单元格
 var cell1 = document.createElement("td");
 cell1.innerHTML = name;
 row.appendChild(cell1);
 var cell2 = document.createElement("td");
 cell2.innerHTML = age;
 row.appendChild(cell2);
 //将行加入表
 var t = document.getElementById("t1");
 t.appendChild(row);
}

function SaveData1() {
 var name = document.getElementById("txtName")
  .value;
 var age = document.getElementById("txtAge")
  .value;
 //得到表格对象
 var t = document.getElementById("t1");
 //创建行
 var row = t.insertRow(t.rows.length);
 //创建列
 var cell1 = row.insertCell(0);
 cell1.innerHTML = name;
 var cell2 = row.insertCell(1);
 cell2.innerHTML = age;
}

function OpenNewWindow()
{
 //只设置url属性,默认打开多个
 //第二个参数:为新窗口命名
 //第三个参数:配置新窗口的大小等设置
 //返回新窗口对象
 var newWin = window.open(
  "http://bbs.tarena.com.cn",
  "aa",
  "width=200,height=150,toolbar=yes");
 newWin.focus();
}

function Delete()
{
 //询问,根据结果来决定是否提交
 var r = window.confirm("Are you really....?");
 return r;
}
//输入框
function InputData()
{
 var data = window.prompt("请录入ID:",
   "default value");
 alert(data);
}

function ShowTime() {
 //系统的当前时间
 var d = new Date(); 
 document.getElementById("spanTime").innerHTML
   = d.toLocaleTimeString();
}
//启动时钟:每1 s 调用ShowTime方法
var timer;
function StartTime() { 
 timer = window.setInterval(ShowTime,1000);
}
//停止时钟
function StopTime() {
 window.clearInterval(timer);
}

//定义一个方法:用于实现页面的跳转
var timer1;
function PageRedirect(){
 location.href = "http://bbs.tarena.com.cn";
}
//显示文本,设置5s后跳转
function AutoRedirect() {
 document.getElementById("spanInfo").style.
  display = "inline";
 timer1 = window.setTimeout(PageRedirect,5000);
}
//取消跳转
function CancelRedirect() {
 window.clearTimeout(timer1);
}
//实验 location 对象的两种页面跳转方式
function TestLocation() {
 //当前窗口内跳转,会产生历史记录
 //location.href = "http://bbs.tarena.com.cn";
 //或者
 //当前窗口内跳转,不会产生历史记录
 location.replace("http://bbs.tarena.com.cn");
}

function TestNavigator() {
 //使用for循环实现类似于foreach的效果
 //常用于遍历对象的所有属性及其值
 var str = "";
 for(var p in navigator)
 {
  str += p + "=" + navigator[p] + "\n";
 }
 alert(str);
}


function Calculator(e) {
 //点击的是哪个子元素(兼容)
 var obj = e.srcElement || e.target;
 //当点击按钮时,将按钮上的文本写入文本框
 if(obj.nodeName == "INPUT"
  && obj.type == "button")  {
  document.getElementById("txtNumber")
   .value += obj.value;
 }
}

function AddEventToButton() {
 //选择aa或者bb作为按钮的点击事件
 var btn = document.getElementById("btn1");
 btn.onclick =
   function() {
     bb("mary");
    };
}
function bb(str) {
 alert(str);
}


function TestObject() {
 //使用object封装:name/age 数据和行为(方法)
 var p = new Object();//通用类型对象
 p.name = "mary";
 p.age = 34;
 p.sing = function(){
  alert("i am singing...");};
 //调用测试方法
 Test(p);
}
//测试方法
function Test(obj) {
 alert(obj.name + ":" + obj.age);
 obj.sing();
}
//方式2:使用自定义类封装数据
function Person(n,a) {
 this.name = n;
 this.age = a;
 this.introduceSelf = AAA;
}
function AAA() {
 alert("my name is " + this.name
   +",i am " + this.age
   + " years old.");
}
function TestCreateClass()  {
 var p = new Person("jerry",24);
 var p1 = new Person("mary",13);
 alert(p.name + ":" + p.age);
 p.introduceSelf();
}
//方式3:使用JSon的语法实现数据的封装
function TestJSon() {
 var p = {"name":"john","age":23};
 alert(p.name);
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值