必威体育下载克里斯蒂安·海尔曼

您当前正在浏览必威体育下载克里斯蒂安·海尔曼11月的博必威体育简介客档案,2007。

11月存档,二千零七

这是官方的,我是精灵

星期四,11月29日,二千零七

不,我不是说去年的精灵自己病毒性害虫,但是关于成为一个优秀的学习辅导者或者必威体育下载精灵.这是一个培训师的培训,它将你对教学和培训的许多信念从内到外转变,这样做可以让你成为一个更好的培训师。我通常不谈论私人事务,很抱歉,如果你还期待其他的JS帖子,但我真的很想谈论这个问题,因为我认为应该有更多的人去追求betway体育官方网它,我很自豪能够做到这一点。

这个精灵课程由英国Matrix42公司举办有很多很酷的好处:

这个 精灵课程符合国家学习和发展职业标准。必威体育下载
青铜评估被认为是信息技术培训学院专业会员资格的证据,由认可 光学字符识别国家资格框架第3级等效
这也是英国计算机学会(BSC)认可的少数资格之一 ACTT国家资格框架中的4级资格

我不知道这意味着什么,但我从课程中学到的基本上是:

  • 教你如何让学习者自己寻找解决方案,而不是听你的(必威体育下载从而记住更多)
  • 使您了解不同类型的学习者,以及如何将信息传达给他们,以便于接受和坚持。必威体育下载
  • 教你计划一个完整的学习活动,并在这些活动中为参与者提供必威体育下载尽可能有用的课程。
  • 让你意识到,你可以在没有电脑的情况下教授非常复杂的技术课程,也可以在PowerPoint面前胡闹。

我个人的成功是摆脱了通常的演讲者,在需要的时候换成教练。不是所有发表公开演讲和写书的人都是好的培训师,事实上,从一个到另一个是相当的一步,你需要在你的头脑中设置一个巨大的开关。

在我的案例中,我把我的第一次实践测试搞砸了,正是因为这个原因:我更像是一个演讲者,而不是一个让我匆忙参加的培训师。沉默不是问题,如果你和参加培训的人都没有,这并不意味着什么都没有发生。在参与者的头脑中,有很多事情正在发生。我改变了我的步伐和姿势,瞧,我第二次带着鲜艳的色彩走过。

不管怎样,我为成为一个精灵,我会尽我最大的努力使用这种新的方法和想法,一旦我可以包另一个研讨会或更长的培训课程。

为大型团队规划JavaScript–草稿和讲义版本

星期三,11月28日,二千零七

我刚刚找到了@mediaajax演示文稿的原始草稿。我放弃了它,因为它太长了,一个小时的谈话,我不知道该怎么做,迪奇:

希望它在某种程度上有用。

对于“普通开发者”来说,javascript快捷方式符号不应该是黑色魔法。

星期二,11月27日,二千零七

当发布有关JavaScript开发的文章时,您会遇到许多由发布者和编辑器设置的规则。这是一件很好的事情,因为它让我们的作者保持警觉,让我们更加了解成功出版的真正意义。然而,这也会非常烦人,尤其是当老一套的成语死板的时候。其中之一是“普通的开发人员”不太了解JavaScript快捷符号。

现在,如果你是“普通开发者”,请给我5分钟的时间来完成以下任务:您将了解更多的代码,并且花费更少的时间编写自己的脚本。

数组快捷符号-它是一个时髦的方

我的第一个bugbear是数组。这些在JavaScript中非常有用并且无所不在,但我仍然发现有人编写了复杂的东西,比如:

var链接= 新的 数组链接[] = 'http://cuteoverload.com'链接[1个] = 'http://icanhascheezburger.com'链接[] = 'http://pencilsatdawn.wordpress.com'链接[] = 'http://apelad.blogspot.com'
/…令人作呕…

这是复杂的(您必须为每个项重复数组名),而且维护起来也很困难。当您更改订单(如果订单很重要)时,您需要更改号码,也是。没有必要,因为编号是自动为您完成的。您只需使用方括号:

var链接= [
  'http://cuteoverload.com'
  'http://icanhascheezburger.com'
  'http://pencilsatdawn.wordpress.com'
  'http://apelad.blogspot.com' //<--最后一个,没有逗号!
]

从视觉上看,这更明显,也是。这个缩进可以很容易地监视数组的起始位置和结束位置。更少的线路噪音。

