JavaScript 笔记

一、JavaScript——基础

 

1、简介:用于改进设计、读写HTML元素、对事件做出响应、检测访问者浏览器和验证表单数据、创建Cookies等。

☆JavaScript用以向HTMl文档(嵌入)添加交互行为,是一种脚本语言(轻量级编程语言),由数行咳执行的计算机代码组成,无需许可证。是一种解释性语言(执行时不进行预编译)。

☆执行平台:Web浏览器。

☆执行方式:解释执行(由上而下)。

 

JavaScript由三个部分组成:核心(ECMAScript),文档对象模型(DOM),浏览器对象模型(BOM)。

 

java与javascrit区别:

首先,它们是两个公司开发的不同的两个产品,Java是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发;而JavaScript是Netscape公司的产品,其目的是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。

其次,JavaScript是基于对象的,而Java是面向对象的,即Java是一种真正的面向对象的语言,即使是开发简单的程序,必须设计对象。JavaScript是种脚本语言,它可以用来制作与网络无关的,与用户交互作用的复杂软件。它是一种基于对象和事件驱动的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。

第三,两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前,必须经过编译,因而客户端上必须具有相应平台上的仿真器或解释器,它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。JavaScript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式的字符代码发送给客户,由浏览器解释执行。

第四,两种语言所采取的变量是不一样的。Java采用强类型变量检查,即所有变量在编译之前必须作声明。JavaScript中变量声明,采用其弱类型。即变量在使用前不需作声明,而是解释器在运行时检查其数据类型。

第五,代码格式不一样。Java是一种与HTML无关的格式,必须通过像HTML中引用外媒体那么进行装载,其代码以字节代码的形式保存在独立的文档中。JavaScript的代码是一种文本字符格式,可以直接嵌入HTML文档中,并且可动态装载。编写HTML文档就像编辑文本文件一样方便。

第六,嵌入方式不一样。在HTML文档中,两种编程语言的标识不同,JavaScript使用<script>...</script>来标识,而Java使用<applet> ... </applet> 来标识。

第七,静态绑定和动态绑定。Java采用静态联编,即Java的对象引用必须在编译时的进行,以使编译器能够实现强类型检查,如不经编译则就无法实现对象引用的检查。JavaScript采用动态联编,即JavaScript的对象引用在运行时进行检查。

 

 

 

2、实现JavaScript

☆HTML的<script>标签用于 嵌入JavaScript。type属性定义脚本语言

☆document.write()输出语句

JavaScript的格式:

JavaScript区分大小写;

JavaScript脚本程序须嵌入在HTML文件中;

JavaScript脚本程序中不能包含HTML标记代码;(双引号)

每行写一条脚本语句;

语句末尾可以加分号;

JavaScript脚本程序可以独立保存为一个外部文件,但其中不能包含<script></script>标签。

 

 

3、放置JavaScript

☆位于head:脚本被调用 或触发对应事件时执行。(在接收文档时被载入,但不执行)

  位于body:页面被载入时执行脚本。

☆外部JavaScript:适用于多页面需求。以.js.后缀的脚本文件不能包含<script>标签。

 

4、JavaScript语句

☆JavaScript是由浏览器执行的语句序列。JavaScript语句是发给浏览器的命令。(好习惯:语句结尾加分号)

☆JavaScript代码是JavaScript语句的序列,浏览器根据编写顺序依次执行每条语句。

JavaScript代码块:一并地执行语句序列。

  注释:单行// 多行/*  */

 

☆变量:存储信息(值或表达式)的容器。规则:大小写敏感、字母/下划线开始。(JavaScript大小写敏感)

  声明:可用var语句。

  变量生存期:本地变量(函数内声明的变量,只能在函数内使用)、函数外声明的变量 生存期在网页关闭时结束。

  运算符:(基本) 赋值=  +=  -=  *=  /=  %=       算术+ - * / %   ++ --      字符串连接 +

  比较和逻辑:==  ===  !=  >  <  >=  <=       && || !

  条件:  boolCondition?value1:value2

 

☆条件语句:if switch

☆循环语句:for while    for( 变量=开始值;变量<=结束值;变量=变量+步进值 ) { … }

  循环终止语句:break 、continue

