JS的学习

  • JavaScript是什么?

JS是一种小型的、轻量级的、面向对象的、跨平台的客户端脚本语言。
JS是嵌入到浏览器软件当中去的,有浏览器就可以执行JS程序了。
JS是一种面向对象的程序语言。
在程序中,对象是由“属性”和“方法”构成。
在现实中,男女朋友就是一个“对象”。“东西”就是“对象”。一个“物体”就是“对象”。
“对象”有各种各样的特征(属性),如:身高,体重,年龄,姓名,学历等。
“对象”有很多方法。“人”这个对象,可以做很多
注意:JS中的对象只要会用就可以的,不需要我们自己去开发对象
跨平台:JS程序可以在多种平台下运行,如:widows、linux、mac、IOS等。
客户端脚本程序:JS只能在客户端的浏览器运行,不能在服务器端(阿帕奇)来运行。
浏览器是一种翻译器,可以翻译三种代码:html、CSS、JS。不需要服务器,因为本来就是客户端的。

  • JavaScript的应用

  • 表单验证:是JS最基本的功能。

  • 动态HTML:可以实现一些动态的、重复的效果。

  • 交互试:人机交互,通过键盘和鼠标,在网页中的元素进行交互。

  • <script></script>标记

  • 常用的两个客户端输出方法

(1)document.write(str内容)

  • 描述:在网页的<body>标记,输出str的内容。
  • Document意思“文档”,就是整个网页。
  • Document是一个文档对象,代表整个网页
  • write是document对象的一个输出方法。
  • “.”小数点:通过小数点来调用对象的方法。
  • str:表示要输出的内容。


(2)window.alter(str内容)

  • 描述:在当前窗口中弹出一个警告对话框,str为对话框中显示的内容。
  • window代表当前浏览器窗口,window是一个窗口的对象。
  • alter()方法:弹出一个对话框。
  • str:显示要输出的内容。
Paste_Image.png

.

  • JS中的注释
  • HTML的注释:<!-注释内容->
  • CSS注释:/注释内容/
  • JS的注释:// 或 /* 多行注释*/

JS变量
1、变量的概念

  • 变量是变化的一个量。
  • 变量可以看成是一个“未知数”。
  • 变量可以看成是宾馆的“房间号”。
  • 变量可以看成是宾馆的“房间号”。
  • 变量一般指程序数据。
  • 变量是临时存在的数据。我们可以把计算机内存看成是一个个的小格子。每个小格子中可以存储一个变量的名称和变量的值。

2、变量的声明
相当于预定宾馆的“房间”。
语法格式:var 变量名=变量的值
变量声明是使用系统关键字var来进行的
举例:var name;//声明变量
var,name,sex,edu;//同时声明用对个变量,多个变量间用英文下的逗号 隔开。
var name="张三";//一边声明,一遍赋值。
3、变量的命名规则

  • 变量的名可以包含字母、数字、下划线。
  • 变量名不能以数字开头,可以以字母和下划线开头。如 var _name;
  • 变量名不能是系统关键字。如:var,swith,for,try,case,else,while等。
  • JS中变量名是区分大小写的。如name和Name是两个变量。
  • JS中变量的名称一定要有意义。
  • 如果变量名有多个单词构成的话,
    “驼峰式命名”:第一个单子小写,后面每个单词首字母大写。如getUserName:获取用户名。
    “下划线式命名”:所有单词全小写,中间用下划线链接线链接。如:get_user_name
    4、给变量赋值
    给变量赋值,就是往“空间”中装东西。
    使用赋值号“=”来给变量赋值。
    语法:var 变量名=变量名
    举例:var name="张三";
    “=”的意义:将“=”右边的“运算结果”赋给左边的变量名。
    应该是“=”右边先运算,再把运算的结果,赋给左边的变量
    “=”左边只能是一个变量名,而不能是“运算表达式”。说白了等号左边就是一个容器,至于容器里面装什么是等号右边的事情
    例如

![Upload Paste_Image.png failed. Please try again.]

.
.
.

.

  • JS的运算符

1、算术运算符:加减乘除
运算时,只能进行同类型运算。如果类型不同,将进行类型转换。


2、赋值运算符:=、+=

  • 将等号右边的运算结果,赋给左边的变量。
  • +=:先加后等

  • 写程序的一般步骤

