下载文档原格式
JavaScript学习笔记（三）：JavaScript也有⼊⼝Main函数在C和Java中，都有⼀个程序的⼊⼝函数或⽅法，即main函数或main⽅法。
⽽在JavaScript中，程序是从JS源⽂件的头部开始运⾏的。
但是某种意义上，我们仍然可以虚构出⼀个main函数来作为程序的起点，这样⼀来不仅可以跟其他语⾔统⼀了，⽽且说不定你会对JS有更深的理解。
1. 实际的⼊⼝当把⼀个JavaScript⽂件交给JS引擎执⾏时，JS引擎就是从上到下逐条执⾏每条语句的，直到执⾏完所有代码。
2. 作⽤域链、全局作⽤域和全局对象我们知道，JS中的每个函数在执⾏时都会产⽣⼀个新的作⽤域。
具体来说，在执⾏流程进⼊函数时会建⽴⼀个新的作⽤域，在函数执⾏完成退出时会销毁这个作⽤域。
函数的形参、局部变量都会绑定到这个作⽤域⾥，当函数调⽤完成作⽤域销毁时，它们随之被销毁。
当然在特殊情况下，如果函数返回时作⽤域中的某些变量仍然被引⽤，那么作⽤域以及这些被引⽤的变量就不会被销毁，从⽽形成所谓的闭包。
另⼀⽅⾯，我们知道函数是可以嵌套的，因⽽作⽤域也是可以嵌套的。
函数在定义的时候，JS引擎会给每个函数设置⼀个称为[[scope]]内置属性，它指向外部函数的词法作⽤域。
通过这种⽅式，多个作⽤域形成了链式结构，称为作⽤域链。
通常情况下，在任意时刻只存在⼀条作⽤域链，即从正在执⾏的函数的作⽤域开始，层层上溯，直到最外层的全局作⽤域。
[注]：作⽤域链上的函数就是JS源码⾥的层层嵌套的函数，跟函数执⾏时的顺序或函数调⽤栈⽆关，这也是词法作⽤域这个称呼的由来。
全局作⽤域是⼀个特殊的作⽤域，它不是⼀个函数作⽤域，但它是所有函数作⽤域的外层作⽤域，也是所有作⽤域链的终点。
因此只要程序没有退出，全局作⽤域总是存在的，全局作⽤域内的变量也是⼀直有效的。
[函数3的作⽤域]-->[函数2的作⽤域]-->[函数3的作⽤域]-->[全局作⽤域]另外，对应于全局作⽤域，还有⼀个全局对象。
pdfjs3的使用方法pdfjs3是一个用于在网页上加载和渲染PDF文件的JavaScript库。
以下是使用pdfjs3的基本步骤：1. 引入pdfjs3库文件：```html<script src="pdf.js"></script>```2. 创建一个用于显示PDF的容器：```html<div id="pdfContainer"></div>```3. 编写JavaScript代码加载和渲染PDF文件：```javascript// 获取PDF文件的URLvar pdfUrl = 'path/to/pdf/file.pdf';// 获取容器元素var container = document.getElementById('pdfContainer');// 使用pdfjs3库加载和渲染PDF文件PDFJS.getDocument(pdfUrl).then(function(pdf) {// 获取PDF的第一页pdf.getPage(1).then(function(page) {// 创建一个canvas元素用于渲染PDF内容var canvas = document.createElement('canvas');var context = canvas.getContext('2d');// 设置canvas大小以适应PDF页面大小var viewport = page.getViewport(1.0);canvas.width = viewport.width;canvas.height = viewport.height;// 渲染PDF内容到canvaspage.render({canvasContext: context,viewport: viewport});// 将canvas添加到容器中显示PDF内容container.appendChild(canvas);});});```注意：上述代码只是pdfjs3的基础用法示例，还有更多高级功能和配置可以在官方文档中找到。
JavaScript中常⽤的3种弹出提⽰框（alert、confirm、prompt）⽬录alert ()confirm()prompt ()总结三种提⽰框alert ()confirm()prompt ()alert ()alert()⽅法是显⽰⼀条弹出提⽰消息和确认按钮的警告框。
需要注意的是：alert()是⼀个阻塞的函数，如果我们不点确认按钮，后⾯的内容就不会加载出来。
使⽤⽅式：alert("想要提⽰的⽂本内容")样例代码：<!DOCTYPE html><html><head><meta charset="utf-8"><script>alert("这是弹出框提⽰⽂本")</script><title></title></head><body><p>alert是阻塞的函数</p><p>这句话只有在确认弹出框的提⽰⽂本后才会显⽰</p></body></html>效果截图：confirm()confirm()⽅法是显⽰⼀个含有指定消息和确认和取消按钮的确认框。
如果点击"确定"返回true，否则返回false。
使⽤⽅式：不接收返回值：confirm("这样写可以直接显⽰,不接收返回值。
")接收返回值：var x;var r=confirm("请按下按钮!");if (r==true){x="你按下的是\"确定\"按钮。
";}else{x="你按下的是\"取消\"按钮。
";}document.write(x)样例代码：<!DOCTYPE html><html><head><meta charset="utf-8"><script>// 使⽤⽅式⼀confirm("这样写可以直接显⽰,不接收返回值。
Web前端开发技术(Web客户端编程)学分：3.5 学时：56 (28时理论/28时上机)一、课程的性质、地位与任务《Web前端开发技术》（又名“Web客户端编程”）课程是计算机科学与技术、信息管理与信息系统、软件工程、网络工程、数字媒体、物联网工程等专业的一门专业课程，也是其他计算机相关专业的普及型课程，通过对Web前端三大主流开发技术学习和研究，让学生理解和掌握HTML5、CSS3、JavaScript等脚本语言的相关知识，通过项目实践培养学生开发和设计Web站点的基本操作技能和工作岗位适应能力。
二、课程的教学目标与基本要求本课程教学基本要求是让学生理解Web前端开发与设计的基本原则、Web网站的目录结构定义、主流页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识。
掌握网站规划、设计、制作、管理、发布的相关技术及Web前端设计的操作技能；并熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体、框架标记及属性设计出框架网页、表格与表单网页、多媒体动态网页；掌握使用DIV+CSS结合技术进行网页布局的基本方法。
掌握JavaScript脚本语言的基本语法知识，HTML中JavaScript程序的嵌入方法，理解对象的概念及使用JavaScript来进行开发、维护、管理和设置Web应用程序；掌握综合网站设计和发布的基本流程和方法。
本课程的教学目标是让学生理解HTML5、CSS3、JavaScript三大脚本语言的基本语法，掌握常用的Web页面布局技术，理解并熟练应用JavaScript常用的对象的属性与方法，熟练地使用DOM 技术编写页面交互的客户端程序，通过项目实训，培养学生Web页面布局和页面交互设计初步能力。
三、课程内容（重点△，难点★）1 Web前端开发技术综述1.1 Web概述1.1.1 了解Web起源1.1.2 理解Web特点1.1.3理解Web工作原理1.1.4 掌握Web相关概念，掌握URL构成、Web服务器、超链接基本概念。
javascript 入门(3)getElementByName, getElementById等用法getElementByName不存在只有getElement__S__ByName 和 getElementByIdbyId的时候，会根据html元素的id属性，根据规范id应当是唯一的，用来标示一个element，比如<td>, <div> ......。
所以返回唯一元素句柄或者null。
对于表单控件<input><select><textarea>等，在不指定id的时候，name也会被视作id，比如<input type="text" name="abc" value="123">也可以用document.getElementByIdx("abc")来获取而byName，从名字上看，就可以知道，它返回的是复数个对象。
它根据name属性（name 可以重复），得到所有name属性与参数相同的控件组成的数组，不存在时，返回0长度数组(.length == 0,而不是null)比如<input type="text" name="abc" value="1"><input type="text" name="abc" value="2"><input type="text" name="abc" value="3">var array = document.getElementsByName("abc");if (array.length == 0) {alert("Error");return;}for (var i = 0; i < array.length; i++) {alert(array[i].value);}当页面上的控件同名且多个的时候,你首先做的是什么?判断长度?的确,从程序的严密角度出发,我们是需要判断长度,而且有长度和没长度是两种引用方法.我们来看:oEle= document.all.aaa ;//这里有一个aaa的对象,但我们不知道它现在长度是多少,所以没办法对它操作.因此,我们要先做判断长度的过程.如下:if(oEle.length){}else{};在两种情况下,花括号里面的内容写法也是不一样的:if(oEle.length){for(var i = 0 ;i<oEle.length;i++){oEle[i].value........}}else{oEle.value........};但是这样写是不是太复杂了点?而且当花括号里面的代码比较多的时候,我们要写两遍代码,晕了先~还好有document.getElementsByName()这个方法.它对一个和多个的处理是一样的,我们可以用:oEle = document.getElementsByName('aaa')来引用当oEle只有1个的时候,那么就是oEle[0],有多个的时候,用下标法oEle[i]循环获取,是不是很简单?值得一提的是它对Name和ID的同样有效的.但是它只能应用到document对象.相对应的,还有另一个方法,可以应用的对象会更广一点: getElementsByTagName,比如我知道了一个<DIVID='aaa'><input/><input/>......</DIV>我要取DIV里面的所有input,这样写就可以了:aaa.getElementsByTagName_r('INPUT'),这样就有效的可以和别的DIV(比如说有个叫bbb的DIV,里面的也是一样的input)相区别. 同getElementsByTagName相对应,还有一个document.body.all.tags(),能用这个方法的对象比getElementsByTagName要小得多.但比getElementsByName要多.到这里我们还要提一下getElementById,它也是只有document对象才能使用,而且返回的是数组的第一个元素,呵呵,它的方法名都写明了是getElement而不是getElements,所以,千万不要搞浑了.。
动态加载JavaScript⽂件的3种⽅式以下是遇到的⼏种动态加载JavaScript⽂件的⽅式，持续更新中。
⼀、使⽤document.write/writeln(）⽅式该种⽅式可以实现js⽂件的动态加载，原理就是在重写⽂档流，这种⽅式会导致整个页⾯重绘。
实现⽅式:复制代码代码如下:document.writeln("<script src=\"/js/jquery/1.6/jquery.min.js\"></script>");需要注意的是特殊字符的转义。
⼆、使⽤jQuery使⽤getScript(url,callback)⽅法实现动态加载js⽂件$.getScript('test.js',function(){alert('done');});三、使⽤原⽣js⽅法原理：动态创建script标签，并指定script的src属性function loadJs(url,callback){var script=document.createElement('script');script.type="text/javascript";if(typeof(callback)!="undefined"){if(script.readyState){script.onreadystatechange=function(){if(script.readyState == "loaded" || script.readyState == "complete"){script.onreadystatechange=null;callback();}}}else{script.onload=function(){callback();}}}script.src=url;document.body.appendChild(script);}loadJs("test.js",function(){alert('done');});还可以使⽤同样的原理动态加载css⽂件，只不过插⼊的的⽗节点是head标签。