for…in:遍历数组或对象的属性。for( 变量 in 对象 ) { … }

(while和for…in的变量 在循环语句外 声明)

 

5、三种消息框:警告/确认/提示

☆警告 alert(”文本”)——确认

  确认 confirm(”文本”)——确认/取消 (返回true/false)

  提示 prompt(”文本”,”默认值”)——输入-确认/取消 (返回value/null)

 

6、函数:在<head>定义,被调用或事件驱动时运行。

☆将脚本编写为函数 可避免网页载入时执行脚本。

☆定义函数:function funcName (par1,par2…) { 代码… }

          需要返回函数值时用return语句

默认函数:编码函数:escape()将非字母/数字字符转换成ASCII码。

译码函数:unescepe():将ASCII码转换成字母/数字。

求值函数:eval():返回运算结果。

数值判断函数:isNaN( var ):返回布尔值—是否为数值。

整数转换函数:parseInt( 数值字符串,[底数] ):将不同进制的数值 转换为 十进制的数值。

浮点数转换函数:parseFloat(数值字符串):将数值字符串转换成浮点数。

 

 

7、JavaScript事件

☆事件:可被JavaScript侦测到的行为。(页面/多媒体载入、表单、鼠标、键盘等)

☆进出网页触发:onload/onUnload事件(常用于处理 用户进入/离开网页时 创建的cookies)

onload事件:常用于检测 访问者浏览器的浏览器类型和版本,据此载入特定版本网页。

☆验证表单的事件:onFocus、onBlur(失去焦点)、onChange   <input>

 提交表单前,验证所有表单域:onSubmit   <form>

☆创建”动态”按钮:onMouseOver、onMouseOut <a>

 

8、Try…Catch语句(检测代码错误)try{。。。}  catch(err){。。。}

Throw声明:用于创建exception(异常/错误)。

 

 

 

 

二、Javascript对象

☆JavaScript是OOP(面向对象的编程语言,可自定义对象和变量类型)。

☆对象:一种经过组织的数据,具有属性(与对象相关的值)和方法(对象可执行的行为)。

 

 

 

1、字符串(string)对象:用于处理文本/字符串。

                      创建语法:参数s为储存在此对象的值new String(s);

                参数s为转换为字符串的值String(s);

☆indexOf():查找字符串 某一字符 首次出现位置。

  match():查找并返回 指定字符。

replace():替换字符串中指定字符。var.replace( /被替换字符/,“取代的字符”)

☆字符串对象方法:

blod():粗体。  italtics():斜体。  strike():删除线。

fontsize():文字大小。   fontcolor():文字颜色。

sup():上标。            sub():下标。

toUpperCase():大写。  toLowerCase():小写。

charAt(索引):返回指定索引的 字符。

charCodeAt(索引):返回指定索引的 ASCII字符码,十进制表示。

indexOf(“字符串”,[索引]):返回字符串的 索引位置。

lastIndexOf():(反向搜索) 索引位置。

search(“字符串”):返回字符串 的索引。

replace(“字符串1”,“字符串2”):替换。

slice( 索引i,[索引j] ):返回子字符串。

split( [“字符串”],[限制]):将字符串从对象中删除。

substr(start,[length]):返回指定长度的字符串。

substring( 索引i,[索引j] ):返回子字符串。

link(“url”):设置链接。

toString():返回字符串。

valueOf()返回字符串值。

match(/匹配字符/):\d匹配一个数字字符。\D非数字字符。\n换行符。\r回车符。\s空格字符。

\S任何非空格字符。\t table符。\W任何非单词符。\num正整数。/n/81016进制escape值。

 

2、Date对象:用new关键字定义。

☆设置特定日期:myDate.setFullYear(2012,0,30) 设置特定日期(2012年1月30日)。

          注意:月份参数介于0~11之间。

☆设置N天后的日期:myDate . setDate(myDate . getDate() + 5 ); 设置对象为5天后的日期。

               注意:日期对象会自动转换 增加后的影响。

☆日期可进行比较:var myDate=(new Date()).setFullYear(2012,0,30);

                 if(myDate > (new Date())) { … }

