javascript再学习

很久以前系统的学过JavaScript,但有许多细节的知识已经忘了,今天再来一个全面的学习梳理、复习。

一、JavaScript基本概念

1、js 技术用在什么地方?

  1. 地图搜索
  2. 网页游戏
  3. 对用户输入校验(email ,数字,身份证,ip...)
  4. 股市网站..

核心一句话;js可以对网页的元素进行编程控制,实现动态效果.

javascript 并不需要服务器的运行,他可以直接在浏览器上跑起来。

2、js的基本介绍

① js是一种脚本语句,不能独立运行,它往往和配合别的语言使用, 比如(html/php/jsp/asp/asp.net).

② js 有自己的函数(系统函数,自定义函数), 变量, 有编程的控制语句(顺序,分支,循环), 但是相对说,js的语法规范不是特别严格. 与编程语言之间最大的区别是编程语言的语法和规则更为严格和复杂一些。

③ js是解释执行语言
js源码 ->直接被执行(js引擎[内嵌到浏览器])myie开源浏览器

④ js可以对网页元素编程,可以改变网页某个元素的外观,使其动起来
⑤ js是用于bs开发.
⑥ js是客户端技术,它运行在客户端的浏览器

java 和 javascript 没有任何关系

请注意: 因为浏览器的差异,可能有这样问题,在ie中运行正常的js脚本,在ff(firefox)中运行不正常.[应当在不同的浏览器中去测试是否ok 浏览器兼容.] 解决这个问题的简单方法是: 尽量使用js通用的函数.

二、javascript变量 标识符规范

1、如何理解js是事件驱动的脚本语言

事件发生(用户做某个操作)---[驱动]---->函数的调用

2、第一个程序










总结: js码可以放在 html/php 页面的任何地方,js码是从上到下依次执行.

3、Window 对象

Window 对象表示浏览器中打开的窗口。
如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。
注释:没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。

js的变量类型是由js引擎决定,如果要查看某个变量的类型,则可以使用 typeof运算符
//js变量的类型是由js引擎来决定的.

    var name="Corwien";
    //可以通过 typeof 来查看
    window.alert("name的类型是"+ typeof  name);
    name=123;
    //可以通过 typeof 来查看
    window.alert("name的类型是"+ typeof name);

js是弱数据类型的语言,在定义变量时,不需要指明该变量的类型(由js引擎来决定)

var name=“Corwien”; //name是字符串
var kk=2  //kk是数
var yy //yy是undefined

如果name=234;//这时name自动变成数.

不声明变量直接使用
 x=345; //亦可
  • js的变量是区分大小写的
  • 如果一个方法是属于window 对象,则可以不带window.而直接使用

三、javascript数据类型三大类型

1、js的基本数据类型

① 整数

② 实数

实数就是小数,这个就不举例说明

特殊的数值

NaN = not a number 如果提示错误说明,你的js代码中把一个变量错误的当做一个数值来使用.
Infinity = 无穷大

var s="abc";
    
    //parseInt() 函数是js的全局函数,可以直接使用
    //在哪里查询
    alert(parseInt(s));

    var r=7/0;

    alert(r);

输出:会报错,无穷大

在js中提供了两个函数来判断是不是一个NaNintinity

isNaN(判断是不是一个数) isIninity

//正则表达式
    var s="000.000123";

    if(isNaN(s)){
        alert("不是数");
    }else{
        alert("是数");
    }

③ 布尔类型

布尔类型表示真和假
在js中 表示 假有如下:

false, 0, “”, null  , undefined、NaN、空数组假

其它的表示真

代码:

var a=100;    var a=0; (假)

    if(a){
        alert("真");//php  echo();
    }else{
        alert("假");
    }

ajax
    var obj1=获取对象;
    if(!obj1){
    alert(“对象创建失败”);
}

④ 字符型

字符串的基本用法:

var str=”aaaaaaa”;
var str2=’aakflaskf;lsakf;lsa’;

如果我们希望在字符串中有包含特殊字符,比如 ’ ” 换行。。。考虑使用转义符\, 用于转义的还有:

字符串中的特殊字符,需要以反斜杠()后跟一个普通字符来表示,例如:r、n、t、b、'、 " 、\xxx

2、js的复合数据类型

① 数组

//创建一个数组
    var arr1=[3,5,10,34.8,50,10];
    //说明,数组的下标是从[0]
    //window.alert(typeof arr1);
    //通过对象名.constructor 可以显示该对象的构造方法是什么?
    //window.alert(arr1.constructor);
    //遍历我们的数组
    var total_weight=0;
    for(var i=0;i"+arr1[i]);//遍历
        total_weight+=arr1[i];
    }
