JavaScript 网页脚本语言 由浅入深 （随笔）

1）基础

学习目的：

1. 客户端表单验证

2. 页面动态效果

3. jQuery的基础

什么是JavaScript？

一种描述性语言，也是一种基于对象和事件驱动的，并具有安全性能的脚本语言

 

 

javaScript是一种基于对象和事件驱动的,并具有安全性能的脚本语言 解释执行
javaScript特点
向HTML页面中添加交互行为
脚本语言,语法和java类似
解释性语言,边执行边解释
javascript的基本结构
语法
<script type="text/javascript">
<-----javascript语句------->
</script>
<script>....</script>可以包含在文档的任何地方,只要保证这些代码在被使用时已经读取并加载到内存中即可

 

javaScript核心语法

 

核心语法 变量 数据类型  数组  运算符号  控制语句  注释   输入输出 语法约定 

 

核心语法变量
var width  var-用于声明变量的关键字
width=5   width-变量名
同时声明和赋值变量
var catname="皮皮";
var x,y,z=10;
不声明直接赋值(不建议使用)
width=5;

 

经验:变量可以不经声明而直接使用,但这种方法很容易出错.也很难查找排错不推荐使用

 

核心语法-数据类型
数据类型:
undefined
null(表示一个空值和undefined值相等)
numbre
boolean
string
属性 字符串对象.length(长度)

 

数组(创建数组)
语法 var 数组名称=new Array(size)
属性 名称 描述
length  设置返回数组中的元素书名

 

方法 join()把数组所有的元素放入一个字符串,通过一个的分隔符进行分隔
     sort()对数组进行排序
     push()向数组末尾添加一个或者更多元素,并返回新的长度

 

核心语法
类型   运算符
算数运算符       +-*/++--
赋值运算符  = += -=
比较运算符  > < >=< >= == != === !==
逻辑运算符  && || !

 

if条件语句
if(条件)
{
//代码
}
else{
//代码
}

 

