首頁 web前端 js教程 学习JavaScript的最佳方法分享_基础知识

学习JavaScript的最佳方法分享_基础知识

May 16, 2016 pm 06:00 PM

学习新的东西是件可怕的事。对我来说,掌握一项新技能最大的问题是,我不知道自己懂什么。鉴于此,定个计划,学习你感兴趣的东西应该会有用。这篇文章的主旨就是:你为学习JavaScript 制定的蓝图、路线、行动计划!你不必担心找不到最好的资源,先整理些不好的资源,再确定下一步该学什么。遵循它,一步一步来。

任务0:了解什么是JavaScript

在你真正开始学习JavaScript 之前,花一分钟了解一下什么是JavaScript,它有哪些功能。 JavaScript不是jQuery、Flash或Java。与它们不同,它是一种独立的编程语言。 JavaScript 是浏览器语言(尽管现在不完全是)。主要目的是给静态页面增加交互性。在浏览器里,它不会为你更换PHP或Ruby,也不会更改你的HTML或CSS;你可以把它们串在一起使用。另外,它没有你想的那么难学。 补充说明:你应该听过jQuery,它可能是被使用最广泛的JavaScript 库。也许你还听说过其他比较流行的JavaScript 框架,比如Mootools,,YUI,Dojo 等等。可以将它们统一看做JavaScript辅助工具集;当你使用它们的时候,你还在写JavaScript,但都是些很抽象的JavaScript。它会让你事半功倍。 “你甚至可能听到有人说,你应该先学jQuery(或其他库)再学JavaScript。我很尊重他们但完全不同意这种说法。先把JavaScript 学好再用其他库,你会发现你会做的更好;结果就是,你会编写更好的JavaScript。”

任务1:通过Codecademy.com站点的课程来学习

Codecademy是一个相对较新的网站,其广告语是“最易学的编码方法”。目前,该网站仅有两个课程,“初级编程”和“JavaScript快速入门指南”。沉浸在JavaScript 中是种不错的体验。跟 Try Ruby 练习非常相似,你会学到简短的课程、在浏览器里编码,然后看结果。得到全部分数、打开成就徽章。(Ruby,一种为简单快捷的面向对象编程(面向对象程序设计)而创的脚本语言。) 如果你已熟悉了另一种编程语言,你也许可以先学“JavaScript快速入门指南”;如果这是您第一次编程(HTML和CSS除外),你会发现“初级编程”课程相当有用。Codecademy是一家免费网站,但需要注册。

任务2:appendTo 截屏方法

appendTo 视频有一套特别适合初学者的截屏方法。 如果你想用正确(容易)的方法学习JavaScript,学习这些课程绝对管用。视觉训练总是有效的! “用我们提供的点播内容、务实的训练解决方案来提升自己的技能。无需注册、无需绑定、绝不忽悠。”

任务3:阅读一本好的关于JavaScript 的说明书

一旦你通过Codecademy上的课程来学习,你就会想搞到一本关于JavaScript的详细说明书–介绍所有的类型、运算符、控件架构等等。 如果可以的话,我来介绍几个好的说明书: 《再说JavaScript》 – 这本说明书可在Mozilla开发者网络上找到,语言公正。这本书内容很丰富,有很多代码实例和文段介绍。 《Eloquent JavaScript》 – 该书由Marijn Haverbeke 编写,可免费在线阅读,如果你想弄个硬拷贝可以上亚马逊网站购买。它比MDN说明更详细,因为它不仅涵盖了JavaScript 语言,而且包括编码风格以及在浏览器里使用JavaScript。当然,“eloquent”并非言过其实。(eloquent - 雄辩的、口若悬河的) 《Getting Good with JavaScript》 – 没错,这本书是我写的,但是我介绍这本书是另有原因的。它跟我在前面介绍的两本说明不同;在这本书里我只介绍了编程人员快速掌握编程技巧所需要的部分。此外,它还附带超过6个小时的截屏视频,因此,想要就去看看吧。(当然,这本不是免费的。)

任务4:安装、学习Firebug(或开发人员工具)

