JavaScript;
为什么要有JavaScript?
因为用户每一次操作都是要和服务器进行交互的,而当不小心进行了不如意的操作的时候
无法进行回退,使得用户要重新进行操作使得用户的体验性差。
是什么?
JavaScript是脚本语言,是网景公司开发的一个语言,是运行在浏览器的一个脚本语言,
只是借助Java的名字,而非Sun公司开发的。
这个语言最初的设计时为了解决用户注册的问题的。
作用;
通过JavaScript来···操作···HTML标签可以提高用户的体验性。
如;···因为在用户注册时,如果输入有误则需要全部重新输入,不利于用户的体验性
所以也可以通过JavaScript来对用户的输入做一个范围性的限制,
帮助用户避免输入有误。
◆注;可以通过正则表达式来设置
语法;/^正则&/i --- i 是不区分大小写
分类;
1.ECMA_JavaScript是一个JavaScript基础语法
2.BOM_JavaScript是一个面向浏览器的一个JavaScript脚本编程
3.DOM_JavaScript是一个面向页面(用户体验)的一个JavaScript脚本编程
★★★注;在JavaScript中的事件顶层对象是window
普通对象的顶层对象是Object
★重★重★注; 1.方法名不能是与关键字一样,如果没有反应则试下改下名字。
2. 注意大小写问题
----------------------------------------------JS—— 正则表达式 ---------------------------------------------------------------
JavaScript正则表达式;
javaScript的正则表达式和Java的正则表达式符号是通用
【基本所有的语言的正则表达式都是通用的】
JavaScirpt正则表达式语法;
/^正则$/ ^是一个开始标识符
$是一个结束标识符
并且要使用/ xx /
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■↓↓↓↓↓↓ECMA——JS↓↓↓↓↓↓↓↓■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
在HTML中定义JavaScript方式;
1.外部引入;在外部定义一个 .jsp 或 .js 后缀的文件,
在JS文件中写JavaScript的代码,如同CSS的外部引入
2.内部定义;在HTML文档中的<head></head>标签中使用
<script></script> 标签,在标签内部写JavaScript代码
----------------------------------------------------特点---------------------------------------------------------------
JavaScript特点;
1.弱类型的语言,对数据类型不敏感,【因为只有一个var关键字来定义数据】
2.解释型的语言,是直接在浏览器中运行的,
------- 而··不··需要像Java那样还需要进行编译,【所以是按照顺序运行的。】
3.跨平台,跨语言的一个脚本语言,【在PHP,C#,Java等都可以用】
4.运行在浏览器的语言,在HTML文本中定义或引用。
5.基于事件驱动的语言
6.是一个基于对象的语言
7.文件后缀是.js/.jsp
-----------------------------------------------------数据类型-------------------------------------------------------------
JavaScript数据类型; var a = 5;
只有一个〓【 var 】〓关键字来定义数据(变量)的类型,
通过数据(变量)的内容来判断是一个什么类型。
······所以是一个弱类型的语言。
JavaScript数据类型;
boolean ----- true | false
String ----- 字符串 | 字符
Number ----- 数字
undifined ----- 空 | null
Object ----- 自定义对象 | JavaScript提供的对象
◆注;在JavaScript中Number类型,如果要进行一个小数点的运算,
则需要进行转换,否则会默认是一个四舍五入的运算
因为在JavaScript没有浮点类型
〓注;A、【 0 】则是false
【 非0 】 则是 true 负数也是
B、【 null/空 】 则是 false
【 非空 】 则是 true
C、【 undifined 】则是false
【 非undifined 】 则是true
-------------------------------------------------类型转换----------------------------------------------------------------
因为在JavaScript没有浮点类型
类型转换;
1.parseFloat() 将Number类型的一个数值转换成一个小数点的值
2.parseInt() 可以将一个字符串转换成一个整数类型,
★注;只转换可以进行转换的··开始···数字字符串
--------------------------------------------------运算符-----------------------------------------------------------
JavaScript运算符;
算术运算符;+ - * / & ^ |
逻辑运算符;|| && ! 【在JavaScript中没有单 | & 】
比较运算符;> < >= <= !=
三目运算符;(表达式)? x:y;
-------------------------------------------------判断语句---------------------------------------------------------------
1.if
if---else
if---else if...
if---else if...---else
2.switch---case
在switch中的case可以使String,判断语句,number
▲ 注;如果在case中的返回是什么类型则在switch()中则写什么类型。
如;case是判断语句那么在switch()中则写布尔类型的值
---------------------------------------------------循环------------------------------------------------------------
1.while{}
2.do{ }while
3.for(){}
4.for--in
5.with(对象)
▲for--in就是在Java中的forEach,
在JavaScript中主要用于遍历对象和数组的,
1.遍历数组;
JavaScript中遍历数组是遍历出每一个元素的下标
2.遍历对象;
JavaScript中是遍历每一个对象的属性类型,
所以遍历对象时使用;对象[ x ]才可以获取到值
▲with(对象) 是一个预定义的,当需要调用N个这个对象方法时可以使用这个
----------------------------------------------函数和对象的定义--------------------------------------------------------------
在JavaScript中的···函数和对象···的定义是使用function()关键字的。
函数定义的方式;
1.function x(){} ----- 无参的
2.function x(a,b){} ----- 有参的
对象定义的方式;
1.function x(){} ---- 无参
2.function x(a,b){} ---- 有参的
3.var v = function (){} --- 可有参可无参
4.var v = new Object() --- 通过基类来定义,直接 v.属性 = 值 即可
5.var v = { : } --- 属性之间使用 , 隔开 属性赋值是 : 也是一个json格式
〓 注;对象和函数的定义方式类似,而是方法还是对象取决于如何调用
1.函数名() 这个是函数
2.new 函数名() 这个是对象
3.可以通过对象.[属性类型]; 获取到对象的属性值
◆◆◆注;在JavaScript中的形参是不用写var 否则会报错
在JavaScript中有this关键字
JavaScript_Function_Introduce;
在JavaScript中是···没有···函数重载的···也没有···可变形参的。
所以在JavaScript中定义重名的函数,后面的函数会覆盖前面的函数。
虽然JavaScript中没有可变形参,
·····但是提供了····arguments对象数组···来获取到传进来的形参个数
而且在JavaScript中的函数传入的实参个数和形参个数
不一样也不会报错
JavaScript常用的对象;
1.String ....
2.Number ....
3.Boolean ....
4.Date setInterval() setTimeOut()
5.Math round()....
6.数组;
定义方式;
var v = new Array(10);
var v = [xx,xx,xx];
特点;JavaScript的数组是可以存放任意的类型,而且长度是任意的,
即便指定了长度,可是如果是长度超过指定的长度,也不会报错,
而且会自动进行一个扩展。
prototype;
原形,是所有对象都会有的一个属性。
作用;是用于对对象的功能进行的一个扩展
如数组等
Array.prototype.扩展方法名 = function (){ }
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■↓↓↓↓↓↓BOM——JS↓↓↓↓↓↓↓↓■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
BOM_JavaScript;
是什么?
Browser Object Model 是一个浏览器对象模型。
作用;
BOM是面向浏览器操作的。
如;用户点击某页面的某一处,就回退到上一个页面等........
BOM是根据对象进行操作的。
--------------------------------------------------BOM的元素-------------------------------------------------------------
BOM中的元素;
1.弹出框(事件)
---alert() 弹出框(提示)
---confirm() 确认弹出框
---prompt() 输入弹出框
2.定时
id setInterval(x,time) === 过多长时间执行一次,执行N次,返回一个id值
clearInterveal(id) === 清除时间定时
id setTimeOut(x,time) === 过多次时间执行,只执行一次,返回一个id值
clearTimeOut(id) === 清除时间定时
3.history
---历史记录对象;
可以作为前进和后退,和记录
--- back() 上一条历史记录
--- forward() 进入上一条历史记录
=== go(num) 通过指定数值来说明进入的历史记录,负数为退,正数为进,
——————如果超过打开的页数则没有反应
4.navagator
---导航对象;
一般用于兼容性问题,
因为有一些浏览器的版本不支持某些HTML标签
---appVersion
5.location
---本地对象;
本地页面刷新,跳转等。。。。。。
---href= 指定地址
---reload() 刷新本页面
6.Screen
---屏幕对象
---availHeight 获取到屏幕的高度,不包含任务栏
---avaiWidth 获取到屏幕的宽度,不包含任务栏
---height 获取到屏幕的高度,包含任务栏
---width 获取到屏幕的宽度,包含任务栏
7.Domcument;
---是一个规范。
●●● BOM是根据以上的的元素和用户的操作,作用于浏览器的。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■↓↓↓↓↓↓DOM——JS↓↓↓↓↓↓↓↓■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
DOM_JavaScript;
是什么?
1.Document Object Model 文档对象模型。
2.通过操作HTML结构的过程就叫做DOM编程。
3.DOM是层次化结构的。
作用;
1.是作用于浏览器的页面上的,根据用户的操作,作用于浏览器页面。
2.DOM是根据事件进行操作的。
▲ DOM是操作HTML结构的一种思想、规范。
▲ DOM是一个层出化结构的规范,因此将HTML文档结构定义成一棵树,
而每一个元素(标签)都是这个DOM的节点
------------------------------------------------DOM节点分类------------------------------------------------------------------
DOM节点分类;
Node 基类节点
|--- Element 元素节点 (标签)
|--- Comment 注释节点 (标签)
|--- Text 文本节点(内容)
|--- Attr 属性节点 (标签)
★★★注;空格换行也是一个元素
------------------------------------------------DOM节点获取方法------------------------------------------------------------------
DOM获取节点的方法;
1.document.getElementById("id")
--- 获取到这个id的节点(标签)
2.document.getElementsByClassName("className")
--- 获取到所有这个class属性的节点(标签)【数组】
3.document.getElementsByName("name")
--- 获取到所有这个name属性的节点 【数组】
4.document.getElementsByTagName("TagName")
--- 获取到这个标签名的所有节点【数组】
5.document.all()
---获取到这个文档的所有节点【数组】
6.document.forms()
---获取到这个文档的所有form表单的所有节点【数组】
7.document.images()
---获取到这个文档的所有图片【数组】
------------------------------------------------DOM节点关系------------------------------------------------------------------
DOM节点的关系;
1.父关系;
Node parentNode() --- 获取到父节点
2.兄弟关系;
Node nextSubling() --- 下一个兄弟节点
Node previousSubling() --- 上一个兄弟节点
3.子关系;
Node childNodes() --- 获取到所有的子节点 【数组】
Node firstChild() --- 第一个子节点
Node lastChild() --- 最后一个子节点
------------------------------------------------DOM增删改------------------------------------------------------------------
Node .createElement("nodeName") ----- 创建节点
Node .appendChild() 添加子节点, ----- 是添加到最后一个的。
Node .setAttribute("Attr.name","price") ----- 设置属性
Node .removeChild(“node”) ----- 删除节点
------------------------------------------------DOM其他方法------------------------------------------------------------------
1.Node nodeName() ----- 节点名称
2.Node nodeType() ----- 节点类型 【数字】
3.Node nodeValue() ----- 节点的值
Node .value 获取到节点的文本内容
Node .innerHTML 设置节点的文本内容
为什么要有JavaScript?
因为用户每一次操作都是要和服务器进行交互的,而当不小心进行了不如意的操作的时候
无法进行回退,使得用户要重新进行操作使得用户的体验性差。
是什么?
JavaScript是脚本语言,是网景公司开发的一个语言,是运行在浏览器的一个脚本语言,
只是借助Java的名字,而非Sun公司开发的。
这个语言最初的设计时为了解决用户注册的问题的。
作用;
通过JavaScript来···操作···HTML标签可以提高用户的体验性。
如;···因为在用户注册时,如果输入有误则需要全部重新输入,不利于用户的体验性
所以也可以通过JavaScript来对用户的输入做一个范围性的限制,
帮助用户避免输入有误。
◆注;可以通过正则表达式来设置
语法;/^正则&/i --- i 是不区分大小写
分类;
1.ECMA_JavaScript是一个JavaScript基础语法
2.BOM_JavaScript是一个面向浏览器的一个JavaScript脚本编程
3.DOM_JavaScript是一个面向页面(用户体验)的一个JavaScript脚本编程
★★★注;在JavaScript中的事件顶层对象是window
普通对象的顶层对象是Object
★重★重★注; 1.方法名不能是与关键字一样,如果没有反应则试下改下名字。
2. 注意大小写问题
----------------------------------------------JS—— 正则表达式 ---------------------------------------------------------------
JavaScript正则表达式;
javaScript的正则表达式和Java的正则表达式符号是通用
【基本所有的语言的正则表达式都是通用的】
JavaScirpt正则表达式语法;
/^正则$/ ^是一个开始标识符
$是一个结束标识符
并且要使用/ xx /
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■↓↓↓↓↓↓ECMA——JS↓↓↓↓↓↓↓↓■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
在HTML中定义JavaScript方式;
1.外部引入;在外部定义一个 .jsp 或 .js 后缀的文件,
在JS文件中写JavaScript的代码,如同CSS的外部引入
2.内部定义;在HTML文档中的<head></head>标签中使用
<script></script> 标签,在标签内部写JavaScript代码
----------------------------------------------------特点---------------------------------------------------------------
JavaScript特点;
1.弱类型的语言,对数据类型不敏感,【因为只有一个var关键字来定义数据】
2.解释型的语言,是直接在浏览器中运行的,
------- 而··不··需要像Java那样还需要进行编译,【所以是按照顺序运行的。】
3.跨平台,跨语言的一个脚本语言,【在PHP,C#,Java等都可以用】
4.运行在浏览器的语言,在HTML文本中定义或引用。
5.基于事件驱动的语言
6.是一个基于对象的语言
7.文件后缀是.js/.jsp
-----------------------------------------------------数据类型-------------------------------------------------------------
JavaScript数据类型; var a = 5;
只有一个〓【 var 】〓关键字来定义数据(变量)的类型,
通过数据(变量)的内容来判断是一个什么类型。
······所以是一个弱类型的语言。
JavaScript数据类型;
boolean ----- true | false
String ----- 字符串 | 字符
Number ----- 数字
undifined ----- 空 | null
Object ----- 自定义对象 | JavaScript提供的对象
◆注;在JavaScript中Number类型,如果要进行一个小数点的运算,
则需要进行转换,否则会默认是一个四舍五入的运算
因为在JavaScript没有浮点类型
〓注;A、【 0 】则是false
【 非0 】 则是 true 负数也是
B、【 null/空 】 则是 false
【 非空 】 则是 true
C、【 undifined 】则是false
【 非undifined 】 则是true
-------------------------------------------------类型转换----------------------------------------------------------------
因为在JavaScript没有浮点类型
类型转换;
1.parseFloat() 将Number类型的一个数值转换成一个小数点的值
2.parseInt() 可以将一个字符串转换成一个整数类型,
★注;只转换可以进行转换的··开始···数字字符串
--------------------------------------------------运算符-----------------------------------------------------------
JavaScript运算符;
算术运算符;+ - * / & ^ |
逻辑运算符;|| && ! 【在JavaScript中没有单 | & 】
比较运算符;> < >= <= !=
三目运算符;(表达式)? x:y;
-------------------------------------------------判断语句---------------------------------------------------------------
1.if
if---else
if---else if...
if---else if...---else
2.switch---case
在switch中的case可以使String,判断语句,number
▲ 注;如果在case中的返回是什么类型则在switch()中则写什么类型。
如;case是判断语句那么在switch()中则写布尔类型的值
---------------------------------------------------循环------------------------------------------------------------
1.while{}
2.do{ }while
3.for(){}
4.for--in
5.with(对象)
▲for--in就是在Java中的forEach,
在JavaScript中主要用于遍历对象和数组的,
1.遍历数组;
JavaScript中遍历数组是遍历出每一个元素的下标
2.遍历对象;
JavaScript中是遍历每一个对象的属性类型,
所以遍历对象时使用;对象[ x ]才可以获取到值
▲with(对象) 是一个预定义的,当需要调用N个这个对象方法时可以使用这个
----------------------------------------------函数和对象的定义--------------------------------------------------------------
在JavaScript中的···函数和对象···的定义是使用function()关键字的。
函数定义的方式;
1.function x(){} ----- 无参的
2.function x(a,b){} ----- 有参的
对象定义的方式;
1.function x(){} ---- 无参
2.function x(a,b){} ---- 有参的
3.var v = function (){} --- 可有参可无参
4.var v = new Object() --- 通过基类来定义,直接 v.属性 = 值 即可
5.var v = { : } --- 属性之间使用 , 隔开 属性赋值是 : 也是一个json格式
〓 注;对象和函数的定义方式类似,而是方法还是对象取决于如何调用
1.函数名() 这个是函数
2.new 函数名() 这个是对象
3.可以通过对象.[属性类型]; 获取到对象的属性值
◆◆◆注;在JavaScript中的形参是不用写var 否则会报错
在JavaScript中有this关键字
JavaScript_Function_Introduce;
在JavaScript中是···没有···函数重载的···也没有···可变形参的。
所以在JavaScript中定义重名的函数,后面的函数会覆盖前面的函数。
虽然JavaScript中没有可变形参,
·····但是提供了····arguments对象数组···来获取到传进来的形参个数
而且在JavaScript中的函数传入的实参个数和形参个数
不一样也不会报错
JavaScript常用的对象;
1.String ....
2.Number ....
3.Boolean ....
4.Date setInterval() setTimeOut()
5.Math round()....
6.数组;
定义方式;
var v = new Array(10);
var v = [xx,xx,xx];
特点;JavaScript的数组是可以存放任意的类型,而且长度是任意的,
即便指定了长度,可是如果是长度超过指定的长度,也不会报错,
而且会自动进行一个扩展。
prototype;
原形,是所有对象都会有的一个属性。
作用;是用于对对象的功能进行的一个扩展
如数组等
Array.prototype.扩展方法名 = function (){ }
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■↓↓↓↓↓↓BOM——JS↓↓↓↓↓↓↓↓■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
BOM_JavaScript;
是什么?
Browser Object Model 是一个浏览器对象模型。
作用;
BOM是面向浏览器操作的。
如;用户点击某页面的某一处,就回退到上一个页面等........
BOM是根据对象进行操作的。
--------------------------------------------------BOM的元素-------------------------------------------------------------
BOM中的元素;
1.弹出框(事件)
---alert() 弹出框(提示)
---confirm() 确认弹出框
---prompt() 输入弹出框
2.定时
id setInterval(x,time) === 过多长时间执行一次,执行N次,返回一个id值
clearInterveal(id) === 清除时间定时
id setTimeOut(x,time) === 过多次时间执行,只执行一次,返回一个id值
clearTimeOut(id) === 清除时间定时
3.history
---历史记录对象;
可以作为前进和后退,和记录
--- back() 上一条历史记录
--- forward() 进入上一条历史记录
=== go(num) 通过指定数值来说明进入的历史记录,负数为退,正数为进,
——————如果超过打开的页数则没有反应
4.navagator
---导航对象;
一般用于兼容性问题,
因为有一些浏览器的版本不支持某些HTML标签
---appVersion
5.location
---本地对象;
本地页面刷新,跳转等。。。。。。
---href= 指定地址
---reload() 刷新本页面
6.Screen
---屏幕对象
---availHeight 获取到屏幕的高度,不包含任务栏
---avaiWidth 获取到屏幕的宽度,不包含任务栏
---height 获取到屏幕的高度,包含任务栏
---width 获取到屏幕的宽度,包含任务栏
7.Domcument;
---是一个规范。
●●● BOM是根据以上的的元素和用户的操作,作用于浏览器的。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■↓↓↓↓↓↓DOM——JS↓↓↓↓↓↓↓↓■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
DOM_JavaScript;
是什么?
1.Document Object Model 文档对象模型。
2.通过操作HTML结构的过程就叫做DOM编程。
3.DOM是层次化结构的。
作用;
1.是作用于浏览器的页面上的,根据用户的操作,作用于浏览器页面。
2.DOM是根据事件进行操作的。
▲ DOM是操作HTML结构的一种思想、规范。
▲ DOM是一个层出化结构的规范,因此将HTML文档结构定义成一棵树,
而每一个元素(标签)都是这个DOM的节点
------------------------------------------------DOM节点分类------------------------------------------------------------------
DOM节点分类;
Node 基类节点
|--- Element 元素节点 (标签)
|--- Comment 注释节点 (标签)
|--- Text 文本节点(内容)
|--- Attr 属性节点 (标签)
★★★注;空格换行也是一个元素
------------------------------------------------DOM节点获取方法------------------------------------------------------------------
DOM获取节点的方法;
1.document.getElementById("id")
--- 获取到这个id的节点(标签)
2.document.getElementsByClassName("className")
--- 获取到所有这个class属性的节点(标签)【数组】
3.document.getElementsByName("name")
--- 获取到所有这个name属性的节点 【数组】
4.document.getElementsByTagName("TagName")
--- 获取到这个标签名的所有节点【数组】
5.document.all()
---获取到这个文档的所有节点【数组】
6.document.forms()
---获取到这个文档的所有form表单的所有节点【数组】
7.document.images()
---获取到这个文档的所有图片【数组】
------------------------------------------------DOM节点关系------------------------------------------------------------------
DOM节点的关系;
1.父关系;
Node parentNode() --- 获取到父节点
2.兄弟关系;
Node nextSubling() --- 下一个兄弟节点
Node previousSubling() --- 上一个兄弟节点
3.子关系;
Node childNodes() --- 获取到所有的子节点 【数组】
Node firstChild() --- 第一个子节点
Node lastChild() --- 最后一个子节点
------------------------------------------------DOM增删改------------------------------------------------------------------
Node .createElement("nodeName") ----- 创建节点
Node .appendChild() 添加子节点, ----- 是添加到最后一个的。
Node .setAttribute("Attr.name","price") ----- 设置属性
Node .removeChild(“node”) ----- 删除节点
------------------------------------------------DOM其他方法------------------------------------------------------------------
1.Node nodeName() ----- 节点名称
2.Node nodeType() ----- 节点类型 【数字】
3.Node nodeValue() ----- 节点的值
Node .value 获取到节点的文本内容
Node .innerHTML 设置节点的文本内容
给事件添加函数名,可以使用this代表当前