注意,您需要用逗号分隔每个项目,但要确保最后一项没有尾随逗号。甚至可以这样嵌套数组:

var链接= [
  'http://cuteoverload.com'
  'http://icanhascheezburger.com'
  [一百二百二十“福”]
  'http://pencilsatdawn.wordpress.com'
  'http://apelad.blogspot.com' //<--最后一个,没有逗号!
]

在那张纸条上,还有一个技巧:向数组中添加一个新项,您可以使用PUP()方法或使用长度财产:

链接。'http://dailyppy.com'链接[链接。长度] = 'http://bigeydeer.wordpress.com'

关联数组-对象管理组织!小马!

一直坚持的一个神话是,javascript有一个神奇的东西叫做关联数组。这些允许您不仅给项目编号,而且给它们命名!您可以找到如下示例:

var链接= 新的 数组链接[“可爱超载”] = 'http://cuteoverload.com'链接[“我可以吃奶酪汉堡包”] = 'http://icanhascheezburger.com'链接[“黎明的铅笔”] = 'http://pencilsatdawn.wordpress.com'链接[“霍波托比亚”] = 'http://apelad.blogspot.com'

这是最高程度的背叛。这是一个令人困惑的javascript特性,因为您在这里创建的不是真正的数组,而是一个物体。需要证据吗?做一个警报(链接类型)或尝试警报(链接[1]).

对象快捷方式(文字)表示法-获得卷曲。

所谓的关联数组实际上是对象,这意味着您还将找到其他认真对待前面示例的脚本,并使用以下脚本:

var链接= 新的 对象链接[“可爱超载”] = 'http://cuteoverload.com'链接[“我可以吃奶酪汉堡包”] = 'http://icanhascheezburger.com'链接[“黎明的铅笔”] = 'http://pencilsatdawn.wordpress.com'链接[“霍波托比亚”] = 'http://apelad.blogspot.com'

我们又有太多的重复。对于对象,你有一个对象文字符号作为快捷方式,基本上是用大括号:

var链接= {
  “可爱超载”  'http://cuteoverload.com'
  “我可以吃奶酪汉堡包”  'http://icanhascheezburger.com'
  “黎明的铅笔”  'http://pencilsatdawn.wordpress.com'
  “霍波托比亚”  'http://apelad.blogspot.com' //<——再次,禁止逗号!
}

分号被替换为康瓦塔逗号(快乐)斯图尔特?)(除了最后一个你需要省略的符号)等号变成冒号。如果属性(冒号左边的内容)中没有任何空格,甚至可以去掉引号:

var克里斯= {头发 “红色”年龄 三十二城市 伦敦
}

您可以使用对象属性当他们没有任何空间或对象[属性]当他们有空间的时候。例如:

var链接= {
  “可爱超载”  'http://cuteoverload.com'
  “我可以吃奶酪汉堡包”  'http://icanhascheezburger.com'
  “黎明的铅笔”  'http://pencilsatdawn.wordpress.com'
  “霍波托比亚”  'http://apelad.blogspot.com' //<——再次,禁止逗号!
}警觉的链接[“我可以吃奶酪汉堡包”]警觉的链接。臀部斜视

简单的if-else语句-使用三元符号询问和定义

您可以显著缩短简单的if语句。简单来说,我指的是一个if语句,它指定如下两个值之一:

  var裕桂
  如果城市= = 伦敦{裕桂= “克里斯”
  } 其他的 {裕桂= “埃里克”
  }

再一次,那里有很多重复。三元符号解决了这个问题:

var裕桂=城市= = 伦敦  “克里斯”  “埃里克”

那里有很多等号。也许一些括号会让它更清楚:

var裕桂= 城市= = 伦敦  “克里斯”  “埃里克”

这是怎么回事?定义变量裕桂给它赋值。然后你有一个声明,在这种情况下,变量的比较城市如果它等于字符串伦敦(==值和类型的测试,比==)安全得多。

然后你用问号问这个问题是否正确。冒号左边的选项是满足条件时问题的答案,而冒号右边的选项是不满足条件时问题的答案。任何可能是对或错的条件都可以放在括号内。

var方向= X<最大值  “左”  “对”

使用默认运算符提供回退选项