一旦你开始在浏览器里使用JavaScript,就需要安装Firebug并熟悉它的性能。Firebug是一款用于Firefox的插件,它能帮你创建和调试网页:对网页开发者来说,它就像外科医生的‘手术刀'。如果你不用Firefox?喜欢Safari 或者Chrome怎么办?没问题:可以查找类似Firebug的内置开发人员工具。 “你可以在Mac地址栏里按选项+命令+I 或者按快捷键Control + Shift + I ,来打开设计工具面板。” 通过打开你选的工具,只需在你喜欢的其中一个网站上点击点击,你就会学到很多东西。这里有一些能加速你学习的资源:FirebugFirebug网站和维基百科Firebug的CSS-技巧说明你应该在Nettuts+上使用Firebug的10大理由。Firebug:从白带到黑带,Tuts+ Marketplace 网站(http://marketplace.tutsplus.com/item/firebug-white-to-black-belt/118795)设计工具设计工具网站Google I/O 2011:由Paul Irish重组的浏览器设计工具Google 浏览器设计工具:Paul Irish 的快速开发12技巧

任务5:读一本有关JavaScript的书籍

现在你已经熟悉了些基础知识,但是还有很多东西要学。尽管我推荐的一些书可能会让你‘破产',但你会发现任何时候我都会推荐4本高质量的书:

前两本是一般的、较深入的JavaScript 资源,它们会让你从简介到较深层次逐步理解;当然,简介里会有一些重叠的说明,但不多:刚好让你看起来很舒服。(注:虽然这些书在亚马逊网站能买到,我已经链接了出版商的网站,因此,你能看看范例章节。) 《JavaScript高级程序设计》- Nicolas C. Zakas 编写,这本书涵盖了它能涵盖的所有内容。如果你以前看过Zakas的任何作品,你会发现他是个不折不扣的天才。除了涵盖了JavaScript语言,这本书还能让您在浏览器里很好的使用JavaScript。 《JavaScript 24-hour Trainer 》由Jeremy McPeak 编撰,该作者也写过Nettuts+。它不仅仅是一本书:还附带了一张长达四小时的教学光碟。全书共43节课,涉及编码句法指导和代码优化。 虽然这些书非常适合编程人员学习JavaScript语言以及如何在浏览器中使用这些语言,但是学无止境。虽然这些书的确进入了一些模式和实练中,我再推荐两本我认为有用的书。1)《JavaScript Patterns 》- Stoyan Stefanov著。我也是刚刚读完这本书,我真希望能尽快读完它。在读过上面的资源之后,你可以学到如何编写JavaScript,但是这本书会教你如何对资源进行重组,这项技能很重要,并非如你想象般简单。2)《JavaScript:The Good Parts 》- Douglas Crockford 著。该书介绍了JavaScript的优缺点。

任务6:做些事情!

在学习完上述资源后,你应该已经尝试了一些代码样本:修改代码、整合代码看看会怎么样。但是是时候让自己休息一下,做点东西出来了。 你能做什么呢?你能做很多东西。这里有一些意见。1) 图片库:显示一套图片缩略图和主图。当用户点击缩略图的时候,要用较大的缩略图(不是原缩略图)替代当前的主图。如果你能覆盖缩略图alt 标记的标题就奖励积分,或是在用户一分钟内未点击的时候进行图片循环。2) 待办列表:听起来有点难,我也不打算推荐你制作一个完整的待办列表。只需要做一个文本框并在其旁放上按钮;点击按钮的时候,已输入的文字会在一个无序列表下面变成一个项目。点击列表项目便可移除。这听起来很容易,但有几个陷阱,对初学者来说仔细想想还是很有好处的。3) 动画框:动画其实是小把戏而已,并不需要弄得太复杂。做一个包含了少许文本的div,其上要有若干按钮。一个按钮用来调整宽度,一个用来调整高度;还有一个用来调整背景颜色。关键是不要让更改发生得太快,但在一秒钟之内。记住,Google 是你的朋友,特别是如果迄今为止你还未用JavaScript做任何动画的话。 我相信你能想到其他的很好的练习的计划。当然,学习的唯一方法是把自己从安乐窝里拽出来。“此外,在所有的技能水平上,确保JavaScript 类别在Nettuts+上有大量教程列表。”(Nettuts是一个专注于提供网络开发教程的网站。)

任务7:开始学习如何使用JavaScript库

如果你学到了这个地步,就会意识到有些JavaScript 编写任务很难(或根本不能)通过跨浏览器的方式实现。最可能违规的便是过量的DOM操作,AJAX和动画。这也就是为什么我们需要JavaScript 库的原因。 正如我前面提到的,一个JavaScript 库的详细内容犹如减轻痛苦的蜜糖。因此,现在有必要来看一下。这里有大量库供你选择,我会让你自己决定从哪个开始。无论是jQuery 还是Mootools,YUI 还是Dojo,它们各自的网站会为你提供开始学习时你所需要的一切信息。如果你觉得用得着就来试试吧。 最流行的库: 虽然很容易得到大量的库,你还是应该选一个受欢迎的– 至少排名第一。 jQuery Dojo YUI MooTools Prototype

