JavaScript
JavaScript:是一种基于对象和事件驱动的,并具有安全性能的脚本语言
特点:(1) 向HTML页面中添加交互行为 (2) 脚本语言,语法和java类似 (3) 解释性语言,一边执行边解释
JavaScript组成
JavaScript ECMAscript DOM BOM
<Script type=”text/javascript”></script>
外部JS文件
<script src=”export.js” type=”text/javaScript”></script>
Javascript 核心语法
变量
- 先声明变量再赋值,var用于声明变量的关键字;
Var width;
Width=5;
2.同时声明赋值
Var catName=“皮皮”
3)不声明直接赋值 不建议使用很容易出错,不方便查找
数据类型
Undefined 变量没有初始值,将被赋予值undefined
Null 表示一个空值 与undefined值相等
Number 整数 浮点数
Boolean true false
String 被引号括起来的文本
属性: 字符串对象.length
charAt(index)返回指定位置的字符
Substring(index1 ,index2)返回位于指定索引包括1 没有2
Split (str)将字符串分割成字符串数组
Typeof检测变量的返回值
如下:
Object JavaScript中的对象,数组和null
数组
创建数组 var 数组名=new Array(size);
为数组元素赋值
访问数组
数组属性方法
Length 返回数组元素的数目
Join()把数组的所有元素放入一个字符串,通过一个的分隔符
Sort() 对数组排序
Push()向数组末尾添加一个或更多元素,并返回新的长度
运算符
- 算术运算符 + - * / % ++ -
- 赋值运算符 = += -=
- 比较运算符 < > <= >= == != !==比较数据类型大小
- 逻辑运算符 && || !
控制语句
- For-in
- For(var i in fruit){
- Document.write(fruit[i]+”<br/>”);}
注释
// /* */
输入输出
Alert 用于输入输出警告或打印 输出
Prompt 输入
语法约定
代码区分大小写
变量,对象核函数的名称
Chrome开发人员工具
停止断点调试
单部调试,不进入函数体内部
单部调试,进入函数体内部
跳出当前函数,禁用所有的断点,不做任何调试
Alert方法
JAVAscript 常用语法函数、
函数定义:类似于Java中的方法,是完成特定任务的代码语句块
使用更简单: 不用定义属于某个类,直接使用
函数分类:
(1)系统函数
parseInt“字符串”将字符串转换成整数+
如果parseInt(86) parseInt(86a) parseInt(86a56) 它们最后都会被转化为86 而parseInt(a86) 转化为输出 NAN
parseFloat:“字符串” 将字符串转换成为浮点型数字
isNaN 用于检测参数是否是非数字数字返回false否则true
(2)自定义函数
Function 函数名{参数1,参数2,参数3、、、}{
//javascript语句
[return 返回值]可有可无
}
(3)调用函数
函数调用一般和表单元素的事件一起使用,调用格式
事件名=“函数名”;
变量作用域
全局变量
局部变量
Onload 一个页面或一幅图像完成加载
Onlick 鼠标单机鼠标单机某个对象
Onmouseover 鼠标指导移到某元素上
Onkeydown 某个键盘按键被按下
Onchange 域的内容被改变
Javascrip操作bom, dom 对象
Bom:浏览器对象模型(Browser object model)
Bom提供了独立于内容的,可以与浏览器窗口进行互动的对象结构
window
History location document
Link 链接
Anchor 停靠
Form
Button
Checkbox
Text
.....
Textarea
Radio select
Bom实现功能 弹出新的浏览器窗口 移动,关闭浏览器窗口以及调整窗口的大小 页面的前进,后退 (history)
Window常用属性 :history有关用管户访问过的URL信息
Location 有关当前URL信息
语法: window.属性名=“属性值”
Window.location=“HTTP://www.baidu.com”跳到百度首页
常用方法:
(1) Prompt()显示可提示用户输入的对话框
两个参数,输入对话框,用来提示用户输入一些信息,单机取消按钮则返回null,单机确定按钮则返回用户输入的值,常用于手机用户关于特定问题而反馈的信息
(2)Alert() 显示带有一个提示信息和一个确定按钮的警示框
一个参数,仅显示警告对话框的消息,无返回值,不能对脚本产生任何改变
(3) Confirm( )显示一个带有提示信息,确定和取消按钮的对话框(避免误操作)
Confirm(“对话框中显示的纯文本”)(布尔型)一个参数
显示提示对话框消息,确定 和 取消 单击确定按钮返回true单击取消则返回false
一次与if-else语句搭配使用
(4)Close () 关闭浏览器窗口
(5)Open(窗口url 窗口名称 窗口特征) 打开一个新的浏览器窗口,加载给定URL所指定的文档
- Height、weight 窗口显示高宽
- Left top x轴坐标 y轴坐标 像素级
- Toolbar =yes|no|1|0 是否显示工具栏默认yes
- Scrollbars=yes|no|1|0是否显示滚动条
- Location=yes|no|1|0是否显示地址栏
- Status=yes|no|1|0 是否添加状态栏
- Menubar=yes|no|1|0是否显示菜单
- Resizable=yes|no|1|0窗口是否可调节尺寸
- Titlebar=yes|no|1|0是否显示标题栏
- Fullscreen=yes|no|1|0 是否使用全屏模式显示浏览器。 默认no,处于全屏模式的窗 口必须同时处于剧院模
setTimeout 在指定的毫秒数后调用一次函数或计算表达式
setInterval() 按照指定的周期(以毫秒计算)来调用函数或表达式
History对象
Back() 加载history对象列表中前一个URL
Forward() 下一个
Go() 某个具体
History.back()=history.go(-1) 浏览器中的后退
History.forward()=history(1)浏览器中的前进
Location对象
Host 设置或返回主机名和当前URL的端口号
Hostname 设置或返回当前URL的主机名
Href 设置或返回完整的URL
常用方法
Reload()重新加载当前文档
Replace()用新的文档替换当前文档
Document对象
常用属性: referrer 返回载入当前文档的URL
URL 返回当前文档的URL
常用方法: getElementByld()返回对拥有指定id的第一个对象的引用(对象的id唯一)
getElementsByName()返回带有指定名称的对象的集合(相同name属性)
getElementsByTagName()返回带有指定标签名的对象的集合(相同的元素)
Write()向文档写文本,HTML表达式或JavaScript代码
.innerHTML HTML层
Javascript内置对象
Math用于执行常用的数学任务,它包含了若干个数字常量和函数
常用方法
Ceil()对数进行上舍入 math.ceil(25.5)返回26
Floor()对数进行下舍入 25.5 25
Round()把数四舍五入为最接近的数 25.5 26
Random()返回0-1之间的随机数
Date 用于操作日期和时间
Var date=new Date(参数)
参数格式: MM DD,YYYY,hh:mm:ss
常用方法
getDate() 返回Date对象中一个月的每一天,其值介于1~31之间
getDay()返回Date对象的星期中的每一天,其值介于0~6之间
getHours()返回Date对象的小时数,其值介于0~23之间
getMinutes()返回 分钟数 0 59
getSeconds 秒数 0-59
getMonth 月分 0-11
getFullYear 年份 值为4位数
getTime 返回自某一时刻(1970年1月1日)以来的毫秒数
定时函数
setTimeout
setInterval
清除函数
clearTimeout()
clearInterval
Javascript 实现dom节点的操作
Dom:Document object model 文档对象模型
DOM Core 适用于任何dom的编程语言
HTML-DOM
CSS-DOM 用于修改界面样式
节点和节点间的关系
文档:document
根节点: <html>
<head > <body>
Title <img> <h1> <p>
文本:DOM节点 文本:喜欢的水果 文本:DOM赢用
元素节点 文本节点 属性节点
根据层次关系访问节点:
节点属性:
parentNode 返回节点的父节点
childNodes 子
firstChild 返回节点的第一个子节点,最普遍的用法师访问该元素的文本节点
LastChild 返回节点的最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点
Element属性
firstElementChild 返回节点的第一个子节点做普遍的用法是访问该元素的文本节点
lastElementChild 返回节点的最后一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点
访问节点:
JavaScript操作节点
nodeName 节点名称 属性节点显示属性名称 文本节点#text 文档节点#document
nodeValue 节点值 文档节点和元素节点不可用
nodeType 节点类型 只读属性
nodeType值
元素 1
属性 2
文本 3
注释 8
文档 9
操作节点
操作节点属性
getAttribute(“属性名”)
setAttribute(“属性名”,属性值)
创建和插入节点
creatElement 创建一个标签名为tagName的新元素节点
A.appendChild (b) 把B节点追加至A节点的末尾
insertBefore(A,B) 把A节点插入到B节点之前
CloneNode(deep) 赋值某个指定节点
删除节点和替换节点
removeChild(node)删除指定的节点
replaceChild(newNode,oldNode)属性attr 用其他的节点替换指定的节点
操作节点样式
HTML元素.style.样式属性=“值”
className属性
HTML元素.className=”样式名称
HTML元素.style.样式属性 只能获得内联样式属性值
Document.getElementById(“carlist“).style.display
1:语法 document.defaultVIew.getComputedStyle(元素,null).属性;
实例:var carlist =document.getElementByld(“cartList”)
Alert(document.defaultView.getComputedStyle(carlist,null).display) 不兼容IE浏览器
2:HTML元素.currentStyle.样式属性
- Offseteft 返回当前元素左边界到它上级元素的左边接的距离,只读属性
- offsetTop ~ 上 ~ 上 ~
- offsetHeight 返回元素的高度~
- offsetWidth ~ 宽~
- offsetParent 返回元素的偏移容量,即对最近的动态定位的包含元素的引用
- scrollTop 返回匹配元素的滚动条的垂直位置~
- clientWidth 返回元素的可见宽度~
- clientHeight ~ 高~
元素属性应用:
Document.documentElement.scrollTop
Left 应用与标准浏览器
Document.body.scrollTop Chrome浏览器
对象是包含相关属性和方法的集合体
什么是面向对象 :面向对象仅仅是一个概念或者编程思想 通过一种叫做原型的方式来实现面向对象编程
Constructor 属性指向flower
实例:alert(flower.constructor==Flower)判断是否为flower类型(有时候不是很准确).
使用instanceof操作符检测对象类型
每个函数都有一个Prototype属性,这个属性是一个指针,指向一个对象
Prototype就是通过调用构造函数而创建的那个对象实例的原型对象
原型链 一个原型对象是另一个原型对象的实例
相关的原型对象层层递进,就构成了实例与原型的链条,就是原型链
构造函数和原型之间的关系
调用man1.getFoot()经历的步骤
- 搜索实例
- 搜索Man.prototype
- 搜索Human.prototype
原型链中如果没有构造函数通过constructor添加
创建子类型实例时,不能向父类型的构造函数中传递参数
借用构造函数:
Apply([thisObj[,argArray]])应用某一对象的一个方法,用另一个对象替换当前对象
Call([thisObj[,arg1[,arg2[,[,argN]]]]]) 调用一个对象的一个方法,以另一个对象替换当前对象
调用构造函数的一个大的优势 :可以在子类型构造函数中向父类型构造函数传递参数
组合继承: 有时也叫做伪经典继承
1 将原型链和借用构造函数的技术组合到一款,发挥二者职场的一种继承模式
2 使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承
原型链 对象继承 组合继承