我最不想谈的是双管()默认运算符。当你想确定某个东西是用默认值设置的时候,这个非常有用。以下结构是不应再出现的内容:

  var部分=文件。按ID获取元素“特殊”
  如果部分{部分=文件。按ID获取元素“主要”
  }

再一次,无用的重复,同样可以写为:

  var部分=文件。按ID获取元素“特殊” γ文件。按ID获取元素“主要”

如果第一个未定义,第二个被指定为节的值。

谢谢你的时间!

我希望这有助于“普通的开发人员”理解如何在不降低可读性的情况下缩短JS。如果你想要更多关于这些商品的详细信息,看看道格拉斯·克罗克福德关于这件事的文章:

巴黎网络2007年不引人注目的javascript研讨会记录

星期五,11月23日,二千零七

这是一个循序渐进的描述,并附有“低调的javascript”研讨会的代码示例,该研讨会在巴黎2007年举行。法国。

您可以在此处下载此中使用的所有文件:parisweb2007_工作坊.zip

在研讨会开始时,我做了两个承诺:

  • 了解javascript的参与者会发现他们经常编写过多的代码
  • 不了解javascript的参与者将学习如何准备和帮助JS开发人员构建不引人注目的产品。必威体育下载

第一步:分析任务和HTML

我们从一开始HTML模板(01_模板.html)并进行分析。我们指出,模板不是最佳的,因为它包含嵌入的CSS在直播产品中应该单独CSS文件。我们还指出,像这样开始是可以的,因为它使维护更容易。

模板是一个链接列表(目录),指向页面下方的一组标题。其想法是,访问者可以单击目录(TOC)并向下移动文档。“返回顶部”链接允许他们再次返回。这个TOCID为“TOC”,后面链接一个“back”类。

我们有一块CSS在文档的头部和正文末尾的脚本块中。在主体的末尾有一个脚本块可以确保HTML我们希望在我们的javascript被执行时可以使用它。

我们希望在研讨会中实现的任务是将此模板转换为一个动态界面,该界面隐藏所有内容,只显示连接到链接的内容。TOC当访问者点击它时。

第二步:了解浏览器问题并将其用于我们的优势

问题是我们必须知道在单击链接时要显示和隐藏哪个部分。逻辑连接很简单:在TOC具有一个href属性,该属性指向它所连接到的标题中的ID。我们可以在脚本中使用它。问题是我们不知道标题后面的内容。我们需要一种方法来确保我们可以将需要隐藏的所有元素分组到一个元素中。

帮助我们的是一个鲜为人知的Internet Explorer错误如果使用键盘通过指向页面内锚定点的链接进行制表,则页面会跳到该位置,但是键盘焦点不会随它移动。最简单的解决方法是将锚定元素嵌套在哈斯布局.在我们的案例中,我们添加了div每个标题和内容部分周围的元素,并将其宽度设置为100%()02页iefix.html)。

第三步:脚本

我们拥有一切HTML我们需要,页面已经做了我们想做的。现在我们开始考虑如何覆盖默认行为并使其对我们有用。我们要做的主要改变是:

  • 隐藏所有内容节
  • 当我们只显示一个内容部分时,隐藏不需要的后链接
  • 在中显示与链接连接的内容节TOC当它被点击时

我们讨论了这样做的不同可能性(循环通过DOM,获取的所有子元素div并将其style.display值设置为“无”等)。然后,我建议到目前为止最简单的方法是编写一个简单的javascript,在JS可用时向文档体添加一个类,并定义CSS这隐藏了必要的元素。这样我们就可以轻松地CSS做所有沉重的事DOM遍历,我们为设计人员提供了一个钩子,以使非javascript和javascript版本的样式不同。

javascript:


document.body.classname='js';

这个CSS


/*依赖于脚本的样式*/

Bydi.js*的TOC {
浮动:左;
宽度:20%;
右边距:5%;
}

By.js div {
浮动:正确;
宽度:70%;
}

body.js div,body.js.back_
位置:绝对;
左:-99 99 px;
}

然后我们发现这不安全,因为可能已经有一个类应用于body元素,这意味着我们需要检查它,并在需要时附加新类。