document.write("总体重是="+total_weight+" 平均体重="+total_weight/arr1.length);

数组的基本使用

① 如何创建数组

方法1
var arr=[元素1,元素2......] 其实也可以这样创建空数组 var arr=[];

元素的个数可以任意,元素的类型可以任意

方法2.

var arr=new Array();

② 如何访问数组的数据

  1. 指定访问某个元素

数组名[下标号], 下标号默认是从0 开始编号.

  1. 遍历数组
for(var i=0;i<数组.lenght;i++){
    数组[i];
}

☞ 如果下标越界会怎样?

报 undefine

☞ js的数组是否能够动态的增长

  var a=[2,3];
  a[2]=56;
  alert(a[2]);
   输出: 56

说明js的数组可以动态增长.

③ 数组在内存中怎样存在..

php程序中,通过一个函数传递数组,是值传递,还是引用传递?

结论是默认是值传递(拷贝.)

js代码中,通过一个函数传递数组,是引用传递

function test2(val){
        //val[0] 访问第一个元素.
        val[0]=900;
    }

    arr=[1,2,3];

    //调用函数
    test2(arr);
    
    for(var i=0;i

输出是 900*23

画图说明;

通过下面的代码,我们来说明js的数组是怎样存在内存的:

function test2(val){
  //val[0] 访问第一个元素.  val=null;没有改变数组内的数,故不会改变
  val[0]=900;
 }

 arr=[1,2,3];【1】 

 //调用函数
 test2(arr);
 
 for(var i=0;i

④ js数组的几个重要应用
(1)使用 数组名.length 可以得到数组大小
(2)拆分字符串 字符串.split(拆分标准) 可以得到一个数组。
(3)其它..

① length 属性可以返回该数组的大小(遍历)
② split 函数,可以拆分字符串.

var str="abc hello boy";
var arr=str.split(" ");
document.write(arr1);

数组小结:
①数组可存放任意类型的数据
②数组大小不必事先指定,可以动态增长
③数组名可以理解为指向数组首地址的引用.
④数组元素默认从0开始编号的.

② 对象

3、js的特殊数据类型

① null 空
② undefined 未定义

4、数据类型的强制转换

js中提供了两个函数可以把字符串强制转成数
parseInt parseFloat
parseInt() 函数可解析一个字符串,并返回一个整数。

案例如下: 让用户输入两个数,并计算和.

var num1=window.prompt("请输入一个数");// 10
var num2=window.prompt("请输第二个数");// 20
//var res=num1+num2;   结果是:1020  js中会把+当做拼接符,而不会是运算符,因此得用parseInt将字符串转换为数
var res=parseFloat(num1)+parseFloat(num2);//php  . 字符串拼接 + 表示运算

    alert("结果是="+res);

    var num3=123;

    var str="hello"+num3;

    alert(str);

4、其他

运算保留精度

    var num1=7;
    var num2=3;

    var res=num1/num2;
    res=res+"";
    //window.alert(typeof res);
    //alert(res);//看出 小数保留精度是17位.如果你要到第二位.

    //把res当做一个字符串,看找到小数点在第几位.

    var index=res.indexOf(".");//检索字符串
    window.alert("保留小数两位是"+res.substring(0,index+3));

我们为了更好的管理js文件,可以把js文件 写在一个独立的文件中,然后再需要的使用引入即可

四、javascript面向对象编程

js面向(基于)对象编程---类(原型对象)与对象(实例)
js面向(基于)对象编程---构造方法和this

基于对象编程(object-based)面向对象编程叫法区分

js 中我们可以认为这个叫法一致.

js的面对对象编程的介绍
js是一种支持面向对象编程的脚本语句, 它有继承,封装,多态的特点.

因为javascript中没有class(类),所以有人也把类也称为原型对象,因为这两个概念从在编程中发挥的作用看都是一个意思,为了统一叫法,我这里统一叫

课程中 基于对象==面向对象 类==原型对象

 面向对象编程的引入
一个问题?
张老太养了两只猫猫:一只名字叫小白,今年3岁,白色。还有一只叫小花,今年10岁,花色。请编写一个程序,当用户输入小猫的名字时,就显示该猫的名字,年龄, 颜色。如果用户输入的小猫名错误,则显示 张老太没有这只猫猫。

面向过程:

javascript再学习_第1张图片

我们的一个解决方法是 :(js面向对象编程的快速入门)







对象公开属性的访问方式有
对象名.属性名; cat1.name
对象名[’属性名’]; cat1[‘name’]

js中自定义类(原型对象)的五种方法

  1. 工厂方法---使用new Object创建对象并添加相关性
  2. 通过构造函数来定义类(最多)
  3. 通过prototype 来定义(原型方式)
  4. 构造函数 和 prototype混合
  5. 动态创建对象模式

js中一起都是对象

可用通过 instanceof 来 判断某个对象实例是不是某个类的对象实例,
案例:
//如何判断一个对象实例是不是某个 类的(原型对象)

    if(p1 instanceof Dog){
        
        window.alert("p1是Person一个对象实例");
    }else{
        window.alert("p1是Dog一个对象实例");
    }

javascript再学习_第2张图片








输出:宋江23100000

一个类中可以有公开的函数

this.属性=funciton (){};//属性是公开的也必然造成这个函数时公开的

一个类中也可以有私有的函数

代码:

function Person(){
            
            this.name="abc";
            var salary=900;

            this.fun1=function (){//公开的属性、函数
              
                //代码
                sayHello();
            }

            this.fun2=function(){
                sayHello();
            }

            this.fun3=function(){
                sayHello();
            }

            function sayHello(){   //私有函数,只能在函数内部使用
                document.write("hello,资源打开"+this.name+" "+salary);
            }
        }

        var p1=new Person();
        p1.fun2();
//p1.sayHello();  这样调会报错

输出:hello,资源打开abc 900

小结: 通过代码我们可以看出.私有函数可以被 该类的其它方法(公开)调用,同时私有函数可以去访问 该对象的 公开或者私有的属性.

五、js内部类string、array

1、String类

String是动态类,提供了对字符串的各种操作,在这里介绍几个最常用的函数,其它的请大家参考javascript帮助文档。

  1. indexOf() 返回某个字符串值在该字符串中首次出现的位置
  2. split() 把字符串分割为字符串数组
  3. substr() 提取取从start下标开始的指定数目的字符
  4. substring() 提取字符串中介于两个指定下标之间的子串
  5. charAt() 返回指定位置的字符
  6. length 属性,可以得到字符串的长度
  7. toString() js中所有内部对象的成员方法,作用是将对象中的数据转成某个格式的字符串,我们在实际运用中在详细介绍
  8. match()/replace()/search() 用的很多,涉及正则表达式

示例:



2、Array类

  1. concat() 连接两个或更多的数组,并返回结果。
  2. sort() 对数组的元素进行排序
  3. toString() 把数组转换为字符串,并返回结果
  4. pop() 删除并返回数组的最后一个元素
  5. push() 向数组的末尾添加一个或更多元素,并返回新的长度
  6. splice() 方法用于插入、删除或替换数组的元素
  7. length 属性

示例:

打印:

23,老王***********
23
小明

这里我们需要注意: splice() 函数,他把 删除,修改,添加 都可以完成,根据传入的参数的个数和值,不同来决定进行怎样的操作.

3、常用系统函数

js的函数间传递数据时候,按照什么来传递
基本数据类型: number boolean string 是按照值传递
数组和对象引用传递.

  1. eval() //可以把一个字符串当做脚本来运行,用处很大
  2. parseInt() //把字符串转成整数
  3. parseFloat() //把字符串转成小数
  4. isNaN() //判断某个值是不是数(该函数不是特别完美)
  5. typeof() // 变量类型
  6. encodeURI() // 编码某个编码的 URI
  7. decodeURI() // 解码

六、js事件 事件驱动机制

概述 : js是采用事件驱动(event-driven)的机制来响应用户操作的,也就是说当用户对某个html元素进行某个操作时,会产生一个事件,该事件会驱动某些函数来处理,
由鼠标或热键引发的一连串程序的动作,称之为事件驱动(Event-Driver)。
对事件进行处理程序或函数,我们称之为事件处理程序(Event Handler)

快速入门案例:



//事件源,时间发生的地方,附带产生事件对象event,它的作用是封装改事件的一些信息

事件源: 就是产生事件的地方(html元素)
事件: 点击/鼠标移动/键按下..
事件对象: 当某个事件发生时,可能会产生一个事件对象,这个事件对象会封装该事件的信息(比如点击的x,y. keycode),传递给事件处理程序
事件处理程序: 响应用户的事件.

javascript再学习_第3张图片

快速入门 :
获取鼠标点击出的坐标

 
 
 
 

 

Click in the document. An alert box will alert the x and y coordinates of the mouse pointer.

javascript再学习_第4张图片

事件的分类

javascript再学习_第5张图片

1、如何绑定事件监听

  1. 直接在某个html控件上指定
  2. getElementById(‘’) 获取控件后,再绑定.
  3. 通过 addEventListener() 或者是 attachEvent() 来绑定
  4. 一个事件可以有多个事件监听者(函数)

给某个html元素(控件), 绑定事件的三种方法
1、 静态绑定

2、动态绑定

// 获取某个对象再绑定
getElementById("htmlid").事件=方法

实例:






点击按钮1后,会给but2绑定一个时间,如果再点击but2就会有信息弹出

3、通过 attachEventdetachEvent 方法来(动态)绑定事件和(动态)解除事件绑定


七、js dom编程

我们在前面把js的基础知识都了解完了,可是如果你认为js只 能做类似点击一个按钮,显示当前时间,那你就太小看js,实际上js更重要的作用是可以让用户对网页元素进行交互操作,这才是学习js的精华之所在。

1、dom的介绍

DOM = Document Object Model(文档对象模型),根据W3C DOM规范,DOM是HTMLXML的应用编程接口(API),DOM将整个页面映射为一个由层次节点组成的文件dom的来源:

DOM的简单映射图:

javascript再学习_第6张图片

js把浏览器,网页文档网页文档中的 html 元素都用相应的内置对象来表示,这些对象与对象间的层次关系构成dom模型,针对网页(html,jsp,php,aspx.net)的dom就是html dom。我们这讲的就是html dom。

javascript再学习_第7张图片

这里有几个特别重要的概念要说清楚:
①上面说的内置对象就是dom 对象,准确的说是html dom对象。
②因为我目前讲的是 html dom 编程,所以我提到的dom 编程,dom 对象都是说的 html dom 编程 和 html dom对象,请大家不要犯迷糊。
③dom 编程时,会把html文档看做是一颗dom 树(首先要画出html dom图)
④dom 编程的核心就是各个dom 对象.

Dom 为一种模型,他的 思想可以把里边的任何东西看为对象。

2、dom树

在进行 html dom 编程时,我们把html文件看成是一个dom树,该dom树在内存中层级关系,通过操作dom树,就可以改变html页面的显示效果。

javascript再学习_第8张图片

从上图可以看出:从html dom的角度看,每个html文件的元素都会被当做一个Node节点对象来看待,就可以使用它的方法,同时对于html dom说,因为元素本身就可能是img/button/form同时有看成 Button ImageForm,内置对象。

示例说明:
html文件



myimg被看成是Node对象同时也可以看成img对象

xml文件



恺易


var mystu=document.getElementById(“mystu”);
这时mystu就是Node对象

javascript再学习_第9张图片

3、dom层次关系dom对象

bom
bom 的全称是浏览器对象模型 (bowser object model), 它规定所有的浏览器在设计时,要考虑支持 bom提出的规范,这样才能正常浏览网页。

dom 和 bom 的关系
bom 是一个纲领性,dom 就是具体的.( dom 对象、属性、方法.)

bom包括浏览器所有对象
dom 主要是 bom(document 对象的扩展)

dom的层级关系

javascript再学习_第10张图片

这里,我只列举了常用的dom对象。从左图我们可以看出:
dom对象本身也有层次,比如document对象是window对象的一个成员属性,而body对象又是document对象的一个成员属性。

重要核心思想:
在进行dom编程时,每个html的元素被看成一个Node节点(对象)

javascript再学习_第11张图片

Dom的节点和属性




文档标题 



my link

my title

乌龟

4、window对象

Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript中,Window 对象是全局对象,要引用当前窗口根本不需要特殊的语法,可以把那个窗口的属性作为全局变量来用。

javascript再学习_第12张图片

4.1 window对象常用的函数和属性

  1. alert() 显示消息和一个确认按钮的警告框
  2. confirm() 显示消息以及确认按钮和取消按钮的对话框
  3. setInterval() 按照指定的周期(毫秒计)来循环调用函数或计算表达

② setInterval("函数名()",调用该函数的间隔时间) 定时器和 clearInterval定义和用法
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

  1. 简单时钟


文档标题



当前时间是, 
???


5、document对象

Document对象代表整个html文档,可用来访问页面中的所有元素,是最复杂的一个dom对象,可以说是学习好dom编程的关键所在。
Document对象是Window对象的一个成员属性,通过window.document来访问,当然也可以直接使用 document

javascript再学习_第13张图片

  1. write() 向文档写文本或HTML表达式或JavaScript 代码
  2. writeln() 等同于write()方法,不同的是在每个表达式之后写一个换行符
  3. open() 打开一个新文档,并删除当前文档内容
  4. close() 关闭open()文档流
  5. getElementById() 通过html控件的id 得到该控件.如果有相同的id则只取第一个,返回对拥有指定id的第一个对象的引用
  6. getElementsByName() 通过html控件的名字返回带有指定名称的对象集合
  7. getElementsByTagName() 通过html的标签名返回带有指定标签名的对象集合
  8. createElement() 创建一个指定标签名的元素[比如:动态创建超链接]
    (注:此处对象集合与数组是有区别的)

案例:



连接到sina
连接到sohu
连接到baidu

请选择你的爱好: 旅游 音乐 体育 电影

javascript再学习_第14张图片

我们综合运用一下前面学习到的各种知识

动态的创建元素(节点)/添加元素(节点)/删除元素(节点)



Dom 节点操作








div1

javascript再学习_第15张图片

为什么添加的东西在原码中看不到呢?因为在 内存中,浏览器真正显示的东西不完全是在原码,它第一次是看原码,后边就会看节点树,首先它先把原码加载到内存中,它会以树为标准。

6、body对象

body 对象代表文档的主体 (HTML body)。
body对象是document对象的一个成员属性,通过document.body来访问.

使用body对象,要求文档的主体创建后才能使用,也就是说不能再文档的body体还没有创建就去访问body,这个后面会举例说明.

body对象常用的函数和属性,其它的参考帮助文档:

javascript再学习_第16张图片

  1. appendChild() 添加元素
  2. removeChild() 删除元素
  3. getElementsByTagName() 通过html元素名称,得到对象数组.
  4. bgColor 文档背景色
  5. backgorund 文档背景图
  6. innerText 某个元素间的文本
  7. innerHtml 某个元素间的html代码
  8. onload事件 文档加载时触发
  9. onunload事件 文档关闭时触发
  10. onbeforeunload事件 文档关闭前触发
  11. onselectstart事件 用户选中文档body体的内容时触发
  12. onscroll事件 用户拉动滚动条时触发

7、style对象

style对象和document对象下的集合对象styleSheets有关系,styleSheets是文档中所有style对象的集合,这里讲解的重点是style对象,styleSheets不是重点。

style对象定义:即表示当前元素的样式设置

style对象不是针对某一个html元素,而是对所有的html元素而言的,也就是说,我们可以通过 document.getElementById(“id”).style.property=“值” ,来控制网页文档的任何一个元素(对象)的样式,当然这个很重要的.

对象方法:

  1. backgroundRepeat 设置是否及如何重复背景图像
  2. border 在一行设置四个边框的所有属性
  3. display 设置元素显示方式
  4. width 设置元素的宽度
  5. height 设置元素的高度
  6. visibility 属性设置元素是否可见

实战:
仿搜狐广告栏:
javascript再学习_第17张图片







    
    无标题页6
    
    


        


display 和 visiability 区别
这两个属性都可以用于设置某个区域或者控件,显示不显示, display 设置 none; 它不显示同时让出自己占用的空间
visiability 这个属性设置成 hidden 就不显示, 但是它不让这个空间.

style对象的案例:

javascript再学习_第18张图片


+ 我的家庭



8、form对象

forms常用的函数和属性
1.lenght 设置或得到集合大小。
2.item() 取第几个表单



u:
p:
u:

9、table对象

概述,table 对象代表一个 html 表格。 在HTML文档中

标签每出现一次,一个table对象就会被创建

table常用的属性:

  1. id 设置或得到该表格的id
  2. name 设置或得到该表格name
  3. border 设置或得到该表格的边框
  4. width 设置或得到该表格的宽度
  5. height 设置或得到该表格的高度
  6. cellpadding 设置或返回单元格内容和单元格边框之间的空白量
  7. cellspacing 设置或返回在表格中的单元格之间的空白量
  8. style 设置或得到该表格的style对象

我们看看table常用的属性(对象集合):

  1. rows[] 表格中所有行的一个数组(针对表格)
  2. cells[] 表格中所有单元格的一个数组(针对一行)

table常用的方法 :
1.deleteRow() 删除一行
2.insertRow() 插入一行

tableRow和tableCell
TableRow 对象
TableRow 对象代表一个 HTML 表格行。
在 HTML 文档中

标签每出现一次,一个 TableRow 对象就会被创建。

TableCell 对象
TableCell 对象代表一个 HTML 表格单元格。
在HTML 文档中

标签每出现一次,一个TableCell 对象就会被创建。
[其方法和属性参看文档]

table对象 中的集合对象有两个
rows[] 还有一个 cells[]

rows[] 表示所有行的一个集合
cells[] 表示一行的所有列

实例:




梁山好汉108将



排名姓名外号
1宋江及时雨
2卢俊义玉麒麟

javascript再学习_第19张图片

你可能感兴趣的:(javascript,html)