`
haiyupeter
  • 浏览: 418095 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

JavaScript基础知识

阅读更多
1.什么是JavaScript
    JavaScript 是一门脚本语言,主要由 ECMAScript 规范(与任何的宿主无关),DOM,BOM组成。

    ECMAScript 是一种规范,定义语言的属性、语法、对象,该规范由具体语言实现,如Javascript、ActionScript、ScriptEase等;

    DOM(Document Object Model 文档对象模型)是Html和Xml的应用程序接口(API),DOM将页面规划成由节点层级构成的文档;

    BOM(Browser Object Model 浏览器对象模型),提供对浏览器进行访问和操作的统一接口API。BOM相关API处理浏览器窗口window和document,包含:window.open弹出新的窗口,移动,关闭浏览器,cookie支持等。

2.ECMAScript
    严格来说ECMAScript才是JavaScript语言,它以任何的宿主环境无关
(1)、语法
区分大小写
弱类型
注释,函数与java近似(java 7以后有闭包)

(2)、变量定义
    弱类型
    下划线,字母,$起头
    Pascal记法

(3)、数据类型
    原始值:存储于栈空间,易于操作,共有五种:Number、Null、Undefined、String、Boolean,五种类型可以通过typeof来判断,如typeof(a) 返回”number”,”object”,”undefined”,”string”,”boolean”

注意:
    null和undefined区别,undefined声明了变量但未对变量的赋初值,null 表示尚未存在的对象,但typeof(null)返回值也为object,null属于一个空的object
isNaN(num)方法判断 num 是否为数值型,NaN == Not a Number,若 num 是数字,返回值为 false,若 num 是非数字,则返回值为true

转换:数值转字符串,使用toString()方法,注意Num.toString(2)可以选择使用多少进制来转换;字符串转数值,parseInt、parseFloat函数;强制类型转换,Boolean(‘true’), var s1=String(23);

引用值:
    var o = new Object(); var num = new Number(5);
    调用对象的valueOf()返回原始值,注意各个对象中的属性和方法;Number,String采用    instanceof来判断一个特定对象为某特定类型

JavaScript对象:
    本地对象:Object Function Array String Boolean Number Date RegExp 一批Error类
    内置对象:Global Math
    宿住对象:由具体的宿主环境提供,所有的BOM和DOM都是宿主对象

(4)、操作符
    基本的语言操作符都近似的操作符:
    数值操作 (Arithmetic Operations): + ++ – — * / %
    字符串操作 (String Operations): + +=
    逻辑操作 (Logical Operations): && || !
    位操作 (Bitwise Operations): & ^ | ~ << >> >>> 注意: 3 << 2 == 12 自动转换成10进制
    分配操作 (Assignment Operations): = += -= *= /= %= &= ^= |= <<= >>= >>>=
    比较操作 (Comparison Operation): == != === !== > >= < <=

注意:
    负数的表示形式为“正数取反再加1”
    左移时右边补0,保留符号位(也就是第31位的1不变)
    右移时左边补0,保留符号位

(5)、语法
    与Java,C++基本类似,些许不同:
width(object){
 
// do something here
}

    在width内部可以直接使用object的属性及方法,而不用通过object.fn(**);可以直接使用fn(**)

(6)、函数,对象的定义
    每个对象都有共同的prototype属性,prototype可添加方法。JavaScript语言与其他高级语言的最大不同点体现在prototype属性,使用prototype可用于模拟高级语言中的对象继承!
(7)、对象
    创建对象的三种方式:
// 直接新建Object对象
var obj = new Object();
obj.name = "zl";
obj.age = 23;
 
// 使用new 对象方式访问对象
var obj1 = new Array();
 
// 直接使用JSON数据
var obj2 = {"name":"zl","age":23};

(8)、闭包
    总结在另一章里面:JavaScript闭包 。
(9)、正则表达式
    正则表达式我喜欢abruzzi 写的JavaScript内核系列 第6章 正则表达式

3.DOM模型
    页面上的每个HTML元素,都作为一个DOM对象,拥有属性和方法,参考w3school dom

    document是重要的对象,默认document属于windows的属性对象,表示整个DOM文档,包含对DOM元素的操作API。

    document查找API包括:getElementById(elemId),查找页面内唯一id的元素,若有多个id相同的对象,只返回第一个,速度最快的查找方法。若查找到,返回单个对象。
getElementsByName(elemName),按name属性查找,同一页面中可以包含多个相同name属性的对象,返回值数组类型。

    getElementsByTagName(tagName),按元素标签查找元素,匹配元素的标签名。

    现代浏览器还增加了一getElementsByClassName(className),在firefox上测试,里面若包含了className,同时包含其他的样式,可以被匹配出来,免去了以前用正则表达式来做处理,减少代码量。帮助用户更快的进行元素的选择。这种方法的使用使得手机端的选择器可以大大减少代码量。document还包含对body的直接访问:document.body,可以调用到body.onready函数,装载DOM元素完成时对body内的元素进行操作。cookie也属于document的属性对象,对cookie的内容进行获取并访问。title也属于document的属性对象,可直接更改页面的title。其余的div,table等元素的介绍,可参考 w3school dom

4.BOM模型
window
    所有的浏览器都应该支持window对象,window对象包含了宿主对象提供JavaScript操作的接口。
    参考:w3school window 对象的属性和方法,分类:

    弹出窗口提示: alert(), confirm(), prompt()
    定时器相关:setTimeout(), setInterval(), clearTimeout(), clearInterval()
    打开关闭相关:open(), close() (注意:open函数,控制窗口的特征:位置,大小,模式,菜单栏等)
    浏览器大小相关:resizeBy(width, height), resizeTo(x, y)
    浏览器位置相关:moveBy(x, y), moveTo(x, y), scrollBy(xnum, ynum), scrollTo(xpos, ypos)
    窗口打印:print()

    注意 :要读取outterHeight, outterWidth, innerHeight, innerWidth,可以从document.body属性读取,即通过dom对象来读取,而不是直接操作window对象

常用属性:
    父子关系:parent, opener, top
    屏幕大小:screenLeft, screenTop, screenX, screenY (screen 相关有浏览器兼容问题,这个属性原本应该不是在这里的,所以才导致各个不统一)
状态:name, defaultStatus, status

    window对象还包含location, history, screen, navigator, 和 document对象, document 已在 DOM小节说明,下面解析其他对象。

location
    location控制当前页面 url 链接,如hash表示#号锚点,search表示?及其后的所有数据。一个链接可以表示为:href = protocol + “//” + hostname + “:” port + path
涉及到链接改变需刷新页面,location中添加了reload()方法,用于刷新当前页面:


history
go(url | num) 跳转到第几个历史页面
forward() 前进
back() 后退

navigator
    浏览器版本信息等,区分浏览器非常有用,最常用userAgent属性,包含版本非常详尽的信息,然后再通过正则找出想要的浏览器信息如:chrome控制台输入navigator.userAgent,输出:Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4

screen
    浏览器的宽高,相素等信息:
availHeight: 1056
availLeft: 66
availTop: 24
availWidth: 1854
colorDepth: 24
height: 1080
pixelDepth: 24
width: 1920
  • 大小: 27.4 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics