JavaScript高级编程笔记(1)

原创 2007年09月23日 19:32:00

1、JavaScript是什么?

  JavaScript实现由以下3个不同部分组成:
  1、核心(ECMAScript) 2、文档对象模型(DOM) 3、浏览器对象模型(BOM)

  ECMAScript -- 并不与任何具体浏览器相绑定,为不同种类的宿主环境提供核心的脚本编程能力
  WEB浏览器对于ECMAScript来说是一个宿主环境,但并不是唯一的宿主环境。例如flash中的ActionScript可以容纳ECMAScript实现。

  ECMAScript主要内容:
  语法、类型、语句、关键字、保留字、运算符、对象、
 
  ECMAScript仅仅是一个描述,定义了脚本语言的所有属性、方法和对象。 

  DOM -- 是HTML和XML的应用程序接口(API).
  DOM 将整个页面规划成由节点层级构成的文档。 

  BOM -- 主要处理浏览器窗口和框架。

-------------------------------------
2、ECMAScript基础

  1、语法  
  区分大小写,
  变量是弱类型、
  每行结尾的分号可有可无、
  注释与Java,C,PHP语言相同 (// /* */)
 
  5 原始值和引用值
  在ECMAScript中,变量可存放两种类型的值,原始值和引用值。
  原始值(primitive value) 是存储在栈(stack)中的简单数据段,直接存储在变量可访问的位置。
  引用 值(reference value)是存储在堆(heap)中的对象,存储一个指针。

  6 原始类型
    ECMAScript有5种原始类型 -- Undefined,Null,Boolean,Number,String
    每种原始类型定义了它包含的值范围及字面量表示形式。
    ECMAScript提供了tpyeof运算符来判断一个值是否存在某种类型的范围内,判断一个值是否有原始类型。
 
  6.1 typeof运算符
     var sTemp = "test string";
     alert(typeof sTemp);  --检查变量类型
  6.2 Undefined类型 -- 未初始化的变量
  6.3 Null类型
  
  7 转换
   toString(),parseInt(),parseFloat(),
   强制类型转换
    Boolean(value) -- 非0数字或对象时,返回true;
    Number(value)  --
    string(value)  --

  8 引用类型 -- Object类,Boolean类,Number类,String类,instanceof运算符
    在使用typeof运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回"object",ECMAScript引入另一个Java运算符instanceof来解决这个问题。
    var temp = new String("test string");
    alert(temp instanceof String);  --返回true  
    
  10 语句
   break -- 立即退出循环,continue -- 只退出当前循环。

  ECMAScript 中的函数不能重载。


-----------------------------------
3、对象基础

  对象的类型:
  1、本地对象  -- 独立于宿主环境的ECMAScript实现提供的对象。
  Object,Function,Array,String,Boolean,Number,Date,RegExp,Error
  EvalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError

  Array类: -- var temp = new Array(20); temp[0] = "red";

  2、内置对象  -- Global和Math
  eval()方法 -- 整个ECNAScript语言中最强大的方法,该方法接受一个参数,即要执行的字符串
  eval("alert('hi')");

 
----------------------------
5、浏览器中的JavaScript

  BOM(浏览器对象模型),它提供了独立于内容而浏览器窗口进行交互的对象。
 
  window对象表示整个浏览器窗口,但不必表示其中包含的内容。
  如果页面使用框架集合,每个框架都有它自己的window对象表示,存放在frames集合中。

  访问Window对象的name属性,它存储的是框架的名字。
 
   self一个更加全局化的窗口指针,它总是等于window。如果页面没有框架,window和self就等于top,frames集合的长度为0。

   1、窗口操作
   moveBy(dx,dy) -- 把浏览器窗口水平,垂直移动
   moveTo(x,y)   -- 移动浏览器窗口
   resizeBy(dw,dh) -- 相对于浏览器窗口的当前大小。
   resizeTo(w,h)   -- 把窗口的宽度调整为w,高度调整为h,不能使用负数。

   IE提供了 window.screenLeft和window.screenTop对象来判断窗口的位置。
   Mozila提供了window.screenX和window.screenY属性来判断窗口的位置。

   建议尽量少用移动窗口的功能。

   2、导航和打开新窗口
    window.open()方法打开新窗口。
    window.open("http://sina.com","newFrame");
   
   3、对话框
    除弹出新窗口,还可使用其它方法向用户弹出信息,利用window对象的alert(),confirm(),prompt()方法。
    alert("hello") -- 接受一个参数,即要显示给用户的信息。 只有OK按钮
    confirm("Are you sure?")  -- 有OK和取消按钮。点OK返回true。
    prompt() -- 提示用户输入信息。

   4、状态栏   -- 是底部边界内的区域,用于向用户显示信息。
    可用window对象的两个属性设置它的值,即status和defaultStatus属性。
    window.defaultStatus = "You are surfing";
 
   5、时间间隔和暂停
    用window对象的setTimeout()方法设置暂停。
 setTimeout("alert("hello")",1000);
    在调用setTimeout()时,它创建一个数字暂停ID,可调用clearTimeout()暂停ID。

   6、历史
    可访问浏览器窗口的历史,用户访问过的站点列表。
    go()方法只有一个参数,即前进或后退的页面数。负数为后退。
    window.history.go(-1);   --后退一页。

  document对象:  -- window对象的属性,
   这个对象的独特之处是它是唯一一个既属于BOM又属于DOM的对象 。
  
  location对象: -- 表示载入窗口的URL,是BOM中最有用的对象之一。
    它是window对象和document对象的属性。
 
   location.reload()方法,可重新载入当前页面。
   location.reload(true) --从服务器载入当前页面。
   location.reload(false) --从本地缓存中重载。

 navigator对象: -- 检测浏览器及操作系统信息。

 screen对象: -- 用于获取某些用户屏幕的信息。屏幕的高度和宽度。

 
----------------------------
6、DOM基础

  DOM是针对XML的基于树的API。
  DOM是语言无关的,它的实现并不与javaScript或其它语言绑定。
  使用DOM:
  1、访问相关的节点:
  var temp = document.documentElement;
  2、检测节点类型:
 document.notetype,
  3、处理特性
     getNamedItem(name) -- 返回nodeName 属性值等于name的节点。
     removeNamedItem(name) -- 删除节点。
     setNamedItem(node) -- 将node添加到列表中。
     item(pos) -- 返回pos位置的节点。

  4、访问指定节点:
     getElementsByTagName() -- 返回一个包含所有标签名的集合。
     var temp = getElementsByTagName("img");

     getElementsByName() -- 用来获取所有name特性等于值的元素。
     getElementsById()  -- 返回id我等于指定值的元素。
 

创建和操作节点:
   1、创建新节点:
     createDocumentFragment(),createElement(),createTextNode();
     例:要使用DOM来添加下面代码到页面中。
     <p>hello</p>
      第一步 创建<p/>元素
        var oP = document.createElement("p");
      第二步 创建文本节点:
        var oText = document.createTextNode("hello");
      第三步 将文本节点添加到元素中
        oP.appendChild(oText);
      现在已创建一个<p>元素和一个文本节点,并将它们关联在一起,但必须将这个元素附加到document.body元素或其中任意子节点上。
        document.body.appendChild(oP); 

     removeChild() --删除节点
     replaceChild() -- 替换一个节点
     insertBefore() -- 让新消息出现在旧消息之前。

遍历DOM
  NodeIterator对象: 使用document对象的createNodeIterator()方法。
  有四个参数:  1、root 从树中那个节点开始搜索
  2、whatToShow 那些节点需要访问
  3、filter -- NodeFilter对象,用来过滤那些节点。
  4、entityReferenceExpansion --布尔值,表示是否需要扩展实体引用。
 
   var iterator = document.createNodeIterator(document,NodeFilder.SHOW_ALL,NULL,FALSE)
   iterator.nextNode() --向前搜索
   iterator.previousNode() --向后搜索。

  
  TreeWalker对象: --包含NodeIterator对象所有功能,添加了一些遍历方法。
    parentNode() -- 进入当前节点的父节点
    firstChild() -- 进入当前节点的第一个子节点
    lastChild()  -- 进入当前节点的最后子节点
    nextSibling()-- 进入当前节点的下一个兄弟节点
    previousSibling() -- 进入当前节点的前一个兄弟节点  

相关文章推荐

JavaScript高级编程(一)-基础部分笔记

基本概念 区分大小写 注释与java相同 变量如果不使用var声明,默认是全局变量 数据类型 5种基本类型 Boolean string null undefined number 3种引用...

HTML5 脚本编程——JavaScript高级程序设计笔记(13)

第16章 HTML5脚本编程 跨文档消息传送(cross-document messaging),有时候简称为XDM,指的是在来自不同域的页面间 传递消息。例如,www.wrox.com域中的页面与...

XMPP高级编程---使用Jquery和Javascript学习笔记

XMPP(eXtensiable Messaging and Presence Protocol,可扩展想消息处理和现场协议)是一种用来处理小型结构化数据段的协议。在此基础上可以用来构建 大规模即时...

XMPP高级编程---使用Jquery和Javascript学习笔记二

在搭建好openfire和了解了XMPP的基本知识后就可以来看书中的一些例子,书中的源代码可以在Github的下面连接中招到 https://github.com/metajack/profxmpp...

accp6.0 《使用javascript增强交互效果》学习笔记ch4 DOM高级编程

目标 1.使用getElement系列方法实现dom元素的查找和定位 2.使用Core Dom标准操作实现节点的增删改查 3.使用HTML DOM 特有操作实现HTML元素内容的修改   关...
  • amtea
  • amtea
  • 2011年09月05日 10:10
  • 1362

JavaScript高级程序设计(第三版)学习笔记(1)

学习笔记1 写在前面 已经有过几个月的比较集中的前端开发基础,然后觉得既然学一个东西那就要学好吧,所以看一下这个书。会对里面的东西记一下,但是并不会面面俱到,只是对我还不熟悉或者容易混淆的东西...
  • rbb317
  • rbb317
  • 2015年07月28日 15:31
  • 681

《JavaScript高级程序设计》读书笔记1

我看的是第3版,豆瓣链接如下:http://book.douban.com/subject/10546125/ 这本书真真写得好~强烈推荐初学Web前端的小伙伴阅读哦!整理了一些我认为重要且还没记住...

JavaScript高级程序设计学习笔记(1)

放在head中会先执行 如果执行慢页面出现空白影响页面加载 建议放在 body中。defer 页面解析后执行 浏览器立即加载 延迟执行 不一定按顺序执行 确保脚本直接互不依赖 在XHTML 文档中,要...

Ajax与Comet-JavaScript高级程序设计第21章读书笔记(1)

Ajax(Asynchronous Javascript + XML)技术的核心是XMLHttpRequest对象,即: XHR。虽然名字中包含XML,但它所指的仅仅是这种无须刷新页面即可从服务器端获...

《JavaScript高级程序设计》读书笔记--1-变量和数据类型

1. 变量 松散类型,所谓松散类型是指变量可以保存任何类型的数据。 一般可以定义为var message; var age=11; var name, sex="男";使用var操作符定义...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript高级编程笔记(1)
举报原因:
原因补充:

(最多只允许输入30个字)