javascript学习笔记

1、什么是javascript1.1历史最初了产生于Netscape公司，有个浏览器产品叫navigator。当时由于网速很慢，采用拨号上网，这种拨号上网理论网速最大值只有56kb/s.当时为了提高网页的响应速度，迫切需要把一些能在客户端做的事情从服务器转移到客户端来进行。这样有些功能直接在客户端浏览器中运行，不用网络传输，这样速度明显提高了。当时Netscape公司开发的这种语言叫livescript，后来Netscape公司和当时的sun公司合作并重新命名这种语言为JavaScript(销售策略，让语言看起来跟java有关一样)。由于JavaScript的优势，微软公司在它的IE中也提高类似功能语言，叫Jscript。这样我话，就出现了分歧。对程序员来说带来了很大困难：1.1.1学习内容变多实现同样的功能要学习两套API1.1.2编写一个跨浏览器的应用是一个很大的挑战为了程序的可移植性，有个组织出面在JavaScript和Jscript基础之上，提供一个标准，该标准称为EmcaScript，这样浏览器厂商都根据该标准提供对应的实现，作为程序员只需要学会该标准就可以开发出能在各个浏览器上运行的程序。虽然该标准出现，但是还存在微小的差异，程序员仍然要考虑浏览器兼容性问题。1.2官方定义ECMAScript是面向对象的编程语言，被用来演示计算技术和操控宿主环境下的计算机对象。这里定义的ECMAScript没有被设计成计算性自足的语言；事实上，在这篇规范中，没有为输入外部数据或输出计算结果给出任何条款。取而代之的是，我们期望ECMAScript程序的计算机环境可提供除了这篇规范中所描述的对象和其它语言设施之外的、某些特定环境下的宿主(host)对象，它们的描述和行为将超出此规范的所指出的范围，即它们可提供某些可被访问的属性和某些可从ECMAScript脚本语言(scriptlanguage)是一类被用于操控、自定义和自动控制现有系统设施的编程语言。在这些系统中，实用的功能可通过一个用户界面来使用，脚本语言就是一种通过程序控制那些功能的机制。于是，我们就说此系统为对象和设施提供了一个宿主环境，它们使得脚本语言的能力变得完备。脚本语言是为了能被专业或非专业程序员所使用而设计的。为了适应非专业程序员，语言的一些方面会多少有些不严格。ECMAScript从一开始就被设计成一种网页脚本语言(Webscriptinglanguage)作为基于网页的、客户端—服务器端(C/S)构架的建筑师，它能提供一种机制，用来使浏览器中的网站页面更加活跃，并展示服务器端的处理情况。ECMAScript能够为各种主机环境，以及这个文档所描述的核心脚本编程语言之外任何特定的主机环境，提供基本的脚本编程能力。2、JavaScript能做什么？？2.1简单计算—数学运算和字符串操作2.2能修改我们的html文档--以编程方式操作浏览器功能inputtype=buttononclick=window.location.href='=转到3、不能做什么？？1、不能访问本地文件系统，也没有java那么强大的功能。2、有限的联网能力4、JavaScript嵌入html中的方式4.1第一种作为属性值：4.1.1放置在以on开头的属性中inputtype=buttonvalue=单击我onclick=window.alert('sb')onxxx:当xxx事情发生时，那么写在该属性里面的JavaScript代码就会被执行。4.1.2放置a元素超级链接中ahref=javascript:window.alert('sb')执行JavaScript代码的超级链接/a4.2放置script元素中scripttype=text/javascriptfunctionsayHi(msg){window.alert(msg);}/script/headbodyinputtype=buttonvalue=单击我onclick=sayHi('sb')brinputtype=buttonvalue=单击我2onclick=sayHi('sbsb')4.3js代码放置到外部文件中在使用时导入test.js:/****/functionsayHi(msg){window.alert(msg);}html代码：scripttype=text/javascriptsrc=js/test.js/script/headbodyinputtype=buttonvalue=单击我onclick=sayHi('sb')brinputtype=buttonvalue=单击我2onclick=sayHi('sbsb')4.4使用时的一个常见错误scripttype=text/javascriptsrc=js/test.jsfunctionsayHi1(msg){window.alert(msg);}/script/headbodyinputtype=buttonvalue=单击我onclick=sayHi('sb')brinputtype=buttonvalue=单击我2onclick=sayHi1('sbsb')在运行时单击第二个按钮时会出现如下错误：4.5问题解决scripttype=text/javascriptsrc=js/test.js/scriptscripttype=text/javascriptfunctionsayHi1(msg){window.alert(msg);}/script/headbodyinputtype=buttonvalue=单击我onclick=sayHi('sb')brinputtype=buttonvalue=单击我2onclick=sayHi1('sbsb')5、浏览器窗口是什么？？？5.0浏览器窗口5.1浏览器窗口对应的对象-window我们可以通过window变量直接引用该浏览器窗口：window的属性：location对应窗口的地址栏history对应历史记录navigator属性对应浏览器描述：5.2浏览器窗口的地址栏locationinputtype=buttononclick=window.location.href='=转到brinputtype=buttononclick=window.location.reload()value=刷新5.3历史记录historyinputtype=buttononclick=window.history.back()value=后退brinputtype=buttononclick=window.history.forward()value=前进brinputtype=buttononclick=window.history.go(3)value=前进3br5.4浏览器信息-navigatorscripttype=text/javascriptfunctionprintNav(){vartxt=pBrowserCodeName:+navigator.appCodeName+/p;txt+=pBrowserName:+navigator.appName+/p;txt+=pBrowserVersion:+navigator.appVersion+/p;txt+=pCookiesEnabled:+navigator.cookieEnabled+/p;txt+=pPlatform:+navigator.platform+/p;txt+=pUser-agentheader:+navigator.userAgent+/p;txt+=pUser-agentlanguage:+navigator.systemLanguage+/p;alert(txt);}/script/headbodyinputtype=buttononclick=printNav()value=后退5.5document对象5.5.0预备知识5.5.0.1现象分析在前面我们访问浏览器中的对象时，我们发现我们的代码可以在各个浏览器运行，这说明各个浏览器中给我们提供的javascript对象属性和方法具有通用性，也即这些对象具有的属性和方法是经过标准化的。我们前面已经学习到：EmcaScript这个语言标准定义的内容是跟环境无关的，而我们现在javascript是工作在web环境，我们需要有新的标准来定义客户端需要使用的其它对象。浏览器给我们提供的标准对象集合分为：1、最初阶段的事实的上的标准（DOM0）和官方标准(W3C组织制定的DOM1和DOM2)5.5.0.2DOM0虽然不是经过标准化组织定义，但是主流浏览器都支持。DOM0也称为BOM（BrowserObjectmodel）BOM模型提供了我们如何操作浏览器的各个部分。5.5.0.3DOM我们前面也讲过，javascript是面向对象的，为了能通过javascript操作html元素，浏览器在解析html时候，会对每个html元素生成一个与之对应的javascript对象。这也就是文档（文本）对象（javascript对象）模型概念来历。html文档中元素和元素之间有包含关系，如下图，左边的元素以及元素之间的关系可以用右边的图形表示出来----我们称为文档的逻辑结构。其实还有另外一种格式XML（下表中）也具有跟html相似的结构，我们操作XML也采用这种模型(xml文档和对象(各种语言中的对象))，因而我们目前说的DOM不仅仅指的是处理html，也包括处理XML。notetoGeorge/tofromJohn/fromheadingReminder/headingbodyDon'tforgetthemeeting!/body/noteDOM本质上就是一个编程接口（定义了一系列对象，对象的属性和方法）正因为有标准存在，全世界的javascript开发者，浏览器厂商之间才能合作起来：我们编写的javascript程序可以运行在多个浏览器上DOM标准提供了如何操作文档的标准5.5.0.4DOM15.5.0.5DOM2对DOM1功能进一步增强，这个时间把关于核心功能和html功能分离开。5.5.1元素查找!DOCTYPEhtmlhtmlheadmetacharset=UTF-8title元素的访问/title/headbodyformaction=name=regfrmid=frm1inputname=unamevalue=z3id=uidbrinputtype=checkboxname=hobbyvalue=ps爬山inputtype=checkboxname=hobbyvalue=zn抓鸟/formscripttype=text/javascript//bom//window.document.forms----HTMLCollectionconsole.log(window.document.forms[0].elements[0].value);console.log(window.document.forms.item(0).elements[0].value);console.log(window.document.forms.namedItem(frm1).elements[0].value);console.log(window.document.forms.namedItem(regf