JS(进阶)慕课学习笔记(1)
- 格式:doc
- 大小:2.33 MB
- 文档页数:123
Java Script 学习笔记SkylerCong制作目录一、Javascript初识 (2)1.Javascript的基本概念 (2)2.Javascript中函数的使用 (3)3.Javascript中的对象 (4)4.JavaScript中的行为 (5)二、Javascript中的时间对象 (6)1.时间对象的方法(从0开始) (6)2.时间对象的实际应用 (6)三、Javascript中的文字对象 (7)1.文字对象的属性和方法 (7)2.文字对象的实际应用 (8)四、Javascript中的图片应用 (9)1.图像对象的属性 (9)2.图像对象的实际应用 (9)五、Javascript在表单中的应用 (10)1.表单总揽 (10)2.表单的实际应用 (11)六、Javascript中窗口对象的应用 (12)1.窗口对象的方法 (12)2.窗口对象的实际应用 (12)七、Javascript中其他对象的应用 (14)1.浏览器信息的获取navigator (14)2.网页信息的获取 (14)3.首页和收藏夹的设置 (14)4.浏览器状态栏的信息显示 (14)5.随机显示文字 (14)6.Javascript脚本 (15)一、Javascript初识1.Javascript的基本概念i.javascript语言是网页中广泛使用的一种脚本语言。
ii.Javascript语言的特点:1.由Netscape公司开发,基于对象和事件驱动并具有一定安全性的脚本语言。
2.特点:a)Javascript是一种脚本语言,同时也是一种解释性语言;b)Javascript是靠浏览器中的javascript解释器来运行的,与操作环境没有关系;c)在javascript中,采用的是不太严格的数据类型,这样的俄好处是在定义或使用数据的时候可以更加方便,但也带来了容易混淆的问题;d)Javascript是一种基于对象的语言,这样就可以自己创建对象,并运用自己所创建的对象中的属性和方法制作出许多功能来;e)Javascript的主要作用是让网页动起来,同时也存在这一定的交互;f)Javascript具有安全性,不允许用户访问本地硬盘,不允许对网络中的文档进行修改或删除,这样就能有效地防止数据丢失以及恶意修改。
1.实践,实践还是实践实践出来的东西是,是从自己骨子里生长出来的东西。
学习犹如散种子,在实践中种子才会发芽、生长、成熟和消亡。
没有发芽的种子还会像蒲公英一样,飘呀飘呀随念飘走,学习就成了一种消磨时间和锻炼思维的方式。
1.1.点滴心得1.1.1.js语言的构成结构基础:词法结构,首先是该语言的字符集,UTF-8,随后是其他的词法规则,包括:大小写敏感,对空格、换行和制表符的处理,对分号的定义(即语句结束规则),注释规则,直接量规则(所谓的直接量,即对内存单元中数据进行读取,而不用通过地址二次引用进行读取,和指针相对),标识符,,关键字。
数据类型和值。
【数据结构,相互之间有联系的元素的集合,数据之间的联系,我们称为逻辑结构。
练联系即结构。
数据类型,一个值的集合,和定义在该值集上的一组操作的统称。
抽象数据模型(Abstract Data Type),是指一个数据模型和定义在该模型上的一组操作。
ADT的形式化是三元组,ADT=(D,S,P)其中,D是数据对象,S是D 上关系的集合,P是对D的基本操作集。
】变量(有了类型,自然就有了变量)。
表达式和运算符(有类型,就有了该类型允许的运算,运算用运算符表示,运算符和变量的集合就是表达式)。
表达式是不能执行的,只有语句才能执行,语句是有动态行为的(function语句除外)。
语句包括:表达式语句,复合语句(语句块),var语句,function语句,if语句,循环语句,return语句,throw语句,trycath语句,空语句,标签语句,with语句,break语句,continue语句。
【function语句的作用是定义函数,而不是执行,因此没有动态行为,发生在函数被解析或者被编译时。
函数的定义和函数的运行并不在同一时刻。
】1.1.2.new对象new 为变量操作符分配一块内存,因此对象类型是引用类型,对象的类型是Object。
Object类型允许的操作是获取属性,通过“.”操作符,允许对变量执行操作,执行的具体操作依据变量类型决定。
js学习笔记范文关于js学习笔记1.document.write("");输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document)5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value)6.一个小写转大写的JS:document.getElementById("output").value=document.getElem entById("input").value.toUpperCase();7.JS中的值类型:String,Number,Boolean,Null,Object,Function8.JS中的字符型转换成数值型:parseInt(),parseFloat()9.JS中的数字转换成字符型:(""+变量)10.JS中的取字符串长度是:(length)11.JS中的字符与字符相连接使用+号.12.JS中的比拟操作符有:==等于,!=不等于,>,>=,<.<=13.JS中声明变量使用:var来进行声明14.JS中的判断语句结构:if(condition){}else{}15.JS中的循环结构:for([initialexpression];[condition];[upadteexpression]){ insideloop}16.循环中止的命令是:break17.JS中的函数定义:functionfunctionName([parameter],...){statement[s]}18.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替.19.窗口:翻开窗口window.open(),关闭一个窗口:window.close(),窗口本身:self20.状态栏的`设置:window.status="字符";21.弹出提示信息:window.alert("字符");22.弹出确认框:window.confirm();23.弹出输入提示框:window.prompt();24.指定当前显示链接的位置:window.location.href="URL"25.取出窗体中的所有表单的数量:document.forms.length26.关闭文档的输出流:document.close();27.字符串追加连接符:+=28.创立一个文档元素:document.createElement(),document.createTextNode()29.得到元素的方法:document.getElementById()30.设置表单中所有文本型的成员的值为空:varform=window.document.forms[0]for(vari=0;iif(form.elements.type=="text"){form.elements.value="";31.复选按钮在JS中判断是否选中:document.forms[0].checkThis.checked(checked属性代表为是否选中返回TRUE或FALSE)32.单项选择按钮组(单项选择按钮的名称必须相同):取单项选择按钮组的长度document.forms[0].groupName.length33.单项选择按钮组判断是否被选中也是用checked.34.下拉列表框的值:document.forms[0].selectName.options[n].value(n有时用下拉列表框名称加上.selectedIndex来确定被选中的值)35.字符串的定义:varmyString=newString("Thisislightsword");36.字符串转成大写:string.toUpperCase();字符串转成小写:string.toLowerCase();37.返回字符串2在字符串1中出现的位置:String1.indexOf("String2")!=-1那么说明没找到.38.取字符串中指定位置的一个字符:StringA.charAt(9);39.取出字符串中指定起点和终点的子字符串:stringA.substring(2,6);40.数学函数:Math.PI(返回圆周率),Math.SQRT2(返回开方),Math.max(value1,value2)返回两个数中的最在值,Math.pow(value1,10)返回value1的十次方,Math.round(value1)四舍五入函数,Math.floor(Math.random()*(n+1))返回随机数41.定义日期型变量:vartoday=newDate();42.日期函数列表:dateObj.getTime()得到时间,dateObj.getYear()得到年份,dateObj.getFullYear()得到四位的年份,dateObj.getMonth()得到月份,dateObj.getDate()得到日,dateObj.getDay()得到日期几,dateObj.getHours()得到小时,dateObj.getMinutes()得到分,dateObj.getSeconds()得到秒,dateObj.setTime(value)设置时间,dateObj.setYear(val)设置年,dateObj.setMonth(val)设置月,dateObj.setDate(val)设置日,dateObj.setDay(val)设置星期几,dateObj.setHours设置小时,dateObj.setMinutes(val)设置分,dateObj.setSeconds(val)设置秒[注意:此日期时间从0开始计]43.FRAME的表示方式:[window.]frames[n].ObjFuncVarName,frames["frameName"].Ob jFuncVarName,frameName.ObjFuncVarName44.parent代表父亲对象,top代表最顶端对象45.翻开子窗口的父窗口为:opener46.表示当前所属的位置:this47.当在超链接中调用JS函数时用:(javascript:)来开头后面加函数名48.在老的浏览器中不执行此JS:49.引用一个文件式的JS:50.指定在不支持脚本的浏览器显示的HTML:51.当超链和ONCLICK事件都有时,那么老版本的浏览器转向a.html,否那么转向b.html.例:dfsadf52.JS的内建对象有:Array,Boolean,Date,Error,EvalError,Function,Math,Number, Object,RangeError,ReferenceError,RegExp,String,SyntaxError, TypeError,URIError53.JS中的换行:n54.窗口全屏大小:functionfullScreen(){this.moveTo(0,0);this.outerWidth=scree n.availWidth;this.outerHeight=screen.availHeight;}window.ma ximize=fullScreen;55.JS中的all代表其下层的全部元素。
JavaScript巩固与加强一目录JavaScript巩固与加强一...................................................................................错误!未定义书签。
一、简介 (2)1)基于客户端浏览器 (2)2)面向(基于)对象 (2)3)事件驱动 (2)二、为什么要使用JavaScript (3)三、JavaScript应用场景 (3)四、快速入门 (3)五、js基本语法 (4)1、变量 (4)2、js中的数据类型 (5)3、js中的运算符 (5)4、流程结构 (5)1)顺序结构 (6)2)分支结构 (6)3)循环结构 (7)4)循环中的break与continue (7)5、js语法总结 (7)六、函数 (8)1、系统函数 (8)2、自定义函数 (8)七、函数的作用域 (12)1 、JS作用域 (12)八、script的执行过程 (17)1、Script代码段的执行流程 (17)2、不同类型的错误对当前代码段的影响 (18)3、Script执行原理图 (19)九、js数组 (20)1、什么是数组? (20)2、数组的定义 (20)3、数组的输出 (21)4、数组如何遍历 (21)5、for...in...遍历数组 . (21)6、二维数组 (22)7、如何进行二维数组遍历 (22)8、文本下标 (22)9、常用函数 (24)十、作业 (25)一、简介JavaScript 是网景(Netscape)公司开发的一种基于客户端浏览器、面向(基于)对象、事件驱动式的网页脚本语言。
1)基于客户端浏览器静态语言HTMLCSSJS动态语言ASP/PHP/.NET/JSP动态语言和静态语言有什么最根本的区别?答:判断一个语言是动态语言还是静态语言,主要是看其在哪里运行。
存在的缺点:不兼容性:不同的浏览器可能看到的效果是不同2)面向(基于)对象js本身是一种弱类型语言,本身是没有类class和对象这个概念,但是我可以通过js代码去模拟实现这个过程,所以我们说js也可以说是面向对象的。
课堂笔记第二天javascript课程目标:1.javascript概述2.javascript的基本语法3.javascript常用对象4.javascript常用全局函数主要内容:1.javascript简介2.javascript的使用方式*3.javascript基本语法*4.javascript常用对象*5.javascript全局函数*一、javascript简介js: 是一种基于对象和事件驱动的弱类型的脚本语言。
具有跨平台的特性(运行在浏览器中)。
正式名称:ECMAScript作用:为html添加行为javascript VS java1. js弱类型语言,java强类型2.js基于对象,java是OO3.js有浏览器解释执行,java需要编译后有JVM解释执行4. 在语法结构上二者非常相似javascript语言组成js=ECMAScript+DOM(Docuemnt Object Model文档对象模型)+BOM(Brower Object Model 浏览器对象模型)二、javascript的使用方式1. 内部js脚本(直接把js写在html文档中)语法:<script type=”text/javascript”>脚本;</script>2. 外部js文件(扩展名为js的文件)使用下面语法引入当前html文档中。
语法:首先定义外部样式文件,扩展名js然后如下:<script type="text/javascript" src="myjs.js">注意:这里不能再写js脚本</script>--------------------------------------------------------------------------------------------------三、javascript基本语法1. 标识符的命名规则1.1 标识符由字母、数字、下划线(_)和美元符($)组成。
javascript学习笔记ECMAScript 是javascript的规范规范起草了必须支持类型值对象属性和函数和程序语法和语意义对象具有松散和动态的命名属性(其实就是字典序列)对象的命名属性用于保存值,该值可以是指向另一个对象(Objects)的引用,也可以是一些基本的数据类型那么web浏览器就是ECMAScript 规范的实现(我们叫做宿主环境)p176/****************************************************************************/javascript的基础特性计算机程序是通过操作value 如123 hello来运行的程序语言把能够操作的值定义为数据类型数据类型有基本类型和复合类型(对象)对象是基本类型和复合类型的无序集合数组也是对象但是是有序集合javascript中定义了一个特殊的对象function 是可执行代码的对象注意:在别的程序语言中函数(java中叫方法)是语法的一部分但是在javascript中函数是个数据类型能够保存在变量中var name='cijun';function test(){alert(name);/* 你肯定会认为输出是 cijun 但是遗憾的告诉你是 undefinde当在函数体中定义某个变量一但定义不管的执行顺序这个变量始终在函数体中了其实这个是你可以把他看成 var name;*/var name='baobao';alert(name); //输出为baobao}test();</script>有效的检查参数的方法function chackArgs (args){//方法作用检查参数个数var fact=args.length;//实际传入的参数var expect=args.callee.length;//需要的参数个数if(fact!=expect){throw new Error("参数输入不符合规范");}/***案例*function test(x,y,z)*{*chackArgs(arguments);如果输入参数不符合直接抛出异常*return x+y+z;*}*/}让函数产生唯一的值(原理就是根据函数在执行前就可以使用)uniqueNumber.count=0;function uniqueNumber(){return uniqueNumber.count +1;}Javascritp中的类Javascript中的继承(类也有了那怎么完成继承呢)在论对象就是字典序列看下面的试验javascript中的异常处理机制Error对象就象java中的ThrowableJavascript的debugger调试器Firefox的javascript调试器https:///en-US/firefox/addon/216Dom节点查看器Web Developer for firefox https:///en-US/firefox/addon/60学习文档/DOM(Document Object Model)文档对象模型注意: 下面给出的对象属性事件方法集合等是该对象比较常用浏览器中window对象就是js的全局对象注意当你窗口对象打开了子窗口你又把主窗口关了但是你只要记住如果子窗口存在的对主窗口的引用虽然主窗口关闭了但是你仍然可以访问主窗口的数据其实他在内存中没销window对象常用的方法方法就是能够直接调用的函数window对象专用的事件关于事件就是对象在某种状态下就去会执行该对象的某个方法用狸猫换太子就可以触发你自己的函数在该事件上的行为了onload事件(注意该事件是转载完成页面的内容才执行的)onunload事件onbeforeunload事件浏览器在关闭前做的事情window对象属性引用的对象Window对象的2个重要属性(可以做购物车计价显示)方法属性document 对象的集合很重要Html元素的通用属性Id 给该元素在标记个唯一名称在该页面中Name 可以给js 访问在form中该属性是用来和服务器交换信息的ClassName 是给css 选择器访问的名称(可以配合js实现动态改变样式)InnerText 在html元素的标签对中嵌入文本格式(比如<div> innerText 的文本是嵌入在这里的如果出现了html标记那么抱歉标记也是以文本格式显示的</div>)InnerHtml 以html格式嵌入在标记对中OuterText 连同标记自己和标记中包含的内容返回如果设置就可以改变原来的标记OuterText 同上Offset 返回自己的边界坐标ClientTop 返回窗体编辑区和本对象之间顶点坐标的差Scrooll 是否显示滚动条方法属性事件方法事件方法属性方法集合属性总结下事件和html元素的对应onclick 点击元素时候触发大多数元素都支持该事件onmousedown 和onmouseup 和onclick区别在于不需要特定元素按下鼠标和释放鼠标就触发大多数元素都支持该事件onmouseover onmouseout 分别在鼠标移动或移出元素时候触发大多数元素都支持该事件<a>元素比较常使用onchange在用户改变了元素显示的值或者移出了元素的焦点时候触发<input><select><textarea>支持这个事件onsubmit onreset 表示提交个表单和重新设置表单的时候触发<form>使用注意:脚本执行顺序比如你要操作个form 但是你的脚步操作语句写在了这个form前面那么就会出现异常因为你操作的对象还没生成脚本的执行顺序和html文档的解释顺序是同时的Javascript技巧Css补充说明名词解释embed 插入354。
113.javaScript:它和标签语言都属于描述性的语言,用于和html结合从而强化网页数据的展现,虽然语法和结构上和java类似,但实际上它是和java完全不同的一门语言,它只是函数式的语言,其实从字面意思看,它就是java 的一种脚本语言,至于脚本语言是什么,以后再说。
javaScript在客户端做展现必须要有浏览器的支持。
*javaScript包含3部分语法:基础语法、DOM(Document Object Model)、BOM(Brower Object Model)。
114.javaScript的初步使用:其实和在html中引入css的做法类似,js的使用也分为内部使用和外部使用。
*js的内部使用,介绍已经说过了,js是和html结合用于更好的展现数据,原则上,js是可以写在html的任何标签体中的,但一般来说,js的函数定义是写在head标签体中,而函数调用是在body标签体中,也就是上面定义方法,下面调用方法的意思,直接看例子程序:1<html>2 <head>3 <title>My first JavaScript!</title>4 <script type=”text/javaScript”>5 alert(“Hello js!”);6 alert(“ok!);7 </script>8 </head>9 <body>第一个js</body>10</html>直接看4-7句,这里就使用了js,在head标签中插入一个script标签,script就是js的关键字代表,插入script标签标表明要在此处插入一段js语句,和插入css一样,都要指定type属性,这里是type=”text/javaScript”标明标签的类型是javaScript(因为javaScript只是脚本语言的一种,还可以声明type="text/jscript",type="text/vbcript"等等,所以这个type属性是指明你下面要使用哪种脚本语言,但是javaScript比较特殊,它是所有浏览器默认的脚本语言,所以你不写type属性时,默认的就是使用javaScript,当然,这是不好的习惯)。
<html> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html> ======================== 如果需要把一段 JavaScript 插入 HTML 页面, 我们需要使用 <script> 标签 (同 时使用 type 属性来定义脚本语言)。
这样,<script type="text/javascript"> 和 </script> 就可以告诉浏览器 JavaScript 从何处开始,到何处结束。
document.write 字段是标准的 JavaScript 命令,用来向页面写入输出。
当页面载入时,会执行位于 body 部分的 JavaScript。
当被调用时,位于 head 部分的 JavaScript 才会被执行。
===================================================<html> <head> <script type="text/javascript"> function message() { alert("该提示框是通过 onload 事件调用的。
") } </script> </head> <body onload="message()"> </body> </html> ================================================ 位于 head 部分的脚本: 当脚本被调用时,或者当事件被触发时,脚本就会被执行。
<title>自动选择文本框/编辑框中的文字</title><script type="text/javascript">function Myselect_txt(){if (document.form1.title.focus){document.form1.title.select();}}function Myselect_txtarea(){if (document.form1.content.focus){document.form1.content.select();}}</script>A href中target属性的用法target这个属性指定所链接的页面在浏览器窗口中的打开方式,它的参数值主要有:_blank、_parent、_self、_top,这些参数值代表的含义如下:_blank,在新浏览器窗口中打开链接文件。
_parent,将链接的文件载入含有该链接框架的父框架集或父窗口中。
如果含有该链接的框架不是嵌套的,则在浏览器全屏窗口中载入链接的文件,就象_self参数一样。
_self,在同一框架或窗口中打开所链接的文档。
此参数为默认值,通常不用指定。
_top,在当前的整个浏览器窗口中打开所链接的文档,因而会删除所有框架。
二级菜单的显示:创建Ajax对象:Ajax用于做异步操作在IE游览器下可以适用:达到兼容性:事件驱动:(1)单击事件onClick(2)改变事件onChange(3)提交事件onSubmit(4)选中事件onSelect(5)获取焦点事件onFocus(6)失去焦点onBlur(7)载入文件onload(8)卸载文件onUnload(9)按下键盘按键onKeydown(10)按下字面键onKeyPress(11)释放键盘按键onKeyUp(12)鼠标滑过onMouseMove(13)鼠标移除onMouseOut(14)鼠标移入onMouseOver(15)鼠标释放onMouseUp(16)按下鼠标onMousedown(17)鼠标双击onDblClickJavaScript 的极大对象是:window history location document form 等;其中window窗口对象时最大的对象因此引用它的属性和方法时,可以不必加入对象名window 例如:window.alert(l);和alert(l);效果一样;属于window把一个文本文件中的字符串数字给读取出来:文本文件中存储的是一个字符串数组:{1,2,3,4,5,6,7,8}解决缓存的方法:绑定事件:绑定事件的兼容性解决:以上存在兼容性的问题:解决兼容性的问题如下:解决冒泡的方法:随鼠标移动的div效果:Client与scrollTop的配合使用防止出错:Ctrl+enter 提交留言:延时提示框:解决图片的兼容问题对于隐藏事件的写法但是id的直接使用会引起兼容性问题Display有两个值none 和block none表示不显示block表示显示网页的换肤效果;用于显示信息Console .dir();Console.log()(1)鼠标移动到图片上,图片上下移动效果var A_Img=new Image();function move(image,num){image.src='Images/top/menu_0'+num+'_over.gif';}//此处的num为1时就是Images/top/menu_01_over.gif'这张图片,它仍然是一张图片让新的一张图片赋给了点击时的图片function out(image,num){image.src='Images/top/menu_0'+num+'.gif';}</script><td width="94" align="center"><img src="Images/top/menu_05.gif" name="image5" width="95" height="119" border="0" onMouseMove="move(this,'5')" onMouseout="out(this,'5')"></td>(2)打开网页显示广告信息窗口属性的参数(3)定时打开窗口(4)通过按钮创建窗口(5)自动关闭的广告窗口(6)弹出窗口居中(7)地图图片热点地图链接类型的链接<map name="Map"><area shape="rect" coords="164,8,246,26" href="#" onClick="window.close();"> <area shape="rect" coords="76,8,158,26" href="#" onClick="mycheck(myform)"> </map>(8)弹出的窗口之Cookie控制<Script Language="JavaScript">function openWindow(){window.open("placard.htm","","width=352,height=193")}function GetCookie(name){var search = name + "=";var returnvalue = "";var offset,end;if(document.cookie.length>0){offset = document.cookie.indexOf(search);if(offset != -1){offset += search.length;end = document.cookie.indexOf(";",offset);if(end == -1) end = document.cookie.length;returnvalue = unescape(document.cookie.substring(offset,end));}}return returnvalue;}function LoadPop(){if(GetCookie("pop")==""){openWindow();var today = new Date()var time="Sunday,1-jan-"+today.getYear()+1+" 23:59:59 GMC";document.cookie="pop=yes;expires="+time;}}</Script>(9)关闭弹出窗口时刷新父窗口点击一个按钮显示一个新的子网页<a href="#"onClick="Javascript:window.open('new.htm','','width=400,height=220')">会议记录</a>在子网页中用于关闭的按钮<input type="submit" name="Submit" value="关闭" onclick="Mycheck();"> <script language="javascript">function Mycheck(){alert("关闭子窗口!");window.opener.location.reload(); //刷新父窗口中的网页window.close();//关闭当前窗窗口}</script>(10)(11)全屏显示代码:弹窗显示代码:<script language="javascript">function opendialog(){varsomeValue=window.showModalDialog("new.htm","","dialogWidth=640px;dialogHeight=423px;s tatus=no;help=no;scrollbars=no")}</script>网页拾色器代码:<script language="javascript">function colorpick(field){var rtn = window.showModalDialog("color.htm","","dialogWidth:225px;dialogHeight:170px;status:no;help:no;scrolling=no;scrollbars=no");if(rtn!=null)field.style.background=rtn;return;}</script><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>网页拾色器</title></head><body><script language="JavaScript"><!--var h = new Array(6)h[0] = "FF";h[1] = "CC";h[2] = "99";h[3] = "66";h[4] = "33";h[5] = "00";function action(RGB) {//alert('您选择的颜色是:#'+RGB);parent.window.returnValue="#"+RGB;window.close();}function Mcell(R, G, B) {document.write('<td bgcolor="#' + R + G + B + '">');document.write('<a href="#" onClick="action(\'' + (R + G + B) + '\')">');document.write('<img border=0 height=12 width=12 \')" alt=\'#'+R+G+B+'\'>');document.write('</a>');document.write('</td>');}function Mtr(R, B) {document.write('<tr>');for (var i = 0; i < 6; ++i) {Mcell(R, h[i], B);}document.write('</tr>')}function Mtable(B) {document.write('<table cellpadding=0 cellspacing=0 border=0>');for (var i = 0; i < 6; ++i) {Mtr(h[i], B);}document.write('</table>');}function Mcube() {document.write('<table cellpadding=0 cellspacing=0 border=0><tr>'); // for (var i = 0; i < 6; ++i) {if(i%3==0){document.write('<tr>');}document.write('<td bgcolor="#FFFFFF">');Mtable(h[i])document.write('</td>');}if(i%3==0){document.write('</tr>');}document.write('</tr></table>');}Mcube()--></script></body>网页可见区域宽:document.body.clientWidth;网页可见区域高:document.body.clientHeight;网页可见区域宽:document.body.offsetWidth (包括边线的宽); 网页可见区域高:document.body.offsetHeight (包括边线的宽); 网页正文全文宽:document.body.scrollWidth;网页正文全文高:document.body.scrollHeight;网页被卷去的高:document.body.scrollTop;网页被卷去的左:document.body.scrollLeft;网页正文部分上:window.screenTop;网页正文部分左:window.screenLeft;屏幕分辨率的高:window.screen.height;屏幕分辨率的宽:window.screen.width;屏幕可用工作区高度:window.screen.availHeight; 屏幕可用工作区宽度:window.screen.availWidth;setInterval(function(),30)设置定时器;offsetInterval清除定时器Offsetleft当前的距离左边位置。
JavaScript进阶篇1-1让你认识JS你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面而已。
我们还需使用JavaScript增加行为,为网页添加动态效果。
准备好,让JavaScript带你进入新境界吧!JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)JS进阶篇学习什么?在JavaScript入门篇中,我们学习了如何插入JS、输出内容及简单的DOM操作,JavaScript进阶篇让您进一步的了解JS的变量、数组、函数、语法、对象、事件、DOM操作,制作简单的网页动态效果。
任务我们先来回顾下JS入门篇的基础内容,在网页中插入JS代码,实现输出"JS进阶篇",并弹出对话框,内容为"关注JS高级篇"。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>我们互动下</title></head><body></body></html>1-2编程练习小伙伴们,实现在html页面中的插入JavaScript脚本,打开页面时,在页面中显示一句话: "系好安全带,准备启航--目标JS",并弹出一个提示框:"准备好了,起航吧!"任务第一步:把注释语句注释。
让你认识JS (5)什么是变量 (6)给变量取个名字(变量命名) (6)确定你的存在(变量声明) (8)多样化的我(变量赋值) (9)表达出你的想法(表达式) (9)我还有其它用途( +号操作符) (11)自加一,自减一( ++和- -) (12)较量较量(比较操作符) (12)我与你同在(逻辑与操作符) (13)我或你都可以(逻辑或操作符) (14)是非颠倒(逻辑非操作符) (15)保持先后顺序(操作符优先级) (15)一起组团(什么是数组) (16)组团,并给团取个名(如何创建数组) (18)谁是团里成员(数组赋值) (18)团里添加新成员(向数组增加一个新元素) (20)呼叫团里成员(使用数组元素) (20)了解成员数量(数组属性length) (21)二维数组 (21)做判断(if语句) (23)二选一(if...else语句) (23)多重判断(if..else嵌套语句) (24)重复重复(for循环) (29)反反复复(while循环) (31)来来回回(Do...while循环) (32)退出循环break (34)继续循环continue (36)什么是函数 (37)定义函数 (39)函数调用 (40)有参数的函数 (41)返回值的函数 (42)什么是事件 (42)鼠标单击事件( onclick ) (43)鼠标经过事件(onmouseover) (44)鼠标移开事件(onmouseout) (46)光标聚焦事件(onfocus) (47)失焦事件(onblur) (48)内容选中事件(onselect) (49)文本框内容改变事件(onchange) (50)加载事件(onload) (51)什么是对象 (54)Date 日期对象 (55)返回星期方法 (57)返回/设置时间方法 (58)String 字符串对象 (59)返回指定位置的字符 (59)返回指定的字符串首次出现的位置 (60)字符串分割split() (62)提取字符串substring() (63)提取指定数目的字符substr() (64)Math对象 (65)向上取整ceil() (67)向下取整floor() (68)四舍五入round() (70)随机数random() (71)Array 数组对象 (72)数组连接concat() (73)指定分隔符连接数组元素join() (75)颠倒数组元素顺序reverse() (77)选定元素slice() (77)数组排序sort() (79)window对象 (80)JavaScript 计时器 (81)取消计时器clearInterval() (83)计时器setTimeout() (85)取消计时器clearTimeout() (87)History 对象 (89)返回前一个浏览的页面window.history.back() (90)返回下一个浏览的页面window.history.forward() (90)返回浏览历史中的其他页面window.history.go(number) (90)Location对象 (91)Navigator对象 (92)userAgent (93)screen对象 (94)认识DOM (95)getElementsByName()方法 (97)getElementsByTagName()方法 (98)区别getElementByID,getElementsByName,getElementsByTagName (99)getAttribute()方法 (101)setAttribute()方法 (102)节点属性 (103)访问子结点childNodes (104)访问子结点的第一和最后项 (105)访问父节点parentNode (106)插入节点appendChild() (110)插入节点insertBefore() (110)删除节点removeChild() (112)替换元素节点replaceChild() (115)创建元素节点createElement (117)创建文本节点createTextNode (118)浏览器窗口可视区域大小 (119)网页尺寸scrollHeight (120)网页尺寸offsetHeight (121)网页卷去的距离与偏移量 (121)让你认识JS你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面而已。
我们还需使用JavaScript增加行为,为网页添加动态效果。
准备好,让JavaScript带你进入新境界吧!JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)JS进阶篇学习什么?在JavaScript入门篇中,我们学习了如何插入JS、输出内容及简单的DOM操作,JavaScript 进阶篇让您进一步的了解JS的变量、数组、函数、语法、对象、事件、DOM操作,制作简单的网页动态效果。
什么是变量什么是变量? 从字面上看,变量是可变的量;从编程角度讲,变量是用于存储某种/某些数值的存储器。
我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服、玩具、水果...等。
给变量取个名字(变量命名)我们为了区分盒子,可以用BOX1,BOX2等名称代表不同盒子,BOX1就是盒子的名字(也就是变量的名字)。
我们赶快给变量取个好名字吧!变量名字可以任意取,只不过取名字要遵循一些规则:1.必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。
如下:正确:mysum_mychar$numa1错误: 6num //开头不能用数字%sum //开头不能用除(_ $)外特殊符号,如(% + /等)sum+num //开头中间不能使用除(_ $)外特殊符号,如(% + /等)2.变量名区分大小写,如:A与a是两个不同变量。
3.不允许使用JavaScript关键字和保留字做变量名。
确定你的存在(变量声明)我们要使用盒子装东西,是不是先要找到盒子,那在编程中,这个过程叫声明变量,找盒子的动作,如何表示:声明变量语法: var 变量名;var就相当于找盒子的动作,在JavaScript中是关键字(即保留字),这个关键字的作用是声明变量,并为"变量"准备位置(即内存)。
var mynum ; //声明一个变量mynum当然,我们可以一次找一个盒子,也可以一次找多个盒子,所以Var还可以一次声明多个变量,变量之间用","逗号隔开。
var num1,mun2 ; //声明一个变量num1注意:变量也可以不声明,直接使用,但为了规范,需要先声明,后使用。
多样化的我(变量赋值)我们可以把变量看做一个盒子,盒子用来存放物品,那如何在变量中存储内容呢?我们使用"="号给变量存储内容,看下面的语句:var mynum = 5 ; //声明变量mynum并赋值。
这个语句怎么读呢?给变量mynum赋值,值为5。
我们也可以这样写:var mynum; //声明变量mynummynum = 5 ; //给变量mynum赋值注:这里 "="号的作用是给变量赋值,不是等于号。
盒子可以装衣服、玩具、水果...等。
其实,变量是无所不能的容器,你可以把任何东西存储在变量里,如数值、字符串、布尔值等,例如:var num1 = 123; // 123是数值var num2 = "一二三"; //"一二三"是字符串var num3=true; //布尔值true(真),false(假)其中,num1变量存储的内容是数值;num2变量存储的内容是字符串,字符串需要用一对引号""括起来,num3变量存储的内容是布尔值(true、false)。
表达出你的想法(表达式)表达式与数学中的定义相似,表达式是指具有一定的值、用操作符把常数和变量连接起来的代数式。
一个表达式可以包含常数或变量。
我们先看看下面的JavaScript语句:生活中“再见”表达方法很多,如:英语(goodbye)、网络语(88)、肢体语(挥挥手)等。
在JavaScript表达式无处不在,所以一定要知道可以表达哪些内容,看看下面几种情况:注意:串表达式中mychar是变量注意:数值表达式中num是变量注意:布尔表达式中num是变量我还有其它用途( +号操作符)操作符是用于在JavaScript中指定一定动作的符号。
(1)操作符看下面这段JavaScript代码。
sum = numa + numb;其中的"="和"+"都是操作符。
JavaScript中还有很多这样的操作符,例如,算术操作符(+、-、*、/等),比较操作符(<、>、>=、<=等),逻辑操作符(&&、||、!)。
注意: “=” 操作符是赋值,不是等于。
(2) "+"操作符算术运算符主要用来完成类似加减乘除的工作,在JavaScript中,“+”不只代表加法,还可以连接两个字符串,例如:mystring = "Java" + "Script"; // mystring的值“JavaScript”这个字符串自加一,自减一( ++和- -)算术操作符除了(+、-、*、/)外,还有两个非常常用的操作符,自加一“++”;自减一“--”。
首先来看一个例子:mynum = 10;mynum++; //mynum的值变为11mynum--; //mynum的值又变回10上面的例子中,mynum++使mynum值在原基础上增加1,mynum--使mynum在原基础上减去1,其实也可以写成:mynum = mynum + 1;//等同于mynum++mynum = mynum - 1;//等同于mynum--较量较量(比较操作符)我们先来做道数学题,数学考试成绩中,小明考了90分,小红考了95分,问谁考的分数高?答: 因为“95 > 90”,所以小红考试成绩高。
其中大于号">" 就是比较操作符,小红考试成绩和小明考试成绩就是操作数,并且是两个操作数。
也就是说两个操作数通过比较操作符进行比较,得到值为真(true)和假(false)。