rss· 投稿· 设为首页· 加入收藏· 繁體版
当前位置: 火魔网 » 程序开发 » Javascript

Javascript学习笔记

一、javascript简介 1、什么是javascript? 是由网景公司制订的一种嵌套在html文件中的脚 本语言,由浏览器解释执行。其作用是: a、数据验证(比如表单提交时,对表单中的数据 进行合法性验证,比如用户名是否填写等)。 b, 操作网页、实现动态交互效果(比如,点击一个 按钮,弹出一个窗口)。 c,获得浏览器的一些内部信息(比如,浏览器的类型、 版本等)。 d,ajax核心技术之一(在ajax技术当中,需要使用 javascript整合其它的一些技术) 2、javascript的组成 a,ECMAScript: 这是一个规范,由ECMA(欧洲计算 机制造工业协会)制订。该规范定义了脚本语言的 语言基础部分(数据类型、流程控制、关键字、 运算符及运算规则等等)。 该规范,各个浏览器都会严格遵守。 b,DOM(文件对象模型):这也是一个规范,由w3c(万维网联盟)制订。 该规范定义了浏览器如何将一个html文件转换成 一棵dom树,以及,如何操作这棵树(包括对树 如何遍历、查询、删除、添加、修改树中的节点)。 可以这样认为,DOM是开发人员操作网页的一套接口。 该规范,各个浏览器支持程度不一。 c,BOM(浏览器对象模型):不是规范,但是各个浏览器基本上都支持。 我们将浏览器内置的一些对象,包括Window、 Navigator、Location、Screen、Document、 History、XmlHttpRequest等等统称为Browser Object Model。 一、ECMAScript(语言基础) 1、标识符 a_$开头,后面可以接a_$及数字。 "a_$"指的是字母、下划线和"$"。 2、关键字和保留字 不能使用关键字和保留字作为标识符。 3、语句 以";"结尾。如果不加";"也能运行,由 js引擎负责判断,但是容易出错。所以, 建议一条语句结束,一定加上";"。 4、大小写敏感。 5、数据类型 1)简单数据类型 a,number a1,不管是整数还是小数,都是number类型。 a2,number类型有一个对应的包装类Number。 最大值:Number.MAX_VALUE 最小值:Number.MIN_VALUE 如果一个值超出了最大值或者最小值的范围, 会显示Infinty,-Infinty。 a3,number类型如何转换成字符串? toString() a4,对于浮点运算,有误差。 a5,isNaN函数:当一个值是非数字是,返回true。 b,string b1,字符串是一种基本类型,要用',或者"引起来。 b2,字符串也有对应的包装类String。 b3,常用属性和方法 length属性 返回字符串的长度 charAt(index) 返回指定位置的字符,下标从0开始。 substring(from, to) 返回子字符串 indexOf(str) 指定字符串在原字符串中 第一次出现的位置。 lastIndexOf(str) 指定字符串在原字符串 中最后一次出现的的位置。 match(regexp) 返回匹配指定正则表达式的 字符串,返回的结果是一个数组。 var str2 = 'asd212abc345'; //js引擎会将/[0-9]+/包装成RegExp对象 //(即正则表达式对象)。 //"g"在这儿的作用是搜索所有的字符,否则 //找到一个符合条件的数字后,不再向下 //搜索。 var reg2 = /[0-9]+/; var arr = str2.match(reg2); search(regexp) 返回按照正则表达式检索 到的字符串位置 str2.search(reg2) toLowerCase/toUpperCase 返回小写/大写形式 replace(regexp,'abc') 替换符合reg正则表 达式规定的字符串 str2 = str2.replace(reg2,'888'); split 分割字符串,返回一个字符串数组。 c,boolean c1,只有两个值 true,false。 c2,布尔类型的特殊用法 以下几种情况,结果为true。 不为空的字符串。 不为0的数字 对象 null,undefined结果为false。 如果有需要,js引擎会将任意类型的 值转换成boolean类型的值, 通过调用Boolean()函数来实现转换。 c3,布尔类型也有一个包装类Boolean。 d,null d1,使用typeof测试类型时,返回object。 d2,只有一个值null。 e,undefined e1,只有一个值undefined。 e2,变量没有赋值。 2)复杂数据类型(Object类型的子类型) a,数组 a1,数组的大小可变、存放的数据可以任意。 a2,创建数组。 第一种方式: var arr = new Array(); arr[0] = 12; arr[2] = 'abc'; 第二种方式: var arr = []; var arr = [1,2,3]; 数组的长度可以通过length属性获得。该 属性可读也可以写。 a3,不规则数组。 var arr = new Array(); arr[0] = [1,2,3]; arr[1] = [11,22]; arr[2] = [33]; a4,数组常用的方法。 toString方法, 返回数组的字符串表示 concat方法, 用于连接两个数组,生成一个新 的数组。 join方法,用于将数组中的各个元素连接 成字符串。可以指定连接的字符串。 reverse方法,对原数组进行反转。 slice用于截取数组的一部分并以数组的形式返回 sort()排序 b,函数 b1、如何定义一个函数 function 函数名(参数){ //函数体 } 要注意: 函数不能添加返回类型的声明。 可以有返回值。 b2、函数其实质是一个对象,是Function 类型的实例。函数名是一个变量,指向了 该实例。 b3、函数不能重载 如果有多个函数名相同,则最后一个函数会 覆盖前面的函数。不能够通过函数参数的个数 来区分不同的函数。因为函数参数是通过 arguments对象来传递的。 b4、变量的作用域 js引擎在执行js代码之前,会先进行预编译: 会将变量的声明以及函数的定义存放到相应的 活动对象上面。 活动对象不能够直接访问到,但是,js引擎 可以访问。 全局活动对象: js引擎在执行<script>之后,会创建一个 全局活动对象。 局部活动对象: js引擎在碰到一个函数之后,会为该 函数创建一个局部活动对象。 接下来,js引擎开始执行js代码,在执行时, 遇到变量或者函数,需要从相应的活动对象 上查找该变量或者函数。如果局部活动对 象上找不到,则查找上一级活动对象,一直 到全局。
c、Math ceil():上舍入 floor():下舍入 random():0<=随机数<1
二、Dom模型(w3c dom模型) 1、什么是dom模型? Document object model(文档对象模型),其作用是, 将一个结构化的文档(比如xml,html)转换成一棵树。 通过对树的操作来间接实现对文档的操作。 2、w3c dom模型: w3c定义了浏览器如何将一个html文件转换成一棵 树,并且,也定义了树的操作(包括增加节点、删除 节点、修改节点以及查找、遍历节点的相关方法)。 1)浏览器如何将html文件转换成一棵树(了解) Node  Document HTMLDocument HTMLBodyElement Element HTMLElement HTMLFormElement HTMLInputElement HTMLSelectElement HTMLOptionElement HTMLDivElement HTMLTableElement HTMLTableCaptionElement HTMLTableRowElement HTMLTableCellElement 2)dom操作 (1)查找节点 a,document.getElementByIdx_x(id); document是dom树的根节点。该方法只会返回 一个节点。 找到节点后,可以使用以下几个重要属性: innerHTML属性: 可以设置或者读取某个标记之 间的内容。 value属性: 可以设置或者读取节点的value值。 className属性: 给节点的class属性赋值 b, node.getElementsByTagName_r(tagName); 返回从node开始,所有标记名称为tagName的节点。 c,遍历的方式 因为浏览器兼容性问题,建议少用。 parentNode  previousSibling  nextSibling  childNodes  firstChild  lastChild (2)创建节点 document.createElement_x(tagName); 创建节点之后,必须添加到dom树,否则, 浏览器不会显示该节点。 (3)添加节点 node.appendChild(newNode); 将newNode作为node的最后一个孩子进行添加。 node.insertBefore(newNode,refNode); 将newNode添加到refNode前面。 node.replaceChild(newNode,refNode); 使用newNode替换refNode。 (4)删除节点 node.removeChild(childNode); 删除node下面的子节点childNode。 (5)样式操作 方式一:给节点的class属性赋值,即 node.className = 's1'; 这行代码的作用,就是设置节点的class 属性值是's1'。 方式二:修改节点的style属性。 node.style.backgroundColor = 'red'; 要注意:如果要修改的样式属性名称包含 "-"号,则必须除掉"-"号,然后后面的第 一个字符变成大写。 3)禁止浏览器的默认行为: a,两种默认行为: 点击链接,浏览器会向href指向的地址发请求。 点击提交按钮,浏览器会将表单中的数据提交。 b,禁止方式: <a href="del.do"  onclick="return false;">删除</a> <form action="regist.do"  onsubmit="return false;"> <input type="submit" value="确认"/> </form>
顶一下
(0)
踩一下
(0)