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

Java Script学习笔记SkylerCong制作目录一、Javascript初识21.Javascript的基本概念22.Javascript中函数的使用33.Javascript中的对象44.JavaScript中的行为5二、Javascript中的时间对象61.时间对象的方法（从0开始）62.时间对象的实际应用6三、Javascript中的文字对象71.文字对象的属性和方法72.文字对象的实际应用8四、Javascript中的图片应用91.图像对象的属性92.图像对象的实际应用9五、Javascript在表单中的应用101.表单总揽102.表单的实际应用11六、Javascript中窗口对象的应用121.窗口对象的方法122.窗口对象的实际应用12七、Javascript中其他对象的应用141.浏览器信息的获取navigator142.网页信息的获取143.首页和收藏夹的设置144.浏览器状态栏的信息显示145.随机显示文字146.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具有安全性，不允许用户访问本地硬盘，不允许对网络中的文档进行修改或删除，这样就能有效地防止数据丢失以及恶意修改。g) 示例：HTML文件内置脚本Document.write(Hello,JavaScript!);HTML文件外接脚本/1.jsDocument.write(JavaScript,Hello!);iii. Javascript的数据结构1. 基本数据类型：a) 常量b) 变量：数据的存取容器，javascript中并不要求一定要对变量进行声明。var test;c) 变量的作用范围：i. 函数体外定义变量时，该变量就是全局变量，该脚本内的所有函数都可以调用它；ii. 函数提内部定义的变量，就是局部变量，只有该函数体可以调用它。2. 运算符：a) 单目运算符： ！ + b) 双目运算符： + * / % | & = = != %= |= = |c) 三目运算符： 操作数? 结果1 :结果23. 表达式：4. 程序基本框架：a) 循环语句b) 条件语句小技巧：图像的交叉显示For(x=10;x=21;x+)If(x%2=0)Document.write();ElseDocument.write();2. Javascript中函数的使用i. 有参函数function news(n) var a; a=; for(i=0;in;i+) a=a+/; return a;ii. 无参函数function counttime() var a=new Date(); var hour=a.getHours(); var minute=a.getMinutes(); var second=a.getSeconds(); var time=hour+:+minute+:+second; alert(现在的时间是:+time);3. Javascript中的对象/创建一个新的对象Fnction person(name,age,sex,city,profession,recordtime)/定义对象中的属性T=name;This.age=age;This.sex.sex;This.city=city;Tfession=profession;This.recordtime=recordtime;/对对象中所有属性进行操作Function showperson(r)For(var pers in I)Alert( +pers+/n/n Ipers+ );/创建对象的实例Document.write( 个人信息表 );P1=new person( , , , , );Document.write();4. JavaScript中的行为i. Javascript中的行为1. 事件是由各种Event种类来处理的；2. 动作则是用于完成一定任务而预先编写好的Javascript代码。3. 常用的Event种类a) Onabort在完全装载某一图片前，停止浏览器时b) Onblur当特定元素失去焦点时c) Onclick当单击选定某一元素时d) Oncontextmenu当输入文字内容时e) Ondblclick当双击选定某以元素时f) Ondrag当鼠标拖拽某一元素时g) Ondragend当鼠标结束拖拽某以元素时h) Onfocus当制定元素成为焦点时i) Onkeydown当键盘按下不放时j) Onkeypress当键盘按下随即又放开时k) Onkeyup当键盘放开时l) Onload当网页或图片装载完成时m) Onmousedown当按下鼠标按钮时n) Onmouseout当鼠标离开特定元素上时o) Onmouseover当鼠标首次移动指向特定元素时p) Onmouseup当按下鼠标按钮随即放开时q) Onscroll当操作滚动条进行滚动时r) Onunload当离开当前页面4. 示例：a) 弹出新窗口Function openwin()Window.open(1.htm,zi,width=300,height=300);打开本窗口的同时打开一个新的窗口b) 屏蔽对图片的操作c) 全屏显示窗口onClick = window.open(document.location, big , fullscreen=yes )onClick = window.close()ii. Dreamweaver中行为的应用1. Dreamweaver2. 窗口 - 行为二、 Javascript中的时间对象1. 时间对象的方法（从0开始）i. 获取日期和时间的方法方法名功能方法名功能Getyear（）获取当前年数Gethours（）获取当前小时数Getmonth（）获取当前月数Getminutes（）获取当前分钟数Getdate（）获取当前日数Getseconds（）获取当前秒数Getday（）获取当前星期几Gettime（）获取当前毫秒数ii. 设置日期和时间的方法将上表中的GET换成SET2. 时间对象的实际应用i. 时间的显示ii. 日期的显示iii. 进站及停留时间的显示Match对象：主要提供一些数学公式上的运算，如求平方根、绝对值等。属性名说明E：常数LN10:以10为底的自然对数LN2：以2为底的自然对数PI:圆周率SORT1_2:1/2的平方根Sort2：2的平方根方法名功能Abs（）绝对值Sin（），cos（）正弦，余弦Asin（），acos（）反正弦，反余弦Tan（），atan（）正切，反正切Round（）四舍五入后保留整数Floor（）获得一个数的整数部分Sqrt（）求平方根iv. 倒计时的制作三、 Javascript中的文字对象1. 文字对象的属性和方法i. 文字对象即string对象ii. 只有一个属性，lengthiii. 方法：方法名功能Big（）为字符添加大体HTML标记Small（）为字符添加小体HTML标记Italics（）为字符添加斜体HTML标记Bold（）为字符添加粗体HTML标记Blink（）为字符添加闪烁HTML标记Fixed（）为字符添加固定高亮HTML标记Fontsize（）为字符添加控制字体大小HTML标记Tolowercase（）将字符串转换为小写Touppercase（）将字符串转换为大写Indexof（）从指定字符位置开始搜索某一特定字符第一次出现的位置Substring（）返回所设置的一部分字符串2. 文字对象的实际应用i. 计算字符串长度Function show_length()Var texts = document.框架名.对象名.value.length;Document.框架名.对象名.value = texts;ii. String对象其他方法的应用1. 为文字加上 big 标记Texts = texts.big();2. 粗体显示文字Texts=texts.bold();3. 文字以蓝色显示Texts=texts.fontcolor(blue);4. 所有大写字母替换为小写字母Texts = texts.tolowercase();iii. 字符的检索以及替换Var s = str1.indexof(str2);四、 Javascript中的图片应用1. 图像对象的属性i. Document.number.src = 图片名称;ii. 属性表属性名说明Name对象名称Src图像文件路径Complete上传图像是否完成的标志Height图像的高度Width图像的宽度Border图像边框宽度Hspace水平空白Vspace垂直空白Lowsrc低分辨率2. 图像对象的实际应用i. 滤镜的动态效果：运用CSS中的alpha滤镜或wave滤镜ii. 图片的闪烁效果：对象的style.visibility属性iii. 数组的使用iv. 图片的预先载入1. 使用Cache和Preload来实现图片的预先载入将代码放入之间Image1 = new image(100,50)Image1.src = image1.gifImage2 = new image(100,50)2. 屏蔽Cache五、 Javascript在表单中的应用1. 表单总揽1. 表单由标记来进行定义2. 属性a) Action：用以指明CGI程序的位置，以便此表单所填的资料才能正确传给CGI进行处理；或者是其他服务器端脚本文件名。b) Method：用于设置传送资料的方式。设置值：post用于传送大量的资料，get只接收低于1KB的资料。c) Name：给表单命名。i. 单行文本框ii. 密码文本框iii. 单选框女性男性iv. 复选框音乐书籍烈酒睡觉v. 传送按钮和清除按钮vi. 图片按钮vii. 按钮 type = buttonviii. 下拉列表框 下拉列表框大连北京上海列表选项平铺大连北京上海ix. 多行文本框2. 表单的实际应用i. 计算器的制作ii. 通过数组访问菜单iii. 表单数据的检测六、 Javascript中窗口对象的应用1. 窗口对象的方法i. 打开新窗口1. 通过标记的href属性以及target属性打开一个新的窗口2. Javascript中的窗口对象a) Open(URL, windowName, windowFeatures)特征参数特征参数名说明Width控制窗口的宽度Height控制窗口的高度Scrollbars控制是否显示滚动条Toolbar控制是否显示工具栏，yes为显示，no为不显示Munubar控制是否显示菜单栏Locationr控制是否显示地址栏Directories控制是否显示更新信息按钮Status控制是否显示状态栏Resizable控制是否固定窗口大小b) Close（），用于关闭一个窗口，没有参数设置。2. 窗口对象的实际应用i. 打开新窗口Function c()Window.open(page/01.htm);ii. 打开多个新窗口Var a = new array(1.htm, 2.htm, 3.htm);For（）Window.open(a i ,width = 300, height = 300, scrollbars);iii. 全屏显示1. Width = + screen.width+,height = +screen.height + ,top = 0,left = 0,scrollbars2. Top=300 , left =450, screenX = 450, screenY = 300,scrollbars3. Fullscreen = yes4.iv. 打开窗口的动态变化1. 利用变量来引用窗口，对该窗口进行一定的操作2. W1=window.open(1.htm)Settimeout(W.location.href=2.htm,3000);3. Location对象的主要属性属性名说明Hash锚定名的附加Host服务器端名Hostname服务器端名和domain名Pathname路径名HrefUrl地址Port通信端口Protocol访问方式Search传送服务器参数v. 窗口内边框的设置Borderwidth 粗细Borderstyle 样式Bordercolor 颜色With，javascript提供的专门用于对对象进行操作的语句。在该语句体内，任何变量的引用都将被认为是这个对象的属性，也就是在with语句后面的大括号中的语句，都是该对象的作用域。vi. 关闭窗口Onclick = window.close()vii. 窗口焦点的控制1. Onblur = window.focus()2. document.cookieviii. 输入和输出对话框的使用1. P