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

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

11月存档,2007

它是官方的,我是精灵

星期四,11月29日,2007

不,我不是说去年的精灵自己病毒性害虫而是成为一个优秀的学习促进者必威体育下载精灵.这是一个培训师的培训,它将你对教学和培训的许多信念从内到外转变,这样做可以让你成为一个更好的培训师。我在这里一般不谈私事,如果你期待另一个JS的帖子,但我真的很想谈谈这个,因为我认为应该有更多的人去做,我很betway体育官方网自豪我做到了。

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

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

我不知道这意味着什么但我从这门课中学到的是

  • 教你如何让学习者自己找到解决方案,而不是听你的(必威体育下载从而记住更多)
  • 使您了解不同类型的学习者,以及如何将信息传达给他们,以便于接受和坚持。必威体育下载
  • 教您计划一个完整的学习事件和会议,在那些是尽可能有用的必威体育下载参与者
  • 让你意识到你可以教授真正复杂的技术课程而不用电脑或在幻灯片前胡闹。

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

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

无论如何,我为成为一个精灵,我将尽我最大的努力使用这种新的方法和想法,一旦我可以包另一个研讨会或更长时间的培训会议。

为更大的团队规划JavaScript -草稿和讲义版本

周三,11月28日,2007

我刚刚找到了@mediaAjax演示文稿的原始草稿。我把它扔了,因为它太长了一个小时的谈话,我不知道什么是沟:

希望它能有用。

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

星期二,11月27日,2007

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

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

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

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

var链接= 新的 数组(;链接(0] = “http://cuteoverload.com”;链接(] = 'http://icanhascheezburger.com';链接(2] = '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',
  (One hundred.,200,二十,'foo'],
  'http://pencilsatdawn.wordpress.com',
  “http://apelad.blogspot.com” // <——最后一个,禁止逗号!
];

请注意,这里有另一个技巧:要向数组添加新项,您可以使用push()方法或使用长度财产:

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

关联数组-我的天啊!矮种马!

一直坚持的一个神话是,javascript有一个神奇的东西叫做关联数组。这些不仅可以给物品编号,还可以给它们命名!你可以找到这样的例子:

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

这是最高程度的背叛。这是一个令人困惑的JavaScript特性,因为您在这里创建的不是真正的数组,但一个对象。想要证据?——做一个警报(链接类型)或者尝试警报(链接〔1〕).

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

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

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

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

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

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

var克里斯= {头发: “红色”,年龄: 32,城市: “伦敦”
}

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

var链接= {
  “可爱超载” : “http://cuteoverload.com”,
  “我可以吃奶酪汉堡包” : 'http://icanhascheezburger.com',
  “黎明的铅笔” : 'http://pencilsatdawn.wordpress.com',
  “Hobotopia” : “http://apelad.blogspot.com” / / <——再一次,没有逗号!
};警报(链接(“我可以吃奶酪汉堡包”];警报(链接。臀部斜视;

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

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

  var尤伊古伊;
  如果(城市= = “伦敦”{尤伊古伊= “克里斯”;
  } 其他的 {尤伊古伊= “埃里克”;
  };

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

var尤伊古伊=城市= = “伦敦” 吗? “克里斯” : “埃里克”;

那里有很多等号。也许加上括号会更清楚:

var尤伊古伊= (城市= = “伦敦” 吗? “克里斯” : “埃里克”;

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

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

var方向= (X<马克斯 吗? “左” : '右';

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

我最不想谈的是双管()默认运算符。当您想要确保某些东西被设置为默认值时,这个非常有用。下面的结构不应该再出现了:

  var部分=文件。GETeleMyByID(“特殊”;
  如果(!部分{部分=文件。GETeleMyByID(“主要”;
  }

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

  var部分=文件。GETeleMyByID(“特殊” γ文件。GETeleMyByID(“主要”;

如果第一个未定义,第二个值作为值分配给section。

谢谢你的时间!

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

低调JavaScript的巴黎Web 2007研讨会记录

星期五,11月23日,2007

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

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

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

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

第一步:分析任务和HTML

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

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

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

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

第二步:了解浏览器问题并利用它们

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

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

第三步:脚本

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

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

我们讨论了这样做的不同可能性(循环通过国内,获取的所有子元素分区并将其style.display值设置为“无”等)。然后我提出,到目前为止最简单的方法是编写一个简单的JavaScript,在JS可用时将类添加到文档主体中并进行定义CSS这隐藏了必要的元素。那样的话我们可以很容易地让CSS做所有沉重的事国内通过遍历,我们为设计人员提供了一个钩子来以不同的方式设计非JavaScript和JavaScript版本。

JavaScript:


document.body.classname='js';

CSS:


/*脚本依赖样式*/

body.js # toc {
浮动:左;
宽度:20%;
右边距:5%;
}

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

BODY.JS DIV,BODY.JS.背面{
位置:绝对;
左:-9999 px;
}

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


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

这确保了所有必要的元素最初都是隐藏的(03隐藏样式.html)我们还指出,我们使用了off-left技术,而不是使用display来隐藏内容:none,因为这可以确保屏幕阅读器仍然可以访问它。

事件处理

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

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

CSS:


body.js展示{
职位:相对;
左: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()时重置它。我在提示中提到,使用对象来存储接口的状态总是一个好的计划,因为这意味着您可以保留任意多的属性,而不需要引入更多的变量。更改只是在当前对象中存储section并在已有一个类集(05年_keepingstate.html):


document.body.classname=(document.body.classname+“”'“)+'js';
var toc = document.getElementById(' toc');
如果(TOC){
无功电流=
功能切换(E){
var t=e.目标;
如果(t.nodeName.toLowerCase()= a){
如果(current.section) {
current.section.classname='';
};
var sectionid=t.getattribute('href').split('')[1];
var节=document.getElementByID(sectionID);
如果(节){
section.parentnode.classname='显示';
current.section=section.parentnode;
};
};
};
toc.addEventListener(“点击”,切换、虚假);
};

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

命名空间的脚本。

要使脚本与其他脚本很好地协作,最简单的技巧是使用模块的模式并将其嵌套在分配给匿名函数的变量中(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”)。{
如果(current.section) {
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或类名,而是将它们移到自己的配置对象中。我们能覆盖的最后一步是移动CSSJavaScript生成自己的文档我们的例子完成了(07L):


var sectionCollapse = function(){

//开始配置-在这里编辑
变量配置={
jsAvailableClass:'js',
showClass:“秀”,
ToCID:“Toc”
}

//结束配置

document.body.classname=(document.body.classname+“”,“””,+config.jsavailableclass;
var toc=document.getElementByID(config.tocid);
如果(TOC){
无功电流=
功能切换(E){
var t=e.目标;
如果(t.nodeName.toLowerCase()= a){
如果(current.section) {
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(“点击”,切换、虚假);
};
}();

结论

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

为更大的团队规划JavaScript和Ajax,马的生动形象,一个声音为库和许多优秀的演讲者-这是@mediaAjax 2007

周三,11月21日,2007

我刚刚结束了@mediaAjax饮料,从上周三开始,我的收件箱里累积了大约670封邮件,现在我有时间谈谈我在那里的经历。

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

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

我得到了一些很好的反馈,我很高兴得到更多,所以如果你去过那里,告诉我吧。更重要的是,如果你考虑接受一些想法,我很想知道在你们的环境中情况如何。

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

我的最爱:

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

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

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

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

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