(1)变量的初始化:变量声明,变量赋值
(2)程序的运行过程
(3)输出结果
.

Paste_Image.png

JS程序的基本语法

  • JS是区分大小写的
  • JS中每一条语句,一般以英文下的分号(;)结束。这个分号不是必须的,为了向PHP兼容,最好加上分号。
  • 运算符和变量,以及操作之间可以使用空格分开,这样的程序比较容易阅读。
    var a=100;varna=10;是一样的。
    .

变量的数据类型

变量是有类型的,这个类型来源于“变量的值”,值是什么类型,变量就是什么类型。
JS变量的类型有:数值型、字符型、布尔型、未定义型、空型underfined,null,array,object,function
1、数值型:可以进行算术运算的(加减乘除)
数值型包括:整型(整数)和浮点型(小数)

Paste_Image.png

2、字符型:用单引号或双引号,引起来的一串字符。


注意:单引号和双引号可以相互嵌套
单引号内只能嵌套双引号
双引号内只能嵌套单引号
如下例:双引号内嵌套单引号,为了是名字加单引号。


注意:如果想在双引号内在嵌套双引号,里面的双引号一定要进行转义(\ ")
JS中转义字符是反斜杠(\)
常用的转义字符有:' " \ \r \n等
也就是说,当浏览器遇到反斜杠时,将会对其后的一个字符进行特殊对待,当成普通字符来对待。所谓普通字符就是平常的a,b,c,d字母字符。

Paste_Image.png

3、布尔型
又称逻辑型。只有两个值:true、false(假)
布尔型只有两个状态。如性别
var a=true;
var b=false;
布尔型常用if条件判断语句中

  • if条件判断
    1、语法结构--只判断true,不判断flase
    if(条件判断:结果只有true或false)
    {
    条件为true,将执行该代码;
    }

2、语法结构--既判断true,又判断flase
if(条件判断:结果只有true或false)
{
条件为true,将执行该代码;
}
else
if(条件判断:结果只有true或false)
{
条件为false,将执行该代码;
}
如果条件为true,则执行第一个大括号{}中的代码。
如果条件为flase,则执行第二个大括号{}中的代码。

4、未定义型(用的很少)
当一个变量定义,但未赋值时,将返回未定义型,未定义型的值只有一个undefined。
当一个对象属性不存在,也返回未定义型。

Paste_Image.png

5、空型(用的很少)
当一个对象不存在时,将返回空型的值null.
也可以理解为:是一个对象的占位符
如果你想清除一个变量的值的话,可以赋一个null的值。
var a=null,//将一个null赋给一个变量,用于清除他的值

变量的类型转换

判断变量的数据依据:typeof()

使用一元运算符typeof(),可以测试一个变量的类型。
typeof()测试的结果是一个类型字符串。
typeof()的结果字符串有几种情况:"string" "number" "boolean" "undedined" "object" "function"
另外:null、对象、数组这三种类型,都将返回"object"


备注:只有这五个是假,其它都为真

函数和方法的区别
Boolean(a) //函数是可以独立使用的
document.write(a) //方法不能独立使用,方法是必须要属于哪一个对象。

Paste_Image.png

注意事项:a+true中true会自动转换成字符串"true","+"左右只要有一个字符串,那么另外一个一定得转成字符串,才能运算。“”乘号左右两边有一个数值型,则另外一个一定要转换成数值型。
var a="";
var b=a+true;//相当于b=a+true="true"
*
.
.

Paste_Image.png
Paste_Image.png

从字符串中提取整数浮点数函数

(1)parseInt()系统函数、全局函数
功能:在一个字符串中,从左往右提取整型。如果遇到非整型的内容,则停止提取,并返回结果。
注意:如果第一个字符就是非整数,则立即停止,并返回NaN
如:parselnt("120px")=120
parselnt("120.98")=120
parselnt("a 120px")=NaN
parselnt(".98")=NaN
例子:

Paste_Image.png

(2)parsefFloat()系统函数,全局函数
功能:在一个字符串中,从左往右提取浮点型,遇到非浮点型内容,则停止提取,并返回结果。
注意:如果第一个字符为非浮点型,则立即停止,并返回NaN.
parseFloat("120px")=120
parseFloat("120.98")=120.98
parseFloat(".98")=0.98
parseFloat("a.98")=NaN
注意:JS中的浮点型是包括整数和小数点的,也就是说用parseFloat()函数时,整数也一样的当做f浮点型,不会停止变成NaN,所以parseFloat比parseInt大一级。只要是数值都可以提取,而parseInt只能提取整数。

* JS运算符

1、算术运算符
加减乘除(+,-,*,/),%,++,--
取余运算符(%),两个数相除,取余数



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


注意:第三和第四的比较


.

Paste_Image.png
Paste_Image.png

作业

Paste_Image.png




if条件判断语句:条件成立,执行什么代码;条件不成立,执行什么代码。

结构一:只判断真(true),条件为假,什么也不做。


Paste_Image.png

例子:

switch分支语句

描述:根据一个变量的不同取值,来执行不同的代码。
语法结构:

Paste_Image.png


while循环:只要条件成立,就重复不断的执行循环体代码。如果条件为假,则退出循坏。

while(条件判断)
{
如果条件为true,则执行循环体代码
}
while循环结构说明:

  • 在循环开始前,必须要对变量初始化(声明变量,给变量给个初始值)
  • 如果while的条件为真,则会重复不断的执行循环体中({})的代码。
  • 在循环体中,必须要有“变量更新”的语句,换句话说:两次循环的变量的值不能一样,如果一样,会造成死循环。

结果:

结果:

Paste_Image.png

结果:

实例:隔行变色


注意:
Paste_Image.png
以上代表的是循环体,<tr>的变化放在if条件判断中

for循环

求0-100的偶数,与while一样


注意:" "表示变量i的值有空格排列。

break语句:

continue语句:

例子:做九九乘法表

第一步:

第二步:({}中代表的是循环体,循环体在哪里,for循环就在哪里)

第二步结果:

第三步(循环套循环):

第三步结果:

第四步(j<=i)

第五步(&times是代表的"乘号"):

第五步结果:



数组:

注意:数组和循环一起用的,一般不单独用。

创建数组



数组的操作:




1、函数的概念:

函数,是将一段公共的代码进行封装,给它起个名字叫“函数。”
函数可以一次定义,多次调用。
函数,可以将常用的功能代码,进行封装。如:表单中用户名的验证、验证码函数、邮箱的验证。

2、函数的定义格式:

3、函数的调用

函数定义是没用的,需要调用才有用。
函数的调用:直接写函数名,如果有参数加参数,没有不用写。小括号必须写。


注意:先执行调用函数那行,再执行括号里面的,网上定义。定义和调用函数不分顺序

4、函数的参数


注意:1、形参是变量,实参是实际数量
2、函数可以一次定义多次调用

5、求两个整数的最大值


此时return被屏蔽了,则值无法传送到函数外,docnment数出的值为undefind

例子:return的运用



全局变量和局部变量

全局变量:可以在网页的任何地方(函数内部和函数外部)使用的变量,就是“全局变量”。
在函数外部定义的变量,就是“全局变量”。
“全局变量”既可以在函数外使用,也可以在函数内部使用。
“全局变量”在网页关闭时,自动消失(释放空间)。
局部变量:只能在函数内部使用的变量称为局部变量。
“局部变量”在函数内部定义,在函数内部使用。
“局部变量”在函数外部无法访问。
“局部变量”在函数执行完毕就消失了。

注意:在函数内部,省略关键字var定义的变量是“全局变量”,var关键字尽量不要省略,省略后全局变量和局部变量会混淆

注意:通过这四个比较记住两点;1、age是全局变量还是局部变量。2、第二句输出是在调用函数前还是后,是前则age没值,因为还没运行大括号内的函数,所以不知道age的值。是后则有值。

执行顺序:

先执行函数,所以先出李四。

拷贝传值和引用传值

Paste_Image.png


二维数组(二维数组和表格比较像)

用的非常多,二维数组就得用两层循环来实现,也就是循环套循环
二维数组的循环与二维表格的循环一模一样
二维数组的访问:数组名后跟多个 连续的中括号【】,第1个中括号代表第一维数组,第二个中括号代表第二维数组

对象

1、对象的概念

Paste_Image.png

自定义对象(shownfo是指显示信息,方法)

1、使用new关键字结合构建函数Object()来创建一个空对象。

2、使用大括号{}来创建对象



JS内置对象

提取对象的方法格式都是:{对象(如String,Array).方法}

string(字符串)对象(共六个方法)的方法1::charAt(index)(在原字符串提取一个下标)

  • 注意:index索引号也就是下标号。
    Paste_Image.png

方法2:indexOf() (在原字符串中查找某一字符串,从左往右查,strObj.indexOf(@)=一个数字,即多少个索引值)

表单验证@中有用,查找顺序是从左往右查找。



方法3:lastindexOf() (在原字符串中查找某一子字符串,右找起)

方法4:substr() (在原字符串中提取一子字符串)

例子

方法5:substring() 在一字符串中提取一子字符串

方法6:split() 将字符串转换成数组

()括号内的分隔号是指字符串里面的分隔号,如果中间没有分隔号,则是空格号,如"beijingsh"转换成数组,"beijingsh".split("")=["a","b","c","d"]下面即看到逗号就分割。


注意:第12行得出的星期值是阿拉伯数字,所以要创建一个数组arr[week]就是数组第几个

例子:

利用空字符串来做分割





Array(数组 )对象:一个数组变量,就是一个数组对象。

length属性:动态获取数组长度。如:var len=arrObj.length

join() 数组转换成字符串

  • 功能:将一个数组转换成字符串。
  • 语法:arr.Obj.join(连接号)
  • 说明:将一个数组,用指定的"连接号"连接成一个字符串。

reverse()

  • 功能:将数组中各元素颠倒顺序
  • 语法:arrObj.reverse()
  • 参数:无

.
.

数组元素的删除和添加

  • delete运算符,只能删除数组元素的值,而所占空间还在,总长度没变(arr.length)
  • 以前数组元素的添加,只能向后添加,不能向前添加。


表明:delect只能往后添加,若添加arr[1]=15,则15把数组中的‘男’替换了

数组元素的删除:

shift():删除数组中的第一个元素,返回删除的那个值,并将长度减1
pop():删除数组的最后一个元素,返回删除的那个值,并将长度减1

结果

数组元素的添加:

  • unshift():往数组前面添加一个或多个数组元素,长度改变。arrObj.unshift("a","b","c")
  • push():往数组结尾加一个或者多个数组元素,长度改变。arrObj.push("a","b","c")

.
.
.

Date对象:日期对象

Date对象和string对象不一样:
string对象:定义了一个字符串,其实就是一个string独享,就可以直接调用属性和方法。
()或者 new String() ,,,,,,new Array()或者[]
Date对象:必须使用new关键字来创建对象。否则无法调用Date对象的属性和方法。

创建Date对象的方法

(1)创建当前(现在)日期对象的实例,不带任何参数。


(2)创建指定时间戳的日期对象实例,参数是时间戳。
时间戳:是指某一个时间距离1970年1月1日0时0分0秒,过去了多少毫秒(1秒等于1000毫秒)。
var timer=new Date(10000)...1970年1月1日0时0分10秒


(3)指定一个字符串的日期时间信息,参数是一个日期时间字符串
var timer=new Date(2015/5/25 10:00:00);


(4)指定多个数值参数
var timer=new Date(2015,4,25,10,20,0)//顺序是:年月日时分秒(年月日必须写)

![Uploading Paste_Image_218993.png . . .]
如果是1970年前生的,没有负值,直接也是正数

例子:

结果:



Math数学对象

math对象是一个静态对象,换句话说,在使用Math对象,不需要创建实例

实例:随机网页背景色

script放在body后面


Number数值对象

一个数值对象,就是一个数值对象(Number对象)

toFixed()

  • 功能:将一个数值转换成字符串,进行四舍五入,保留指定位数的小数。
  • 语法:numObj.toFixed(n)
  • 参数:n就是要保留的小数位
  • 举例:
    var a=123.9878
    a=a.toFixed(2);//a="123.99"(先转换字符串)
    实例:

作业:

1、
2、
3、




BOM和DOM简介(最重要的是定时器和延时器,其它了解)

BOM,browser object modle,浏览器对象模型
BOM主要提供了访问和操作浏览器各组件的方式
浏览器组件:window(浏览器窗口)、location(地址栏)、history(浏览历史)、screen(显示器屏幕)、navigator(浏览器软件)

各对象之间是有层级关系的,那么个对象之间如何访问呢?
  • window.document.write("ok")
  • window.document.body.bgColor="#FF0000"
  • window对象是所有其它对象的最顶层对象,因此,可以省略

.
.

window对象的属性

  • 1、name:指浏览器窗口的名字或框架的名字。这个名字是给<a>标记的target属性用。
    *设置窗口的名字:window.name="newWin"
    *获取窗口的名字:documentwrite(name)
  • 2、top:代表最顶层窗口。如:window.top
  • 3、parent:代表父级窗口
  • 4、self:代表当前窗口
  • 5、innerWidth:指浏览器窗口的内宽(不含菜单栏、工具栏、地址栏、状态栏),该属性火狐支持,IE不支持。
    * 在IE下,使用document.documentElement.clientWidth来代替window.innerWidth。
  • 6、innerHeight:指浏览器窗口的内高(不含菜单栏、工具栏、地址栏、状态栏),该属性火狐支持,IE不支持
    • 在IE下,使用document.documentElement.clientHeight来代替window.innerHeigth。
    • document.documentElement就是<html>标记对象
    • document.body 就是<body>标记对象



window对象方法


open()方法
  • 功能:打开一个新的浏览器窗口。
  • 语法:var winObj=window.open(url,name,options);

onload事件:当网页加载完成,指<body>标记的所有内容全部加载完成,才触发该事件(条件)。通过onload事件属性,去调用JS的函数。onload属性只有body标记才有。
在JS程序开始写window.onload=init和在<body onload="init()">是一样的,init是有名函数,所以不能加括号,如果是匿名函数,则要加括号,如匿名函数window.onload=fuction(){},用匿名函数可以少写一行。
onclick事件,当单击时,去调用JS代码,所有html标记都有该事件。写在<body>中的某一标记中。




延时器方法——setTimeout()

实例:计时器


此段程序执行顺序:单击开始按钮,onclick事件触发,调用start2()函数,然后去JS中找start2()函数。然后执行函数内的功能

定时器方法----setInterval()

实例:图片执行自动变换




DOM对象

screen屏幕对象

navigator浏览器对象


location地址栏对象


history历史记录对象





.

HTML节点树

节点与节点的关系

DOM中节点类型

核心DOM中公共的属性和方法

  • 提示:核心DOM中查找节点(标记),都是从根节点(html节点)开始的。
    1、节点访问

2、对节点属性操作


3、节点的创建注意:节点就是标记。

实例:随机显示小星星



HTML DOM简介和新特性

HTML DOM访问HTML元素的方法(最常用)

元素对象属性


#######例子:

程序效果

元素对象属性

实例:书讯快递


.

CSS DOM动态样式

使用JS来操作CSS中的各种属性
JS只能操作及修改行内样式:imgObj.style.border="1px solide red"(行类样式一般是那种一个属性只能加一个值的)
对于类样式,通过className来赋值:imgObj.className="imgClass"(类的里面有好多个)

style对象
style对象属性与CSS属性的转换


/1、Event事件

2、常用事件

3、事件句柄属性



Event对象简介

DOM中的Event对象

1、DOM中引入Event对象(DOM浏览器就是标准浏览器)

![Upload Paste_Image.png failed. Please try again.]

2、DOM中Event对象属性

IE中的Event对象

实例:点出满天星星

Paste_Image.png

当当我的购物车



6和7是CSS的引入,8是JS的引入

选项卡实例



![Uploading Paste_Image_464119.png . . .]
历史篇



Form对象

表单提交和验证方法总结

1、使用submit按钮,结合onsubmit事件来实现 (最常用)

onsubmit是form的属性,不能给input标记用,input用onclick


需要阻止就返回假,不需要阻止就不需要返回

2、submit按钮,结合onclick事件,实现表单的验证和提交
3、buttom按钮(普通按钮),结合submit方法,

普通按钮的默认功能无任何功能,所以return布尔值给他没用,不要要return任何值给他

input对象

表单验证案例:


![Upload Paste_Image.png failed. Please try again.]

![Upload Paste_Image.png failed. Please try again.]

![Upload Paste_Image.png failed. Please try again.]

程序效果

二级联动菜单

slect对象属性

option对象

综合案例:二级联动菜单


HTML5

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,723评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,485评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,998评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,323评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,355评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,079评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,389评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,019评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,519评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,738评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,293评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2 345

推荐阅读更多精彩内容