javascript基础知识

Javascript 入门基础知识 JavaScript 什么是 javascript Javascript 是由 Netscape Communication Corporation 网景公司 开发的 是一种基于对象和事件驱动并具有安全性能的解释型脚本语言 它 不但可以用于编写客户端的脚本程序 由客户端浏览器解释执行 还 可以编写在服务端执行的脚本程序 由服务端处理用户提交的信息 并动态的向浏览器返回处理结果 由于各浏览器对 JavaScript 脚本支持的不一致性 因此 在进行 JavaScript 脚本编程时 首先应确定用户使用的浏览器类型 然后根 据浏览器类型编写 JavaScript 脚本 下面将介绍 Netscape 的 Navigator 浏览器和 Microsoft 的 Internet Explorer 浏览器 1 Netscape Navigator 网景浏览器 Netscape Navigator 网景浏览器 是最早也是最有影响力的网页 浏览器之一 Netscape Navigator 浏览器 1 0 版发布于 1994 年 12 月 比微软 IE1 0 浏览器发布时间还早一个多月 但由于 IE 浏览器和微 软的 Windows 操作系统捆绑在一起 因此对 Netscape 网景浏览器的 市场发展造成了巨大影响 使得 Netscape 网景浏览器逐渐淡出主流 浏览器行列 Javascript 的数据类型 字符串型 数值型 布尔型 对象型 空置 underfined language 设置所使用的脚本语言及版本 src 设置一个外部脚本文件的路径位置 type 设置所使用的脚本语言 此属性已代替 language 属性 defer 表示当 HTML 文档加载完毕后在执行脚本语言 在使用 JavaScript 进行程序开发时 要求使用的硬件开发环境如下 首先必须具备运行 Windows 98 Window XP Windows NT 及其 Service Pack 6a 或更高版本 Windows 2000 及其 Service Pack 2 或更 高版本的基本硬件配置环境 至少 32MB 以上的内存 640 480 分辨率以上的显示器 至少 20MB 以上的可用硬盘空间 JavaScript 在 HTML 中的使用 1 在页面中直接嵌入 JavaScript 2 链接外部 JavaScript 在 HTML 文档中可以使用 标记将 JavaScript 脚本 嵌入到其中 在 HTML 文档中可以使用多个标记 每个 标记中可以包含多个 JavaScript 的代码集合 标记常 用的属性及说明如表所示 language 属性 language 属性指定在 HTML 中使用的哪种脚本语言及其版本 language 属性使用的格式如下 src 属性 src 属性用来指定外部脚本文件的路径 外部脚本文件通常使用 JavaScript 脚本 其扩展名为 js src 属性使用的格式如下 type 属性 type 属性用来指定 HTML 中使用的是哪种脚本语言及其版本 此属性在 HTML4 0 标准开始 推荐使用 type 属性来代替 language 属性 type 属性使用格式如下 defer 属性 defer 属性的作用是当文档加载完毕后再执行脚本 当脚本语言 不需要立即运行时 设置 defer 属性后 浏览器将不必等待脚本语言 装载 这样页面加载会更快 但当有一些脚本需要在页面加载过程 中或加载完成后立即执行时 就不需要使用 defer 属性 Defer 属性 使用格式如下 在 Web 页面中引入 JavaScript 的另一种方法是采用链接外部 JavaScript 文件的形式 如果脚本代码比较复杂或是同一段代码可以 被多个页面所使用 则可以将这些脚本代码放置在一个单独的文件 中 保存文件的扩展名为 js 然后在需要使用该代码的 Web 页面 中链接该 JavaScript 文件即可 在 Web 页面中链接外部 JavaScript 文件的语法格式如下 实例 使网页具有动态交互功能 制作网页特效 对用户的不同事件作出 响应 alert new Date 脚本代码的位置 可以使用多个 script 嵌套 javascrpit 的保留关键字 标识符不能以数字开头 不能是 javascrpit 的保留 关键字 严格区分大小写 基本数据类型与常量 var name 111111111 alert var 22222222222 算数运算符 加法运算符或正值运算符 减法运算符或负值运算符 乘法运算符 除法运算符 求模运算符 将变量值加 1 后在将结果负值给这个变量 分为 i i 将变量减一后在讲结果负值给变量 程序的流程控制 顺序结构 switvh 选择语句 switch 表达式 case 取值 1 语句块 1 break default 语句块 n 1 break while 条件表达式 执行语句块 do while 语句 do 执行语句块 while 条件表达式语句 for 循环语句 for var x 1 x0 x x 数据类型的转换 数据类型转换函数 eval 字符串 将字符串参数转换成相应的数值 parseInt 字符串 底数 将字符串换成指定底数的数值 parseFloat 函数 函数的作用 函数的定义与调用 格式如下 function 函数名 参数列表 程序代码 return 表达式 对函数进行调用的方式 1 函数名 传递给函数的参数 1 2 变量 函数名 传递给函数的参数 1 3 对于有返回值的函数调用 也可以在程序中直接使用返回的结果 列如 alter sum square 2 3 全局变量及局部变量 var msg 全局变量 function show msg 局部变量 show alert msg alert msg 此处 msg 的值为 局部变量 局部变量会覆盖同名的全局变量 参数个数可变的函数 function testparams var params for var i 0 i arguments length i params params arguments i alert params testparams abc 123 testparams 123 456 abcc 在函数内部使用 arguments 对象来访问调用程序传递的所有参数 创建动态函数 创建动态函数的基本语法格式 var varName new Function argument1 lastArgument 所有的参数都 必须是字符串型的 最后的参数必须是这个动态函数的功能程序代码 列 var square new Function x y var sum sum x x y y return sum alert square 2 3 动态函数有什么作用 在什么情况下使用动态函数 javascript 的系统函数 encodeURI 方法 返回对一个 url 字符串编码后的结果 decoderURI 将一个已经编码的 URL 字符串解码成最初的字符串并返 回值 parselnt 方法 将一个字符串按指定的进制转换成一个整数 语句格式为 parselnt numString radix 如果没有指定第二个参数 则前缀为 0 x 的 字符串被试为 16 进制 前缀为 0 的字符串被视为八进制 所有其他 字符串都被视为是十进制 parseFloat 方法 将一个字符串转换成对应的小数 isNaN 方法 用于检测 parselnt 和 parseFloat 方法的返回值是否为 NaN escape 方法 unescape 方法 将一个用 escape 方法编码的结果字符串解码成原始字符返回 对 象 对象与对象实例 new 实例化对象 内置函数 parseInt StringNum n 将首位为数字的字符串转换为数字 如果不是以数字开头的 将返 回 NAN 值 parseFloat StringNum 将首位为数字的字符串转换为浮点型数字 如果不是以数字开头的 将返回 NAN 值 isFinite Num 函数 检验某表达式是否为无穷大 如果是则返回 true 不是则返回值为 false encodeURI url 改函数主要用于返回一个 URL 字符串编码后的结果 decodeURI url 该函数主要用于将以编码为 URI 的字符串解码成最初的字符串并返 回 列 内置函数的调用 parseint 函数 var num1 123abcd var num2 abc123 document write 使用 parseint 函数 document write 123abc 转换结果为 parseInt num1 parseFloat 函数 var num3 123 2343abs document write 使用 parseFloat 函数 document write 123 2343abc 转换结果为 parseFloat num3 居中显示框架页 JavaScript 内部对象 Object 对象提供了对象的最基本功能 这些功能构成了所有其他对 象的基础 Object 对象提供了创建自定义对象的简单方式 不需要 再定义构造函数 可以在程序运行时为 JavaScript 对象随意添加属 性 因此使用 Object 对象能很容易地创建自定义对象 1 创建 Object 对象 语法 obj new Object value 参数说明 obj 必选项 要赋值为 Object 对象的变量名 value 可选项 任意一种 JScript 基本数据类型 Number Boolean 或 String 如果 value 为一个对象 返回不做 改动的该对象 如果 value 为 null undefined 或者没有给出 则产 生没有内容的对象 Object 对象提供了对象的最基本功能 这些功能构成了所有其他对 象的基础 Object 对象提供了创建自定义对象的简单方式 不需要 再定义构造函数 可以在程序运行时为 JavaScript 对象随意添加属 性 因此使用 Object 对象能很容易地创建自定义对象 1 创建 Object 对象 语法 obj new Object value 参数说明 obj 必选项 要赋值为 Object 对象的变量名 value 可选项 任意一种 JScript 基本数据类型 Number Boolean 或 String 如果 value 为一个对象 返回不做 改动的该对象 如果 value 为 null undefined 或者没有给出 则产 生没有内容的对象 2 Object 对象的属性 1 prototype 属性 返回对象类型原型的引用 objectName prototype objectName 参数是对象的名称 用 prototype 属性提供对象的类的一组基本功能 对象的新实例 继承 赋予该对象原型的操作 2 constructor 属性 表示创建对象的函数 object constructor 必选项 object 是对象或函数的名称 3 Object 对象的方法 1 toLocaleString 方法 返回一个日期 该日期使用当前区域设置并已被转换为字符串 dateObj toLocaleString 必选项 dateObj 为任意的 Date 对象 toLocaleString 方法返回一个 String 对象 这个对象中包含了用当 前区域设置的默认格式表示的日期 对于公元 1601 和 1999 之间的时间 日期格式要按照用户的 控 制面板 中 区域设置 来确定 F 对于此区间外的其他时间 使用 toString 方法的默认格式 2 toString 方法 返回对象的字符串表示 objectname toString radix 参数说明 objectname 必选项 要得到字符串表示的对象 radix 可选项 指定将数字值转换为字符串时的进制 toString 方法是 JavaScript 所有内部对象的一个成员方式 它的操 作依赖于对象的类型 String 对象是动态对象 需要创建对象实例后才能引用该对象的属 性和方法 该对象主要用于处理或格式化文本字符串以及确定和定 位字符串中的子字符串 1 创建 String 对象 String 对象用于操纵和处理文本串 可以通过该对象在程序中获 取字符串长度 提取子字符串 以及将字符串转换为大写或小写字 符 var newstr new String StringText 参数说明 newstr 创建的 String 对象名 StringText 可选项 字符串文本 例如 创建一个 String 对象 var newstr new String 欢迎使用 JavaScript 脚本 2 String 对象的属性 在 String 对象中有 3 个属性 分别是 length constructor 和 prototype 下面对这几个属性进行详细介绍 1 length 属性 该属性用于获得当前字符串的长度 stringObject length 参数说明 stringObject 当前获取长度的 String 对象名 也可以是字符变量 名 2 constructor 属性 该属性用于对当前对象的函数的引用 Object constructor 参数说明 Object String 对象名或字符变量名 3 prototype 属性 该属性可以为对象添加属性和方法 object prototype name value 参数说明 object 对象名或字符变量名 Name 要添加的属性名 Value 添加属性的值 在 web 开发过程中 可以使用 JavaScript 的 Date 对象 日期对象 来实现对日期和时间的控制 如果想在网页中显示计时时钟 就得 重复生成新的 Date 对象来获取当前计算机的时间 用户可以使用 Date 对象执行各种使用日期和时间的过程 1 创建 Date 对象 日期对象是对一个对象数据类型求值 该对象主要负责处理与日 期和时间有关的数据信息 在使用 Date 对象前 首先要创建该对象 其创建格式如下 dateObj new Date dateObj new Date dateVal dateObj new Date year month date hours minutes seconds ms Date 对象语法中各参数的说明如表所示 Date 对象的属性 Date 对象的属性有 constructor 和 prototype 它们与 String 对象中 的属性语法相同 在这里介绍这两个属性的用法 1 constructor 属性 例如 判断当前对象是否为日期对象 代码如下 var newDate new Date if newDate constructor Date document write 日期型对象 运行结果 日期型对象 2 prototype 属性 例如 用自定义属性来记录当前日期是本周的周几 代码如下 var newDate new Date 当前日期为 2008 1 3 Date prototype mark null 向对象中添加属性 newDate mard newDate getDay 向添加的属性中赋值 alert newDate mard 运行结果 4 3 Date 对象的方法 Date 对象是 JavaScript 的一种内部数据类型 该对象没有可以直 接读写的属性 所有对日期和时间的操作都是通过方法完成的 3 event 对象的属性 1 altLeft 属性 设置或获取左 Alt 键的状态 检索左 Alt 键的当前状态 返回值 true 表示关闭 false 为不关闭 window event altLeft 由于 altLeft 属性是 boolean 值 因此可以将该属性应用到 if 语句 中 根据获取的值不同而执行不同的操作 2 ctrlLeft 属性 设置或获取左 Ctrl 键的状态 检索左 Ctrl 键的当前状态 返回值 true 表示关闭 false 为不关闭 window event ctrlLeft 由于 ctrlLeft 属性是 boolean 值 因此可以将该属性应用到 if 语 句中 根据获取的值不同而执行不同的操作 3 shiftLeft 属性 设置或获取左 Shift 键的状态 检索左 Shift 键的当前状态 返回 值 true 表示关闭 false 为不关闭 window event shiftLeft 由于这 3 个属性的值同样也都是 boolean 类型的 所以也可以将 它们组合成一个条件在 if 语句中应用 并且也可以和 altKey ctrlKey 和 shiftKey 属性同时使用 4 button 属性 设置或获取事件发生时用户所按的鼠标键 window event button 5 clientX 属性 获取鼠标在浏览器窗口中的 X 坐标 该属性是一个只读属性 即只能获取到鼠标的当前位置 不能改变鼠标的位置 window event clientX 6 clientY 属性 获取鼠标在浏览器窗口中的 Y 坐标 该属性是一个只读属性 即只能获取到鼠标的当前位置 不能改变鼠标的位置 window event clientY 7 X 属性 设置或获取鼠标指针位置相对于 CSS 属性中有 position 属性的上 级元素的 X 轴坐标 如果没有 CSS 属性中有 position 属性的上级元 素 默认以 body 元素作为参考对象 window event X Folder 对象可以获取服务器端指定文件夹的相关属性 它与 File 对 象的实现过程基本相同 只是 Folder 对象针对的是文件夹 File 对 象针对的是文件 1 动态创建 Folder 对象 使用 Folder 对象对指定文件夹的所有属性进行访问 必需要创建 Folder 对象 该对象是通过 FileSystemObject 对象的 GetFolder 方法 来创建的 GetFolder 方法根据指定的路径中的文件返回相应的 Folder 对象 object GetFolder filespec 参数说明 object 必选 FileSystemObject 的名称 Filespec 必选 指定文件夹的路径 绝对或相对路径 例如 将 qq txt 文件以 File 对象进行实例化 代码如下 var fso new ActiveXObject Scripting FileSystemObject var s fso GetFolder E word JavaScript Function 构造函数与函数直接量 javascript 内部对象 object 对象 创建 object 对象 语法 obj new object value obj 要赋值为 object 对象的变量名 value 任意一种 javascript 基本数据类型 object 对象的属性 prototype 属性 该属性返回对象类型原型的引用 javascript 事件 onclick 鼠标单击时触发此事件 ondblcick 鼠标双击时触发此事件 onmousedown 按下鼠标时触发此事件 onmouseup 鼠标按下后松开时触发此事件 onkeydown 当键盘上的某个按键被按下时触发此事件 onkeyup 页面事件 当键盘上某个按键按下被松开时触发此事件 onload 页面加载事件 页面内容完成时触发此事件 onchange 失去焦点并且内容改变是触发 onfocus 当表单获得焦点时触发 onblur 当前元素失去焦点是触发 onbounce 滚动字幕事件 当 Marquee 内的内容移至 Marquee 显示 范围之外时触发此事件 onfinish 当 Marquee 元素完成需要显示的内容后触发此事件 onstart 当 Marquee 元素开始显示内容事触发此事件 javascript 的事件处理 Focus 获取焦点 Blur 失去焦点 Click 在对象上单击鼠标 Load 浏览器读文件时 调用 javascript javascript 脚本嵌入方式 语法 滚动字幕事件 1 onbounce 事件 2 onstart 事件 onbounce 事件是在标记中的内容滚动到上下或左右边界 时触发的事件处理程序 该事件只有在标记的 behavior 属 性设为 aloernate 时才有效 onstart 事件是在标记中的文本开始显示时触发事件处理程 序 可以通过该事件在滚动内容显示时 设置其颜色 样式 滚动 方向等 数组 Array 对象名 new Array 元素个数 DOM 对象模型编程 DOM Document Object Model 事件