document.body.classname=(document.body.classname+“”'“)+'js';

这确保所有必要的元素最初都被隐藏(03隐藏样式.html)。我们还指出,我们使用左键技术而不是用显示隐藏内容:无,因为这可以确保屏幕阅读器仍然可以访问内容。

事件处理

这是我们用JavaScript和DOM.现在,我们需要了解如何显示单击适当链接时要显示的部分。我们需要为此使用事件处理,并将事件侦听器应用于不同的元素。最初,参与者考虑在每一个事件中添加一个点击事件监听器,但在经历了使用人豚鼠(human guinearigs)进行事件处理的想法之后。日常活动视频)我们意识到只需要将单个事件处理程序应用于TOC使用事件委托其余的。

我们使用了W3C事件处理方法,导致以下代码(04X事件):

CSS


body.js Div.Show_
职位:相对;
左:0;
}

JavaScript:


document.body.classname=(document.body.classname+“”'“)+'js';
var toc=document.getElementByID(“toc”);
如果(TOC){
功能切换(E)
var t=e.目标;
if(t.nodename.tolowercase()='a')
var sectionid=t.getattribute('href').split('')[1];
var节=document.getElementByID(sectionID);
如果(节){
section.parentnode.classname='显示';
}

}
};
toc.addEventListener('click',toggle,false);
};

这确保了我们可以在单击元素时实际显示它们,但也有一个问题,即我们没有隐藏以前显示的部分。为此,我们需要存储信息并在调用toggle()时重置它。我提到过一个提示,使用对象来存储接口的状态总是一个好计划,因为这意味着您可以保留尽可能多的属性,而不需要引入更多的变量。更改只是将节存储在当前对象中的几行,并在已经有一个集合时移除类(05撊keepingstate.html):


document.body.classname=(document.body.classname+“”'“)+'js';
var toc=document.getElementByID(“toc”);
如果(TOC){
无功电流=
功能切换(E)
var t=e.目标;
if(t.nodename.tolowercase()='a')
if(当前节)
current.section.classname='';
};
var sectionid=t.getattribute('href').split('')[1];
var节=document.getElementByID(sectionID);
如果(节){
section.parentnode.classname='显示';
current.section=section.parentnode;
};
};
};
toc.addEventListener('click',toggle,false);
};

就课程的(非常基本的)功能而言(我们只有一个小时),最后要记住的几点是让这个代码与其他脚本一起工作,以及如何使其更容易维护。

脚本的名称间距。

使脚本与其他人一起工作的最简单技巧是使用模块模式并将其嵌套在分配给匿名函数()的变量中。06撏namespaced.html):


var sectioncollapse=function()
document.body.classname=(document.body.classname+“”'“)+'js';
var toc=document.getElementByID(“toc”);
如果(TOC){
无功电流=
功能切换(E)
var t=e.目标;
if(t.nodename.tolowercase()='a')
if(当前节)
current.section.classname='';
};
var sectionid=t.getattribute('href').split('')[1];
var节=document.getElementByID(sectionID);
如果(节){
section.parentnode.classname='显示';
current.section=section.parentnode;
};
};
};
toc.addEventListener('click',toggle,false);
};
}();

使维护更容易

为了便于下一个开发者从我们这里接管,然后,我们同意脚本本身不包含任何ID或类名,而是将它们移到自己的配置对象中。我们能覆盖的最后一步是移动CSS把javascript放到自己的文档中,我们的示例完成了(07L):


var sectioncollapse=function()

//开始配置–在此处编辑
var CONFIG={
jsAvailableClass:'js',
展示类:'show',
ToCID:“Toc”
}

//结束配置

document.body.classname=(document.body.classname+“”,“””,+config.jsavailableclass;
var toc=document.getElementByID(config.tocid);
如果(TOC){
无功电流=
功能切换(E)
var t=e.目标;
if(t.nodename.tolowercase()='a')
if(当前节)
current.section.classname='';
};
var sectionid=t.getattribute('href').split('')[1];
var节=document.getElementByID(sectionID);
如果(节){
section.parentnode.classname=config.showclass;
current.section=section.parentnode;
};
};
};
toc.addEventListener('click',toggle,false);
};
}();

结论

我希望参加者能了解到你如何CSSJavascript可以协同工作,并学习了必威体育下载一些使他们的javascript更容易维护的方法。我个人希望大多数人在开始代码之前就开始分析问题:)

为更大的团队规划JavaScript和Ajax,马的生动形象,为图书馆和许多优秀的演讲者提供一种声音—这是@mediaajax 2007

星期三,11月21日,二千零七