任务8:紧随大师的步伐

有很多令人难以置信的JavaScript 天才,他们一直在做些很酷的东西,你一定不想错过。值得庆幸的是,我们的工作狂Siddharth 副主编已经搞到一份33名设计人员列表,要想成为一名JavaScript 发烧友你就必须订阅它。扔下手头的工作,订阅/跟随这些设计人员。这是必须要做的。 但是,你还能做更多事情。这个公平网站经常发布关于JavaScript 的信息,所以不要走开。此外,关注JavaScript Show ,一档全世界关于JavaScript最新最大的播客。你可能还想注册JavaScript电子周刊简讯。 还想要更多吗?关注Tuts+Marketplace 的JavaScript 类。

最后undefined 感谢阅读此文!真诚的希望它能帮你成为一名JavaScript 爱好者。如果你已对JavaScript 很熟悉,你可以在评论中推荐其他任何相关资源。

原文:http://article.yeeyan.org/view/188878/225166

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

在JavaScript中替換字符串字符 在JavaScript中替換字符串字符 Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法:在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項,需使用正則表達式並添加全局標誌g: str = str.replace(/fi

如何創建和發布自己的JavaScript庫? 如何創建和發布自己的JavaScript庫? Mar 18, 2025 pm 03:12 PM

文章討論了創建,發布和維護JavaScript庫,專注於計劃,開發,測試,文檔和促銷策略。

如何在瀏覽器中優化JavaScript代碼以進行性能? 如何在瀏覽器中優化JavaScript代碼以進行性能? Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略,重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

如何使用瀏覽器開發人員工具有效調試JavaScript代碼? 如何使用瀏覽器開發人員工具有效調試JavaScript代碼? Mar 18, 2025 pm 03:16 PM

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試,專注於設置斷點,使用控制台和分析性能。

jQuery矩陣效果 jQuery矩陣效果 Mar 10, 2025 am 12:52 AM

將矩陣電影特效帶入你的網頁!這是一個基於著名電影《黑客帝國》的酷炫jQuery插件。該插件模擬了電影中經典的綠色字符特效,只需選擇一張圖片,插件就會將其轉換為充滿數字字符的矩陣風格畫面。快來試試吧,非常有趣! 工作原理 插件將圖片加載到畫布上,讀取像素和顏色值: data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地讀取圖片的矩形區域,並利用jQuery計算每個區域的平均顏色。然後,使用

如何構建簡單的jQuery滑塊 如何構建簡單的jQuery滑塊 Mar 11, 2025 am 12:19 AM

本文將引導您使用jQuery庫創建一個簡單的圖片輪播。我們將使用bxSlider庫,它基於jQuery構建,並提供許多配置選項來設置輪播。 如今,圖片輪播已成為網站必備功能——一圖胜千言! 決定使用圖片輪播後,下一個問題是如何創建它。首先,您需要收集高質量、高分辨率的圖片。 接下來,您需要使用HTML和一些JavaScript代碼來創建圖片輪播。網絡上有很多庫可以幫助您以不同的方式創建輪播。我們將使用開源的bxSlider庫。 bxSlider庫支持響應式設計,因此使用此庫構建的輪播可以適應任何

用JavaScript增強結構標記 用JavaScript增強結構標記 Mar 10, 2025 am 12:18 AM

核心要点 利用 JavaScript 增强结构化标记可以显著提升网页内容的可访问性和可维护性,同时减小文件大小。 JavaScript 可有效地用于为 HTML 元素动态添加功能,例如使用 cite 属性自动在块引用中插入引用链接。 将 JavaScript 与结构化标记集成,可以创建动态用户界面,例如无需页面刷新的选项卡面板。 确保 JavaScript 增强功能不会妨碍网页的基本功能至关重要;即使禁用 JavaScript,页面也应保持功能正常。 可以使用高级 JavaScript 技术(

如何使用Angular上傳和下載CSV文件 如何使用Angular上傳和下載CSV文件 Mar 10, 2025 am 01:01 AM

數據集對於構建API模型和各種業務流程至關重要。這就是為什麼導入和導出CSV是經常需要的功能。在本教程中,您將學習如何在Angular中下載和導入CSV文件

See all articles