switch(表达式){
case 常量 1:
 javaScript语句1;
  break
case 常量 2:
 javaScript语句2;
 break
....
default :
javaScript 语句3;

 

for(初始化;条件;增量)
{
javaScript代码
}
white(条件)
{
javaScript代码
}

 

单行注释 //开始,已行末结束

 

多行注释以/*开始,以*/结束,符号/*....*/

 

alert("提示信息")
prompt()
prompt("提示信息","输入框的默认信息")
prompt("请输入你喜欢的颜色","红色")
prompt("请输入你喜欢的颜色","")

 

Chrome开发人员工具
* 停止断点
*单步调试不进入函数体内部
*单步调试,进入函数体内
* 跳出当前函数
*禁用所有断点,不做任何调试
alert()方法

 

函数的含义:类似于java中的方法,是完成的任务代码语句快
使用更简单:不用定义属于某个类,直接使用
函数分类:系统函数和自定义函数

 

parsint("字符串")
将字符串转换为整数数字
parseFloat("字符串")
将字符串转换为浮点数字
ISNAN()
用于检查其参数是否是非数字

 

自定义函数
定义函数  (无参函数) (有参函数)
function 函数名 (参数1,参数2,参数3.....){
//javaScript语句
[return 返回值]---可有可无

 

调用函数
函数调用一般和表单元素事件一起使用,调用格式
事件名="函数名()"
onload 一个页面或者一幅图像完成加载
onlick 鼠标单击某个对象
onmouseover 鼠标指导移到某元素上
onkeydown 某个键盘按键被按下
onchange 域的内容被改变
}

 

为什么要学习JavaScript
表单校验
特效

 

浏览器内核
Chrome  webkit
Firefox  trident
IE
猎豹
搜狗
UC

 

 2）操作BOM

BOM:浏览器对象模型(Browser Object Model)
bom提供了独立于内容的,可以与浏览器窗口进行互动的对象结构

BOM可以实现的功能
弹出新的浏览器窗口
移动关闭浏览器窗口以及调整窗口的大小
页面的前进和后退

Windows对象的常用属性
属相名称   说明
histroy   有关客户访问过的URL的信息
location  有关当前的URL的信息

语法: Window.属性名="属性值";
示例:Window.location="http://www.bdqn.cn"
常用的方法
方法名称   说明
prompt()  显示可以提供用户输入的对话框
alert()   显示带有一个提示信息和一个确定按钮的警示款
confirm()  显示一个带有提示信息,确定和取消按钮的对话框
close()   关闭浏览器窗口
open()   打开一个新的浏览器窗口,加载给定URL所指定的文档
setTimeout()  在指定的毫秒后调用函数或计算表达式
setinterval()  按照指定的周期(以毫秒计)来调用函数或者表达式

confirm():将弹出一个确认对话框
confirm("对话款中显示的纯文本")

open()方法
window.open("弹出窗口的URL","窗口名称","窗口特征")

history对象
常用方法
名称   说明
back()     加载history对象列表的前一个URL
forward()   加载history对象列表中的下一个URL
go()  加载history 对象列表的某一个具体的URL
location对象
常用属性   说明
host   设置或返回主机名和当前URL的端口号
hostname  设置或返回当前的URL的主机名
href   设置或返回完整的URL
常用方法
reload()  重新加载当前文档
replace()  用新的文档替换当前文档

getElementByld() 返回对拥有指定id的第一个对象的引用

getEllementsByName 返回带有指定名称的对象的集合

getElementsByTagName() 返回带有指定标签名的对象的集合

write()   向文档写文本、HTML表达式或JavaScipt代码

Array:用于在单独的变量名存储一系列的值

String: 用于支持对字符串的处理

Math:用于执行常用的数学任务,它包含了若干个数字常量和函数

DATE:用于操作日期和时间
date对象

var 日期对象=new date(参数)
参数格式: MM DD YYYY HH :mm:ss
常用方法
方法   说明
getdate()  返回date对象的一个月中的每一天,其值介于1到31之间

getday()  返回date对象的星期中的每一天,其值介于0到6之间

getHours()  返回date对象的小时数,其介于0到23之间

getminutes()  返回date对象的分钟数其值介于0到59之间

getseconds()  返回date对象的秒数,其值介于0到59之间

getMonth()  返回date对象的月份,其值介于0到11之间

getFullyear()  返回date对象的年份.其值为4位数

gettime()  返回自某一时刻(1970年1月1日)以来的毫秒数

math 对象
常用方法
ceil()  对数进行上舍入   Math.ceil(25.5);返回26    Math.ceil(-25.5);返回-25

floor()  对数进行下舍入   Math.floor(25.5);返回25   Math.floor(-25.5);返回-26

round()  把数四舍五入为最接近的数  MAth.round(25.5);放回26   Math.round(-25.5) 返回-26

random() 返回0到1之间的随机数  Math.random();例如:0.6273608814137365

如何实现返回整数范围为2到99之间的数
var inum=Math.floor(Math.random()*98+2)

定时函数
setTimeout()
setTimeout("调用的函数",等待的毫秒数)
实例:
var myTime=setTimeout("disptime",1000)

setinterval() 周期性
语法 setinterval("调用函数",间隔的毫秒数)

var myTime=setinterval("disptime",1000)

清除函数
clearTimeout()
语法
clearTimeout(setTimeOut()返回的ID值)

var myTime=setTimeout("disptime()"1000)
clearTimeout(myTime)

clearinterval()
clearlinterval(setinterval()返回的ID)

var myTime=setinterval("disptime()",1000)
clearinterval(myTime )

document **
属性: referrer 返回的是上一个页面的URL

3）操作DOM

DOM:Document Object Model(文档对象模型)

节点属性   描述
parentNode  返回节点的父节点

childNodes  返回子节点的集合,childNodes[i];

firstChild  返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点

lastChild  返回节点的最后一个子节点

nextSibling  下一个节点

previousSibling  上一个节点

element属性
属性名称    描述
firstRlrmentChild  返回节点的第一个子节点,最普遍的做法是访问该元素的文本节点

lastElementChild  返回节点的最后一个子节点

nextElenentSilbling  下一个节点

previousElementSibling  上一个节点

节点信息
nodeName:节点名称
nodeValue:节点值
nodeType:节点类型

节点类型   NodeType值
元素element  1
属性attr   2
文本text   3
注释comments  8
文档document  9

操作节点的属性
getAttribute("属性名")
setAttibute("属性名","属性值")

创建和插入节点
创建节点
名称      描述
createElement(tagName)   创建一个标签名为tagName的新元素节点
A.appendChild (B)   把B节点追加到A节点的末尾
insertBefore(A,B)   把A节点插入到B节点之间
cloneNode(deep)    复制到某个节点

删除和替换节点
名称       描述
removeChild(node)     删除指定节点
replaceChild(newNode,oldNode)属性attr  用其他的节点替换指定的节点

操作节点样式
改变样式的属性
style 属性
className属性
HTML元素.style.样式属性="值"
示例
doucument.getElenmentByld("titles").style.color="#ff0000"

className属性
语法 HTML元素.className="样式名称"

获取元素的样式
语法HTML元素.style.样式属性;
示例
alert(document.getElementByid("cartlist").style.display)
实际开发中使用
document.defaultVIEW.getComputerStyle(元素,null).属性
HTML元素.currentStyle.样式属性---兼容IE浏览器

JavaScript获取元素位置

语法
document.documentElement.scrollTop;
document.documentElementt.scrollleft;   标准浏览器
或者
document.body.scrollTop
document.body.scrollleft;  谷歌浏览器

4）面向对象

对象 是包含相关属性和方法的集合

什么是面向对象
面象对象仅仅是一个概念或者编程思想
通过一种叫做原型的方式来实现面向对象的编程

创建对象

自定义对象
内置对象

自定义对象是基于object对象的方式创建对象
语法
var 对象名称=new object();  通过 . 属性和方法 
常见的内置对象
String (字符车) 对象
Date(日期) 对象
Array(数组) 对象
Boolean(逻辑) 对象
Math(算数) 对象
RegExp 对象  ------正则表达式对象

 

如何解决使用同一个接口不需要创建很多对象，减少产生大量重复的代码

** 构造函数

**原型对象

构造函数 是创建特定类型的对象   this变量  new操作符
构造函数始终都应该以一个大写的字母开头

调用构造函数的四个步骤
*创建一个新对象
*将构造函数的作用域给新对象(this就指向了这个新对象)
*执行构造函数中的代码
*返回新对象

constructor属性标识它的对象属性

instanceof操作符检测对象类型

原型对象
每个函数都有一个prototype属性，这个属性是一个指针，指向一个对象
prototype就是通过调用构造函数而创建的那个对象实例的原型对象

原型链 一个原型对象是一个原型对象的实例
相关的原型对象层层递进，就构成了实例与原型的链条，就是原型链

搜索当前的实例

搜索第一个的prototype

对象继承
创建子类对象时，不能向父类型的构造函数中传递参数
借用构造函数
apply([thisOjb[,argArray]])
应用某一个对象的一个方法，用另一个对象替换当前对象

call([thisObj[,arg[,arg2[,[argN]]]]])
调用一个对象的一个方法，以另一个对象替换当前对象
借用构造函数的一个大的优势
可以在子类型构造函数中向父类型构造函数传递参数

组合继承：有时候也叫做伪经典继承
将原型链和借用构造函数的技术组合到一块，发挥二者之长的一种继承模式
使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承
搜索第二个的prototype 

 

 

 

             

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有