☆将日期根据UTC转换为字符串:tuUTCString()

 


默认对象:日期对象,日期基线:1970年1月1日00:00 : 00

☆日期对象方法:getYear():返回年份数。

getFullYear():返回年份数。

getMonth(): 返回月份数(0—11)。

getDate():   返回日期数(1—31)。

getDay():    返回星期数(0—6)。

getHours():  返回时数(0—23)。

getMinutes():返回分数(0—59)。

getSeconds():返回秒数(0—59)。

getMilliseconds()返回毫秒数(0—999)。

getTime():返回对应日期基线的毫秒。

Date.parse(日期字符串):返回对应日期基线的毫秒。

setTime(时间值):指定一日期对象的值。

toGMTString():以GMT格式表示日期对象。

toUTCString():以GMT格式表示日期对象。

 

 

 

3、Array对象:在单独变量中储存一系列值。用new关键字定义。

☆两种 数组赋值:先声明(或同时定义大小),再给各赋值。

                 声明同时赋值:var myArray = new Array(“aaa”,“bbb”, …)

注意:若在数组中指定数值或逻辑值,变量类型为数组类型或布尔类型,而不是字符变量。

☆访问数组:通过 数组名和索引号 访问特定元素:myArray[ 1 ]

☆Array对象方法:join( [分割符] ):数组元素 组合为字符串。

toString():以字符串表示数组。

reverse():数组反转。

valueOf():返回数组值。

☆二维数组:元素为数组。

 

4、Boolean (逻辑)对象:用于将非逻辑值转换为逻辑值。

☆逻辑对象 无初始值或值为0  -0  null  “” false  undefined  NaN时为false,否则为true。

 

5、Math(算数)对象:用于常见算数任务。

☆数学对象方法:

 

ceil(数值):返回>=数值的 最小整数。

floor():返回小于或等于指定表达式的最大整数。

Math.pow(数值1,数值2):数值1的数值2次方。

Math.round():返回四舍五入值。

Math.random():返回0~1间的随机数。

Math.max( 5,9 ):返回两值中较大的一个。min()返回较小一个。

 

6、RegExp对象:检索某文本时,描述要检索的内容 的模式。用于存储检索模式。

☆text()检索字符串中的指定值,返回true/false。

esec()检索字符串中的指定值 并返回该值或null。

 

7、使用JavaScript可以访问并处理所有HTML DOM对象:

☆HTMl DOM定义了访问和操作HTml文档的标准方法。它把HTML文档呈现为带有元素、属性和文本的树结构,每个对象都是父类的属性。

 

 

 

 

 

 

 

 

 

 

☆浏览器对象:

①窗口对象:

name:窗口名称。

opener:open()方法打开的窗口的源窗口。对顶层的window对象有用,对框架window对象无用。

closed:返回布尔值 判断窗口是否已关闭。

defaultStatus:返回或设置窗口状态栏 默认文本。(状态栏默认信息)

status:表窗口状态栏的信息。擦除此消息 则显示defaultStetus值。(状态栏临时信息)

self:表当前窗口。返回窗口自身引用。

top:返回顶层的父窗口。

parent:当前窗口 或 框架的框架组。

frames:当前窗口的所有frame对象的数组。

length:框架的个数。

titlebar:标题栏。

toolbar:工具栏。

menubar:菜单栏。

locationbar:地址栏。

scrollbars:滚动条。

statusbar:状态栏。

 

②屏幕对象:

screen:描述屏幕的显示及颜色属性。

属性:colorDepth:颜色深度。

avilHeight:屏幕区域的 可用高度。

availWidth:屏幕区域的 可用宽度。

height:    屏幕区域的 实际高度。

width:     屏幕区域的 实际宽度。

 

③事件对象:

event:当事件发生时,浏览器自动建立event对象 包含事件的类型、鼠标坐标等。

属性:data:返回拖拽对象(dragDrop)的URL字符串。

type:事件类型。

target:该事件被传送到的对象。

which:

height:该窗口或框架高度。

width:该窗口或框架宽度。

pageX:光标 相对于该网页的 水平位置。

pageY:光标 相对于该网页的 垂直位置。

screenX:光标 相对于该屏幕的 水平位置。