我刚刚结束了米提阿贾克斯饮料,从上星期三开始,我处理了大约670封邮件,这些邮件在我的收件箱里积累了下来,现在有时间谈谈我在那里的经历。

首先,以下是我演讲的幻灯片:

我没有涉及到很多技术问题,但是我试图说服一些人认识到在团队中使用JavaScript的方式是开发的最重要的部分。编写令人惊叹的代码并不重要,但相反,更重要的是要通力合作,确保您能够快速实现预算。这是唯一阻止我们培训和发展开发人员的事情——我们忙于赶上估计和交付。相反,我们应该集中精力通过合作而不是竞争或者成为团队其他人的“javascript英雄”,把乐趣带回到开发中。

我得到了一些很好的反馈,我很高兴得到更多,所以如果你去过那里,告诉我吧。更重要的是,如果你考虑接受一些想法,我很想听听你周围的情况。

一般来说,我不得不说我很喜欢这次会议。起初,我对无线技术的缺乏感到失望,但我想,最终它使人们更加专心地听扬声器的声音。

我的爱好:

  • 阿贾贤的迪翁和本统治着阿贾克斯,并将目前发生的事情与他们两年前起草的愿望清单进行了比较。这是一个有趣的主题演讲,但我不太确定CSS正在痛击。它是非常有意思的是看到了CSS人们想用他们的技术做一切,很多核心的编码人员只是不摸索CSS.嘿,未来是混合动力车,发挥技术的优势,让关心技术的人做到这一点。
  • Derek Featherstone的“Ajax增强型Web应用程序的现实世界可访问性”谈到了我们在创建树菜单等丰富的客户端应用程序模块时遇到的问题,以及我们如何以可访问的方式进行这些操作失败。这是非常有趣的,他有一些好的现实世界的照片,以推动他的积分回家。我个人最喜欢的是讽刺的是有一个轮椅坡道,由于背景的原因,没有通向任何地方。
  • 斯图亚特·兰格里奇的《如何摧毁网络》既独特又反其道而行之。他提出了魔鬼的主张,即我们要以最突兀和最夸张的方式构建网络产品,否则人们会用所有的带宽来观看马匹的色情作品(他的话,不是我的)。他有很多很好的观点(不要这样做,因为它留下了太多的带宽),这让我想起文森特·弗兰德的网络开发教学方法
  • JohnResig对jQuery原型设计的介绍展示了如何在分析了HTML结构。这对于向产品人员展示变更的感觉非常酷,我以前用GreaseMonkey脚本做过。
  • Dojo的Alex Russell给了我们一些食物,让我们思考图书馆应该如何成为一个声音,在实现方面讨论相同的想法和重叠,以确保我们都以相同的方式帮助开发人员,而不是竞争。我完全同意。
  • BrendanEich展示了“新的javascript”的想法,而DouglasCrockford解释了为什么“现在”的javascript实际上是一种很酷的语言。
  • DannWebb展示了如何使用Javascript的一些更复杂的部分,比如原型和巧妙地使用参数数组来增强语言并使用它进行元编程。

总之,我很高兴能参加这个会议,如果你想了解JS,我认为它是最好的会议之一。必威体育下载我确实听到人们抱怨说阿贾克斯没有那么多,不过。对我来说,Ajax是一种方法,不一定是一套固定的技术,为了涵盖整个方面,您需要同时解释客户机和服务器架构。真的,这本可以做得更多,我也缺乏Flash开发人员的覆盖范围,因为他们已经使用了JavaScript2向我们承诺的很多东西。

总的来说,我有几个伟大的发现:

  • 不要坐在布鲁斯·劳森旁边,Chris Willison和Stuart Langridge。这是邪恶的,但也非常有趣。
  • 很高兴看到参与竞争图书馆开发的人都想要同样的东西,而且真的不介意其他竞争对手的成功。把这个拿下来,粉丝和邮件列表:我们都想帮助你,认为你应该使用最适合你的东西,这不一定是我们的东西。
  • 如果调用来自Ajax而不是普通的页面提交,那么在服务器端组件中识别的最佳方法是检查超文本传输协议标题。大多数图书馆都会发送一个定制的标识符!
  • 在你离开威斯敏斯特地区的火车之前,一定要检查一下女王是否有禧年。

我希望去的人也很开心,其他人也会考虑参加下一次伦敦地区的会议。这是非常有趣和物有所值的。