ppk 谈 JavaScript

按有用程度 按页码先后 最新笔记

• 

  第320页

  L.ost (World's End No Girlfriend)

  第七章 鼠标事件、键盘事件，略过。 接口事件： change—只能用于表单域的元素，如下拉选框、复选框、单选框、文本输入框... contextmenu—用户在点击右键是促发，常被用于禁止用户查看页面源码 /代码内容已省略/ submit—提交表达动作，书上说用js的submit()方法提交表单不会触发，实际上可以。 resize—改变浏览器窗口大小时触发，scroll—滚动时触发。 事件处理器： (更多)

  第七章

  鼠标事件、键盘事件，略过。

  接口事件：

  change—只能用于表单域的元素，如下拉选框、复选框、单选框、文本输入框...

  contextmenu—用户在点击右键是促发，常被用于禁止用户查看页面源码

  document.oncontextmenu = function()
  {
      return false;
      }
  

  submit—提交表达动作，书上说用js的submit()方法提交表单不会触发，实际上可以。

  resize—改变浏览器窗口大小时触发，scroll—滚动时触发。

  事件处理器：

  var a = document.getElementById('somewhere');
  a.onclick = somefunc;
  

  方法不能加（），因为我们需要把函数somefunc传递给a.onclick,而不是传somefunc()的返回值。

  W3C模型：

  x.addEventListener('click',somefunc,ture);
  

  第一参数-事件名称，没有on前缀。

  第二参数-执行函数

  第三参数-(false)事件冒泡，(true)事件捕获

  微软模型：

  x.attachEvent('onclikc',somefunc);
  

  第一参数-事件名称，有on前缀

  第二参数-执行函数，没有圆括号

  高级事件注册模型都不是跨浏览器的，所以可以用到辅助函数，或者使用传统模型

  function addEventSimple(obj, evt, fn) {
      if (obj.addEventListener)
          obj.addEventListener(evt, fn, false);
      else if (obj.attachEvent)
          obj.attachEvent('on'+evt,fn);
  }
  
  function removeEventSimple(obj, evt, fn) {
      if (obj.removeEventListener)
          obj.removeEventListener(evt, fn, false);
      else if (obj.detachEvent)
          obj.detachEvent('on'+evt,fn)
  }
  

  事件捕获：从document开始，沿文档树向下游历，直到事件目标。

  事件冒泡：事件从目标开始，沿着文档树向上冒泡，直到document。

  而在W3C模型中，捕获和冒泡都会发生，事件捕获先发生，接着是冒泡。

  W3C stopPropagaction() 微软的 cancelBubble = true 来取消事件传播。

  在W3C和微软模型中，取得event对象的方式不同。

  function handleEvent(e)
  {
      var evt = e || window.event;
      //取得event对象
  }
  

  鼠标位置：(兼容性问题严重)

  offsetX offsetY;pageX,pageY.....

  鼠标按键：(兼容性问题严重)

  W3C：L=0,M=1,R=2; 微软：L=1,M=4,R=2

  键盘属性：

  键盘keyCode对应数字 ：http://www.cnblogs.com/analyzer/articles/1052299.html 获取目标对象：

  W3C与微软的不同

  function handleEvent(e)
      {
          var evt = e || window.event;
          var evtTarget = evt.target || evt.srcElement;
      }
  

  第8章 DOM

  document是文档节点，HMTL标签是元素节点，而标签中的文字则是文本节点，这点常被忘记。

  比如在取<p>ppk on javascript</p>中的文字时，应该这样

  document.getElementsByTagName('p')[0].firstChild.nodeValue;
  

  长途旅行：getElementByxxx()

  短途旅行：parentNode,firstChild,lastChild,previousSibling,nextSibling,childNodes[]

  节点属性：nodeName,nodeValue,nodeType...

  修改文档树：appendChild(),removeChild(),createElement()...

  createTextNode()不支持某些符号，可以使用innerHTML.

  cloneNode(),接受true,false两个可选值，true表示克隆包括所有子节点，fasle则不会。且不会克隆节点上的事件处理。

  使用innerHTML创建复杂的树结构。

  0级DOM，document.imgas[] 等同于document.getElementByTagName('img')

  表单域可以这样访问 document.forms[].elements[]

  DOM超空间：

  var x = document.getElementById('test');
  x.parentNode.removeChild(x);
  document.body.appendChild(x);
  

  test虽然被移除，但是x仍然指向这个元素，所以它仍可以被访问。且超空间内的元素不会具有父节点。

  第9章

  CSS 略

  第10章

  AJAX有关 (收起)

  2011-08-24 13:34:12   回应

  收藏

  推荐
• 

  第190页

  L.ost (World's End No Girlfriend)

  第一章的故事带过。 第二章 2002年，Stuart Langridge 发明了一个新词汇：无入侵脚本编程（unobstusive scripting）。 1.可用的，至少要给网站带来好处。 2.可访问的，即当js失效是，网页仍可访问与阅读。 3.它是容易实现的。 4.分离的，存在与js文件中，而不是散布在html的各个角落。 表现层（CSS）、结构层（HTML）、行为层（JS），为了代码的简介和维护，应该分离。 CSS中的hover，原生的js貌似没有，jquery可以实.. (更多)

  第一章的故事带过。

  第二章

  2002年，Stuart Langridge 发明了一个新词汇：无入侵脚本编程（unobstusive scripting）。

  1.可用的，至少要给网站带来好处。

  2.可访问的，即当js失效是，网页仍可访问与阅读。

  3.它是容易实现的。

  4.分离的，存在与js文件中，而不是散布在html的各个角落。

  表现层（CSS）、结构层（HTML）、行为层（JS），为了代码的简介和维护，应该分离。

  CSS中的hover，原生的js貌似没有，jquery可以实现。

  至于不支持js，没有鼠标，屏幕阅读器等问题，作者也考虑到很详尽。

  window.location下的href属性和replace()方法相似，但replace()将覆盖之前的历史记录。

  第三章

  浏览器没有提到chrome，看来翻译的时候chrome还不存在。

  谈到兼容性问题。记住一点，你的脚本永远不能在100%的浏览器中工作，永远。

  navigator.userAgent获取浏览器信息。

  第四章

  输入框字数统计，relatedElement属性，当文本框输入时，h2同时更新

  var db_comment = document.getElementsByName('comment')[0];
  db_comment.addEventListener('keyup',function(){
  	currentLength = this.value.length;
  	var maxLength = 128;
  	if(currentLength > maxLength){
  		alert('字数超出');
  		}
  	this.relatedElement.firstChild.nodeValue = maxLength - currentLength;
  	},true);
  GM_addStyle('.countor{font-weight:600;font-size:14;color:#999999;margin:5px 0 0 5px;}')
  var countor = document.createElement('h2');
  countor.className = 'countor';
  countor.innerHTML = '128';
  db_comment.parentNode.insertBefore(countor,db_comment.nextSibling);
  db_comment.relatedElement = countor;
  

  第五章

  ===与！== 严格的判断符，要求要有相同的数据类型。

  变量前 var 为局部变量，否则为全局变量。

  Array的方法：push,shift,pop,unshift

  第六章

  window对象是BOM的核心，包含的了document对象。

  窗口的属性，window和self都指向了窗口本身。status，就是状态栏。过去常常被用来装酷。还记得大学一次测验还写过在状态栏上的文字走马灯效果，不过现代浏览器大都已经不再显示状态栏了。

  以下代码，可以绕过简单的窗口过滤器，打开恶心的新窗口。

  var popup
  document.onclick = function(){
      popup = window.open('url','name','arguments');
      }
  

  window.location，包含页面当前位置信息。window.history,页面历史记录。screen，包含窗体有关信息。 (收起)

  2011-08-22 16:53:23   回应

  收藏

  推荐
• 

  第60页

  buaastorm (用心做东西)

  不要使用浏览器检测技术，它对你来说没有好处。 (更多)

  不要使用浏览器检测技术，它对你来说没有好处。 (收起)

  2011-06-27 13:19:04   回应

  收藏

  推荐

• 

  第5页

  Love Scarlett (电影起码要看到100部吧)

  前言第五页。 4B，是第四章Section B？ (更多)

  前言第五页。

  4B，是第四章Section B？ (收起)

  2011-04-27 16:16:11   回应

  收藏

  推荐
• 

  第50页

  gogu (符合灵魂的渴望)

  另一方面，与CSS比起来，JavaScript是一个没有bug的净土。JavaScript目前的兼容性问题大概相当于在CSS开发中不断冒出来的问题中的中级水平。CSS开发者已经具备了成为高效的Javascript浏览器驯兽师的基本的心态。 (更多)

  另一方面，与CSS比起来，JavaScript是一个没有bug的净土。JavaScript目前的兼容性问题大概相当于在CSS开发中不断冒出来的问题中的中级水平。CSS开发者已经具备了成为高效的Javascript浏览器驯兽师的基本的心态。

  (收起)

  2011-05-17 19:44:25   回应

  收藏

  推荐
• 

  第60页

  buaastorm (用心做东西)

  不要使用浏览器检测技术，它对你来说没有好处。 (更多)

  不要使用浏览器检测技术，它对你来说没有好处。 (收起)

  2011-06-27 13:19:04   回应

  收藏

  推荐

• 

  第320页

  L.ost (World's End No Girlfriend)

  第七章 鼠标事件、键盘事件，略过。 接口事件： change—只能用于表单域的元素，如下拉选框、复选框、单选框、文本输入框... contextmenu—用户在点击右键是促发，常被用于禁止用户查看页面源码 /代码内容已省略/ submit—提交表达动作，书上说用js的submit()方法提交表单不会触发，实际上可以。 resize—改变浏览器窗口大小时触发，scroll—滚动时触发。 事件处理器： (更多)

  第七章

  鼠标事件、键盘事件，略过。

  接口事件：

  change—只能用于表单域的元素，如下拉选框、复选框、单选框、文本输入框...

  contextmenu—用户在点击右键是促发，常被用于禁止用户查看页面源码

  document.oncontextmenu = function()
  {
      return false;
      }
  

  submit—提交表达动作，书上说用js的submit()方法提交表单不会触发，实际上可以。

  resize—改变浏览器窗口大小时触发，scroll—滚动时触发。

  事件处理器：

  var a = document.getElementById('somewhere');
  a.onclick = somefunc;
  

  方法不能加（），因为我们需要把函数somefunc传递给a.onclick,而不是传somefunc()的返回值。

  W3C模型：

  x.addEventListener('click',somefunc,ture);
  

  第一参数-事件名称，没有on前缀。

  第二参数-执行函数

  第三参数-(false)事件冒泡，(true)事件捕获

  微软模型：

  x.attachEvent('onclikc',somefunc);
  

  第一参数-事件名称，有on前缀

  第二参数-执行函数，没有圆括号

  高级事件注册模型都不是跨浏览器的，所以可以用到辅助函数，或者使用传统模型

  function addEventSimple(obj, evt, fn) {
      if (obj.addEventListener)
          obj.addEventListener(evt, fn, false);
      else if (obj.attachEvent)
          obj.attachEvent('on'+evt,fn);
  }
  
  function removeEventSimple(obj, evt, fn) {
      if (obj.removeEventListener)
          obj.removeEventListener(evt, fn, false);
      else if (obj.detachEvent)
          obj.detachEvent('on'+evt,fn)
  }
  

  事件捕获：从document开始，沿文档树向下游历，直到事件目标。

  事件冒泡：事件从目标开始，沿着文档树向上冒泡，直到document。

  而在W3C模型中，捕获和冒泡都会发生，事件捕获先发生，接着是冒泡。

  W3C stopPropagaction() 微软的 cancelBubble = true 来取消事件传播。

  在W3C和微软模型中，取得event对象的方式不同。

  function handleEvent(e)
  {
      var evt = e || window.event;
      //取得event对象
  }
  

  鼠标位置：(兼容性问题严重)

  offsetX offsetY;pageX,pageY.....

  鼠标按键：(兼容性问题严重)

  W3C：L=0,M=1,R=2; 微软：L=1,M=4,R=2

  键盘属性：

  键盘keyCode对应数字 ：http://www.cnblogs.com/analyzer/articles/1052299.html 获取目标对象：

  W3C与微软的不同

  function handleEvent(e)
      {
          var evt = e || window.event;
          var evtTarget = evt.target || evt.srcElement;
      }
  

  第8章 DOM

  document是文档节点，HMTL标签是元素节点，而标签中的文字则是文本节点，这点常被忘记。

  比如在取<p>ppk on javascript</p>中的文字时，应该这样

  document.getElementsByTagName('p')[0].firstChild.nodeValue;
  

  长途旅行：getElementByxxx()

  短途旅行：parentNode,firstChild,lastChild,previousSibling,nextSibling,childNodes[]

  节点属性：nodeName,nodeValue,nodeType...

  修改文档树：appendChild(),removeChild(),createElement()...

  createTextNode()不支持某些符号，可以使用innerHTML.

  cloneNode(),接受true,false两个可选值，true表示克隆包括所有子节点，fasle则不会。且不会克隆节点上的事件处理。

  使用innerHTML创建复杂的树结构。

  0级DOM，document.imgas[] 等同于document.getElementByTagName('img')

  表单域可以这样访问 document.forms[].elements[]

  DOM超空间：

  var x = document.getElementById('test');
  x.parentNode.removeChild(x);
  document.body.appendChild(x);
  

  test虽然被移除，但是x仍然指向这个元素，所以它仍可以被访问。且超空间内的元素不会具有父节点。

  第9章

  CSS 略

  第10章

  AJAX有关 (收起)

  2011-08-24 13:34:12   回应

  收藏

  推荐
• 

  第190页

  L.ost (World's End No Girlfriend)

  第一章的故事带过。 第二章 2002年，Stuart Langridge 发明了一个新词汇：无入侵脚本编程（unobstusive scripting）。 1.可用的，至少要给网站带来好处。 2.可访问的，即当js失效是，网页仍可访问与阅读。 3.它是容易实现的。 4.分离的，存在与js文件中，而不是散布在html的各个角落。 表现层（CSS）、结构层（HTML）、行为层（JS），为了代码的简介和维护，应该分离。 CSS中的hover，原生的js貌似没有，jquery可以实.. (更多)

  第一章的故事带过。

  第二章

  2002年，Stuart Langridge 发明了一个新词汇：无入侵脚本编程（unobstusive scripting）。

  1.可用的，至少要给网站带来好处。

  2.可访问的，即当js失效是，网页仍可访问与阅读。

  3.它是容易实现的。

  4.分离的，存在与js文件中，而不是散布在html的各个角落。

  表现层（CSS）、结构层（HTML）、行为层（JS），为了代码的简介和维护，应该分离。

  CSS中的hover，原生的js貌似没有，jquery可以实现。

  至于不支持js，没有鼠标，屏幕阅读器等问题，作者也考虑到很详尽。

  window.location下的href属性和replace()方法相似，但replace()将覆盖之前的历史记录。

  第三章

  浏览器没有提到chrome，看来翻译的时候chrome还不存在。

  谈到兼容性问题。记住一点，你的脚本永远不能在100%的浏览器中工作，永远。

  navigator.userAgent获取浏览器信息。

  第四章

  输入框字数统计，relatedElement属性，当文本框输入时，h2同时更新

  var db_comment = document.getElementsByName('comment')[0];
  db_comment.addEventListener('keyup',function(){
  	currentLength = this.value.length;
  	var maxLength = 128;
  	if(currentLength > maxLength){
  		alert('字数超出');
  		}
  	this.relatedElement.firstChild.nodeValue = maxLength - currentLength;
  	},true);
  GM_addStyle('.countor{font-weight:600;font-size:14;color:#999999;margin:5px 0 0 5px;}')
  var countor = document.createElement('h2');
  countor.className = 'countor';
  countor.innerHTML = '128';
  db_comment.parentNode.insertBefore(countor,db_comment.nextSibling);
  db_comment.relatedElement = countor;
  

  第五章

  ===与！== 严格的判断符，要求要有相同的数据类型。

  变量前 var 为局部变量，否则为全局变量。

  Array的方法：push,shift,pop,unshift

  第六章

  window对象是BOM的核心，包含的了document对象。

  窗口的属性，window和self都指向了窗口本身。status，就是状态栏。过去常常被用来装酷。还记得大学一次测验还写过在状态栏上的文字走马灯效果，不过现代浏览器大都已经不再显示状态栏了。

  以下代码，可以绕过简单的窗口过滤器，打开恶心的新窗口。

  var popup
  document.onclick = function(){
      popup = window.open('url','name','arguments');
      }
  

  window.location，包含页面当前位置信息。window.history,页面历史记录。screen，包含窗体有关信息。 (收起)

  2011-08-22 16:53:23   回应

  收藏

  推荐
• 

  第60页

  buaastorm (用心做东西)

  不要使用浏览器检测技术，它对你来说没有好处。 (更多)

  不要使用浏览器检测技术，它对你来说没有好处。 (收起)

  2011-06-27 13:19:04   回应

  收藏

  推荐