screenY:光标 相对于该屏幕的 垂直位置。

layerX / X:光标 相对于事件发生层的 水平位置。

layerY / Y:光标 相对于事件发生层的 垂直位置。

 

④历史对象:

history:储存客户端最近访问的 网址清单。

属性:current:当前历史记录的 网址。

length:记录清单中储存的 网址数目。

previous:上一个历史记录的网址。

next:下一个历史记录的网址。

方法:back():回到上一个历史记录的网址。

forward():回到下一个历史记录的网址。

go(整数/URL):前往历史记录中的网址。 history.go(-1)

 

⑤位置对象:

location:包含当前窗口或框架的URL信息。(URL格式:protocol//host:port/path#hash?search)

属性:

protocol:  设置/返回  当前  URL协议。

host:      设置/返回  主机名。

port:      设置/返回  端口号。

hostname:设置/返回  主机名:端口。

href:      设置/返回  完整的URL。

pathname:设置/返回  路径。

hash:      设置/返回  锚点名称 (从#开始的URL)。

search:    设置/返回  查询信息 (从?开始的URL)。

方法:

reload():   重新加载。

replace(网址):取代当前网页。

 

⑥浏览器对象:

navigator(领航员):包含浏览器的信息。包含两个子对象:外挂对象、MIME类型对象。

☆navigator对象属性:

appName:返回浏览器的 名称。

browserLanguage:返回浏览器的 语言。

appCodeName:返回浏览器的 代码名。

appMinorVersion:返回浏览器的 次级版本。

appVersion:返回浏览器的 平台和版本信息。

userAgent:读取user-agent头部值。

cookieEnable:返回布尔值—浏览器是否启用cookie。

onLine:返回布尔值—系统是否处于脱机模式。

platform:返回浏览器的 操作系统平台。

cpuClass:返回浏览器的 CPU等级。

userLanguage:返回OS的自然语言设置。

srstemLanguage:返回OS使用的默认语言。

☆navigator对象方法:

javaEnable:返回布尔值—浏览器是否启用java。

taintEnable():返回布尔值—浏览器是否启动数据污点。

plugin对象属性:description:外挂程序模块的描述。

filename:  ~的文件名。

length:    ~的个数。

name:     ~的名称。

mimeType对象属性:description:MIME类型的描述。

enablePlugin:对应带哪个外挂模块。

length:   ~的数目。

suffixes:  ~的扩展名。

type:     ~的名称。

 

⑦文件对象:

document:表当前HTML对象,由<body>标签组 构成。每个HTML文件自动创建一个文件对象。

属性:

bady:用于访问<body>元素。对于框架集文档,bady属性访问最外层的<frameset>。

title:文档标题。

URL:当前文档URL。

domain:当前文档域名。

referrer:载入当前文档的文档URL。

width:文件 宽度(px)。

linkColor:超链接 颜色。

alinkColor:激活的 超链接 颜色。

vlinkColor:已访问 超链接 颜色。

fgColor:前景颜色。

bgColor:背景颜色。

cookie:设置/返回 文档所有cookie。

lastModified:返回文档最后修改日期和时间。

links:以数组索引值 表示所有链接。

anchors:  ~锚点。

forms:    ~表单。

images:   ~图像。

layers:    ~layer。

applets:  ~applet。

plugins:  ~插件程序。

tags:指出HTML标签的样式。

classes:文件中的class属性。

embeds:文件中的plug-in。

方法:

open([mimeType,[replace]]):打开字符流。

close():关闭输出字符流,强制显示数据内容。

weite(字符串):写入 字符串/数值 到文档中。

writeln(字符串):分行写入 字符串/数值 到文档中。(<pre>…</pre>)

getSelection():获取 当前所选的 字符串。

captureEvents(事件):设置 要获取的 事件。

routeEvent(事件类型):释放 已获取事件。

releaseEvent(事件类型):传送 已捕捉事件。

handleEvent(事件):使 事件处理器 生效。

文件对象的事件处理程序:

onClick  onDBClick  onKeyDown  onKeyPress  onKeyUp  onMouseDown  onMouseOver

 

e.g:document. write( “载入当前文档的文档URL:”+document. referrer )

image对象:网页中的图像均为图像对象,顺序为document.image[0]…

image对象属性:border  src  lowsrc  height  width  complete  hspace  vspace

image对象事件:onAbort  onError  onKeyDown  onKeyPress  onKeyUp  onLoad

 

注意:

open():打开新文档 并擦除当前文档内容。

open(“text/html”,replace):打开新文档覆盖(清除)当前文档,并无法用回退返回。

  注意:open()打开新文档,并用write()设置文档内容后,必须用close()关闭文档并迫使其内容显示出来。

open("","","menubar")       open("","","menubar=1")       open("","","menubar=yes")

close():关闭有document.open()打开的输出流,并显示选定数据。

  注意:调用close()后不应再调用write(),不然会隐式地调用open()来擦除当前文档并开始一个新文档。

 

write():向文档 写HTML表达式/JavaScript代码。

writeln():等同于write()方法,但没个表达式后写一个换行符。

 

getElementById():返回指定ID的对象引用。(元素id唯一)

getElementByName():当回指定名称的对象集合。(因元素name属性不唯一,故返回的是元素的数组)

getElementByTagName():返回指定标签名的如何类型的对象的集合。顺序为他们在文档的顺序。

e.g:getElementByTagName(“*”)返回所有元素的列表。

 

 

⑧锚点对象:

anchor:文档中锚点均为锚点对象,顺序为document.anchors[0]…

属性:

name: 锚点名称。

text:锚点字符串。

 

 

⑨表单对象:

forms:文件对象的子对象。javascript的runtime engine自动为每个表单 建立一个表单对象。

格式:

document.forms[索引].属性

document.formName.属性

属性:

name:表单名。

action:表单动作。

method:方法。

target:目标。

length:表单元素个数。

elements:以索引 表示所有表单元素。

encording:MIME的类型。

方法:

reset():重置。

submit():提交。

handleEvent(事件):使事件处理程序 生效。

表单对象的子对象:文本、密码、按钮、复选框、选择、隐藏对象、文件上传

格式:document . forms[索引] . elements[索引] . 属性

      document . formName . elementName . 属性

属性:defaultValue  form  name  type  value

方法:blur()  focus()  select()  handleEvent()

事件处理程序:onBlur onChange onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp 
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onSelect

 

⑩cookie对象:一种以文件(cookie文件)形式保存的用户数据信息。由Web站点建立。

cookie文件格式:

NS:cookie.txt

IE:用户名@域名.txt

写入cookie格式:

document.cookie = “关键字 = 值;[ expies = 有效日期 ];[…]”

注释:

   每个Web站点(domain)可建立20个cookie数据。

   每个浏览器咳存储300个cookie数据,4k字节。

   用户可禁止cookie数据的写入。

 

 

Window对象的方法:

alert():显示一个制定消息 和确认按钮的 警告框。

confirm():显示一个制定消息 和确认/取消按钮的 确认框。

prompt():显示一个文本框 和确认/取消按钮的 提示框。

 

createPopup():创建一个pop-up窗口。 window.createPopup()

 

focus():将窗口放到其他窗口 前面。

blur():将窗口放到其他窗口后面。

 

moveTo( X,Y ):将窗口移到指定坐标。(绝对定位)

moveBy( 水平点数,垂直点数 ):将窗口移到指定坐标。(相对定位)

 

scroll( X,Y ):将窗口滚动到指定坐标。(绝对滚动)

scrollTo( X,Y ):(绝对滚动)

scrollBy( 水平点数,垂直点数 ):(相对滚动)

 

定时器 setInterval():按指定间隔(毫秒) 调用函数或计算表达式。var num = self.setinterval(“clock()”,50)

clearInterval():取消setInterval()设置的timeout。 <input onclick=”window.clearInterval(num)”…

注意:setTimeout()只执行一次,用循环函数后 实际的循环执行间隔 为函数执行时间加指定的间隔时间。

      setInterva()会按指定间隔重复执行,整个循环执行间隔 及指点的间隔时间。

setResizable(true/false):表是否允许调整窗口大小。

 

 

原文地址:https://www.cnblogs.com/slowsoul/p/2790784.html