`
haiyupeter
  • 浏览: 431449 次
  • 性别: 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
分享到:
评论

相关推荐

    javascript基础知识总结

    以下是对JavaScript基础知识的总结,主要关注在网页中使用的弹出对话框、函数调用以及带有参数的函数。 1) Alert Box `alert()` 函数用于显示一个包含警告信息的单行对话框,用户只能点击“确定”按钮关闭它。在...

    JavaScript基础知识点汇总(代码+知识点)

    这份“JavaScript基础知识点汇总”涵盖了从基础到进阶的多个方面,帮助开发者系统地理解和掌握这一语言。以下是详细的JavaScript知识点解析: 1. **变量**:在JavaScript中,我们可以使用`var`, `let`, 或 `const` ...

    JavaScript基础知识例子

    总的来说,这个压缩包提供了一个全面的JavaScript基础知识教程,涵盖了数据类型、Object、内置对象和变量等核心概念,对于初学者或者需要巩固基础的开发者来说,是一份非常有价值的参考资料。通过学习这些内容,可以...

    JavaScript基础知识总结

    1. JavaScript 的基础知识 在学习 JavaScript 之前,你需要了解 HTML 和 XHTML 的基础。JavaScript 被设计用来向 HTML 页面添加交互行为,通过在 HTML 中插入 JavaScript 代码,可以实现页面元素的动态操作和用户...

    JavaScript学习笔记,javascript基础知识,基础语法整理.pdf

    JavaScript基础知识点总结 JavaScript是一种高级的、动态的、基于对象的客户端脚本语言。它是在网页上执行的脚本语言,能实现网页的交互功能。下面是该资源中的重要知识点总结: 一、 JavaScript 基本概念 * ...

    Javascript基础知识整理.doc

    Javascript基础知识整理 JavaScript是一种高级的、动态的、弱类型的编程语言,主要用于客户端脚本编程。它可以在浏览器中执行,实现网页的交互性和动态效果。本文将对JavaScript的基础知识进行整理和总结,包括脚本...

    javascript 基础知识 2

    JavaScript基础知识2的内容涵盖了多个层面,主要包含JavaScript的高级概念以及它的实际应用场景。首先,会介绍JavaScript的核心组成,包括语法结构、数据类型、变量和函数等基础知识。接着,会深入探讨对象和数组的...

    javascript 基础知识 5

    在深入探讨JavaScript基础知识的第五部分之前,我们需要明白JavaScript是一种脚本语言,它是网页开发中不可或缺的一部分。其主要用途是创建动态内容和交互式网页。随着HTML5和CSS3的普及,JavaScript在前端开发中的...

    javascript 基础知识 15

    JavaScript基础知识是网页编程中不可或缺的一部分。首先,JavaScript是一种轻量级的解释执行型编程语言,它的主要作用是为网页添加交互功能。它可以在所有主流浏览器中运行,包括Internet Explorer、Mozilla Firefox...

    javascript 基础知识 16

    在学习JavaScript基础知识时,我们首先需要了解它的核心概念。JavaScript的核心包括变量、数据类型、运算符、控制结构等。变量相当于一个容器,用于存储数据值;数据类型分为基本数据类型和引用数据类型,基本数据...

    javascript 基础知识 14

    JavaScript是一种广泛使用的脚本语言,它能够让网页具有交互功能,是实现前端动态效果的核心技术之一。...JavaScript基础知识是学习前端开发的基石,理解并掌握这些基础概念对于开发高性能的网页和Web应用至关重要。

    javascript 基础知识 3

    总结而言,JavaScript基础知识3的内容包括了JavaScript的语法基础、数据类型、函数、控制流程、错误处理、事件处理、网络协议、AJAX和Fetch API的使用,以及模块化编程和前端框架的介绍。掌握了这些知识点,就能够更...

    Javascript基础知识

    本文将详细介绍JavaScript的基础知识,包括它的编程基础、工作原理、在HTML中的使用方法,以及数据类型、变量、常量、运算符、表达式、控制流程和数组等核心概念。 首先,JavaScript最初由Netscape公司开发,是一种...

    javascript 基础知识 13

    javascript 基础知识包括但不限于以下知识点: 1. 变量与数据类型:在JavaScript中,变量是存储数据的容器,其数据类型分为基本数据类型和对象类型。基本数据类型包括数字(Number)、字符串(String)、布尔(Boolean)...

    javascript 基础知识 4

    在深入探讨JavaScript基础知识的过程中,第四部分主要关注的是JavaScript如何通过网络协议与其他系统进行交互。JavaScript作为一种在浏览器中运行的脚本语言,它能够通过多种网络协议实现前端与后端的数据交换和通信...

    javascript 基础知识

    javascript 基础知识

    javascript基础知识

    以下是对给定内容中提及的JavaScript基础知识的详细解释: 1. **创建脚本块**:在HTML中,`&lt;script&gt;`标签用于插入JavaScript代码。例如:`”JavaScript”&gt;JavaScript 代码写在这里面&lt;/script&gt;`。 2. **隐藏脚本**...

    JavaScript基础知识和高级应用.zip

    但是,基于标题中提到的“JavaScript基础知识和高级应用”,我们可以详细阐述JavaScript的相关知识点。 JavaScript是一种广泛使用的高级、解释型编程语言。它是网页浏览器的脚本语言,也是服务器端环境(如Node.js...

Global site tag (gtag.js) - Google Analytics