浅谈如何循序渐进的学好JS

目录
  • 概述
  • 1.清楚js的定位
  • 2.清晰的学习路线
  • 3.自律坚持
  • 4.多练多写
  • 5.从多角度去学习和领悟
  • 6.注意培养自信心
  • 7.多写学习总结
  • 8.构建专属知识导图

概述

在我们第一阶段完成HTML+CSS的学习之后，很多同学都会被第二阶段JS难倒——JS语法、JS数据类型、JS对象，Js给我们的印象总是那么的“复杂”，因为它相比html来说是动态的，是编程语言，更深奥一些。想要熟练掌握js难度很大，不过如果你把知识点梳理清楚，真正的理解并加以运用，你就可以掌握它。那么该如何才能学好JS？在这里给大家总结一些学习Js的经验，希望能对你们有所帮助。

Js给人那种感觉的原因多半是因为它如下的特点：

第一：本身知识很抽象、晦涩难懂，如：闭包、内置对象、DOM。

第二：本身内容很多，如函数库、对象库就一大堆。

第三：混合多种编程思想。它里面不但牵涉面向过程编程思想，又有面向对象编程思想，同时，它的面向对象还和别的编程语言（如：C++，JAVA，PHP）不大一样。就好像又是新的一样，让你对曾经学的面向对象产生了怀疑…

那么，怎么才能在js领域内学的轻松一些呢？以我亲身经历和老师的言传身教总结了一些js学习经验：

1.清楚js的定位

时刻都不能忘记，否则很容易犯不清楚js是什么的错误。不要学了很久就知道js是编程语言，就是写代码，而且特点就是乱七八糟就完了，那样是学不好js的。要时时抓住它的地位，确切的说是它在整个Web中的地位：它属于前端的核心，主要用来操控和重新调整DOM，通过修改DOM结构，从而来达到修改页面效果的目的。要用这个中心思想去指导后续的一切js的学习，并且形成条件反射。

2.清晰的学习路线

这个只能是自己慢慢摸索或过来人点拨。我的学习路线如下：

A：js基础部分，如：定义变量、函数、数组、字符串等的处理，内置函数、内置对象等；

B：js面向过程编程思想，封装出各个函数，试着用这些去做一些常见的小功能，如：99乘法表、选项卡、自定义多选按钮、自定义播放器、3D相册，省市区三级联动，鼠标的动效；

C：js面向对象编程思想，所谓万物皆对象，试着去封装一些你自己的对象，提供出有意义的接口出来；

D：学了上述的内容，之后学常用的库，这里必须学jquery；//以后我们会了解到

3.自律坚持

写代码不要一时兴起，三分钟热度，看到别人用js做了一个炫酷的动态网页，你就大喊大叫的我也来我也来，殊不知别人背地里把基础打扎实了，才有这个成果，而你在三天打鱼两天晒网，写一个小项目就会发现自己忘记很多知识点，而垂头丧气。编程语言从来不是一下子就能学好的，都是时间的积累，坚持练习，不断的完善自己的短处，所以说，自律坚持非常重要！！！

4.多练多写

学习js并不是跟着张宇老师，看着他敲代码，看着他说一些代码知识，说了很多注意事项，你当时可能听懂了，过了一段时间，当你写这个代码时，脑子：我会写！ 手：？？？？？？就会十分尴尬，明明当时听懂了呀，可为什么........因为你没有形成深刻的记忆，学习js最好是多练习多写代码，做一些你感兴趣的小项目，实现你想要的功能，不会的去查资料，然后多练多写的同时，也要看看老师是怎么写代码的，思维也很重要。

5.从多角度去学习和领悟

充分调动你所学的东西，从多角度去做某一功能，锻炼自己的思维，能优化代码就尽量优化，避免冗杂，比如说：以前你是从面向过程角度做的，现在改为从面向对象的角度再来做，或者继续做成可以直接使用的插件，提供属性、方法等出来。争取让你做的这个功能逐渐能使用到实际项目中来。这样的好处：既综合应用了你的所学，又能有实际意义，两全其美。

6.注意培养自信心

此时的你，不适合一来就看很复杂很炫的网页效果的源代码，在没有任何基础的情况下直接学这些，会严重打击你的自信心，因此切记因小失大，注意写代码是循序渐进的，而不是一飞冲天。记住此时你是弱小的，你需要的是培养信心，而不是反过来，否则结局很可能是“三天打鱼两天晒网”，离学有所成也就遥遥无期了。

7.多写学习总结

这种总结不但包括源代码、显示效果截图，还应该很容易犯的错误和对应的解决方法以及最后一两句精简的结论性语句。对自己写的总结不是写完了就了事了，要多回顾、多改进、多精简。到做项目的时候，应该是看里面的一两句话就知道是讲什么了，而不要再去看长篇大论了。

8.构建专属知识导图

这个可以让你越学越清晰，你可以按你喜欢的任何形式去做，只要自己印象深刻就行。

注意：知识导图也应该是经常修改、修正，让它更合理、更清晰。

总结的js的知识导图，能够认真看完就是一次对 JavaScript 的回顾与提升，可以很好的检验基础。

俗话说，三分天注定，七分靠打拼，爱拼才会赢，那么加油吧！

以上就是浅谈如何循序渐进的学好JS的详细内容，更多关于JS的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 深入学习js函数的隐式参数 arguments 和 this

    前言 在函数调用时,arguments和this会被静默的传递给函数,并可以在函数体内引用它们,借以访问函数相关的一些信息. 其中arguments是一个类数组结构,它保存了调用时传递给函数的所有实参:this是函数执行时的上下文对象, 这个对象有些让人感到困惑的行为. 下面分别对他们进行讨论. 1. arguments 1.1 背景 JavaScript 允许函数在调用时传入的实参个数和函数定义时的形参个数不一致, 比如函数在定义时声明了 n 个参数, 在调用函数时不一定非要传入 n 个参数,

  • JavaScript简单编程实例学习

    在 HTML 页面中嵌入 JavaScript 脚本需要使用 <script> 标签,用户可以在 <script> 标签中直接编写 JavaScript 代码,具体步骤如下. 第 1 步,新建 HTML 文档,保存为 test.html. 第 2 步,在 <head> 标签内插入一个 <script> 标签. 第 3 步,为 <script> 标签设置type="text/javascript"属性. 现代浏览器默认 <

  • 新手入门带你学习JavaScript引擎运行原理

    新手入门带你学习JavaScript引擎运行原理

    一些名词 JS引擎 - 一个读取代码并运行的引擎,没有单一的"JS引擎";,每个浏览器都有自己的引擎,如谷歌有V. 作用域 - 可以从中访问变量的"区域". 词法作用域- 在词法阶段的作用域,换句话说,词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的,因此当词法分析器处理代码时会保持作用域不变. 块作用域 - 由花括号{}创建的范围 作用域链 - 函数可以上升到它的外部环境(词法上)来搜索一个变量,它可以一直向上查找,直到它到达全局作用域. 同步 - 一次

  • 从0到1学习JavaScript编写贪吃蛇游戏

    本文实例为大家分享了JavaScript编写贪吃蛇游戏的具体代码,供大家参考,具体内容如下 游戏截图 1.画出游戏界面 var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d");//获取地图 2.给小蛇设置参数 var time = 160 ; //蛇的速度 var x = y = 8; var t = 20; //蛇身长 var map = []; //记录蛇运行路径 var siz

  • JavaScript算法学习之冒泡排序和选择排序

    JavaScript算法学习之冒泡排序和选择排序

    前言 算法与数据结构构成了程序,数据结构用于实现数据的表示.存储.管理,算法通过使用数据完成一定的业务逻辑与操作,最终实现了程序的功能.因此算法在编程中的重要性是不言而喻的.很多复杂的算法都是借助最基本的算法实现的.本文主要选取经典排序算法中的冒泡排序与选择排序对JavaScript编程实现算法进行简单描述与说明. 程序算法 算法说明 算法(Algorithm)是解决问题的一种策略机制,算法也是有限操作指令的集合.按照算法策略输入符合要求的数据,最终获得解决问题的输出结果.冒泡算法与选择算法主要

  • 深入学习JavaScript中的bom

    BOM(Broswer Object Model) 凡是 window 的属性和方法,均可以省略"window." 方法: 框窗 1.警告框 window.alert("msg"); 2.确认框 window.confirm("msg"); 3.询问框 window.prompt("msg","defaulvalue") 页面 1.打开一个窗口 window.open() 2.在子窗口中使用,表示父窗口的w

  • JavaScript闭包原理与用法学习笔记

    本文实例讲述了JavaScript闭包原理与用法.分享给大家供大家参考,具体如下: 闭包(Closure) 闭包是一个函数和词法环境的组合,函数声明在这个词法环境中. 词法作用域: 看下面的一个例子: function init() { var name = 'GaoPian'; // name是局部变量 function displayName() { //displayName();是内部函数,一个闭包 alert(name); // 使用外部函数声明的变量 } displayName();

  • JS学习笔记之闭包小案例分析

    本文实例讲述了JS学习笔记之闭包小案例.分享给大家供大家参考,具体如下: 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> *{ list-style

  • JS学习笔记之数组去重实现方法小结

    本文实例讲述了JS学习笔记之数组去重实现方法.分享给大家供大家参考,具体如下: 操作的数组 let arr=[0,1,23,'1',4,2,8,5,5,6,9,'asdasd','5'] 1. 利用ES6 的set 来进行数组去重 console.time("set") let type1=new Set(arr) console.log(type1) type1=[...type1] console.log(type1) console.timeEnd("set"

  • 浅谈如何循序渐进的学好JS

    目录 概述 1.清楚js的定位 2.清晰的学习路线 3.自律坚持 4.多练多写 5.从多角度去学习和领悟 6.注意培养自信心 7.多写学习总结 8.构建专属知识导图 概述 在我们第一阶段完成HTML+CSS的学习之后,很多同学都会被第二阶段JS难倒--JS语法.JS数据类型.JS对象,Js给我们的印象总是那么的"复杂",因为它相比html来说是动态的,是编程语言,更深奥一些.想要熟练掌握js难度很大,不过如果你把知识点梳理清楚,真正的理解并加以运用,你就可以掌握它.那么该如何才能学好J

  • 浅谈几种常用的JS类定义方法

    // 方法1 对象直接量 var obj1 = { v1 : "", get_v1 : function() { return this.v1; }, set_v1 : function(v) { this.v1 = v; } }; // 方法2 定义函数对象 var Obj = function() { var v1 = ""; this.get_v1 = function() { return this.v1; }; this.set_v1 = function

  • 浅谈C#下winform和JS的互相调用和传参(webbrowser)

    不多说,直接上代码,winform下button1调用js函数,从html页面获取值,然后JS调用WINFORM的函数,传送获取到的值到winform并通过messagebox的方法show出来.一步到位,winform调用JS函数和JS调用winform函数的方法都有了. C#的winform下代码如下: [System.Runtime.InteropServices.ComVisible(true)] public partial class Form1 : Form { public Fo

  • 浅谈jQuery添加的HTML,JS失效的问题

    浅谈jQuery添加的HTML,JS失效的问题

    如下图所示, 点击添加后,会新添加一行,但是二级联动就失效了, $('.provinceList').live('change', function(){ var provinceId = $(this).val(); var obj = $(this); $.post('/yuyue/ajaxCityList', {'provinceId':provinceId}, function(list){ var data = eval( '(' + list + ')' ); if( data .

  • 浅谈Nodejs应用主文件index.js

    浅谈Nodejs应用主文件index.js

    前言 经过之前的文章 <浅谈Nodejs应用的主文件index.js的组成部分> ,终于认识了 Node 妹子的容颜,然后好像上呀<(￣︶￣)>.呦西~这次让本屌在她胴体上游走一番,想想也是不错滴.嗯哼,YY到此为止. 正文 这篇文章主要以组成部分为单位了解一下 index.js 这个主文件...皮肤有多滑(￣▽￣)~ 既然之前说过了index.js的组成部分,那么这次就一个组一个组的说.没错!本帅的手,怎么能放过你的每一寸肌肤! 一.引入依赖模块 嗯..就像这样: var exp

  • 浅谈类似于(function(){}).call()的js语句

    研究新浪微博的自动登陆流程,其中涉及到它的加密算法脚本,其中有一段如下形式的代码: (function(){...}).call(name) 其中红色的....是函数的内部各种实现,name为一个对象的名字.这种形式的js从来没见过啊(恕我js这方面见识少啊).然后百度了一下大概的意义如下: .call(name)的作用实际是将name作为前面函数所在域中的this来用,也就是说此时函数中的this就相当于引用的是name. 这段代码的实际意义可以认为:函数的具体实现对变量name的进行的改造,

  • 浅谈JS运算符&&和|| 及其优先级

    今天看了一段YUI compressor压缩的js代码: userNum && (ind += index,ind >= userNum && (ind -= userNum),ind < 0 && (ind === -2 && (ind = -1),ind += userNum),selLi.removeClass("on"),$(selLi[ind]).addClass("on"));

  • 浅谈JS正则表达式的RegExp对象和括号的使用

    RegExp对象的创建: 常规的正则表达式的创建可用直接量,即斜杠 "/" 括起来的字符.但在要求参数变化的环境下,RegExp()构造函数是更好的选择: var reg1 = /'\w+'/g; var reg2 = new RegExp('\'\\w+\'','g'); 对比两种创建方式,RegExp中的第一个参数为要创建的正则字符串,一方面注意,因为不是直接量的表示形式,因此不用斜杠" / "括起来了:而是字符串中必须要对引号" ' "和转

  • 浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题

    js 深浅拷贝问题 浅拷贝一般指的是基本类型的复制 深拷贝一般指引用类型的拷贝,把引用类型的值也拷贝出来 举例 h5的sessionStorage只能存放字符串,所以要存储json时就要把json使用JSON.stringify()把json转换成string,然后再用JSON.parse()转换成json数据 缺点:JSON.parse和JSON.stringify只支持IE9+以上 解决这个问题可以使用深度比那里拷贝方法 js 中内存分配问题(堆和栈) js中基本类型类型一般是存储在栈中的.

  • 浅谈JS读取DOM对象(标签)的自定义属性

    DOM对象对于js来说,是个很基础的元素,我们写js一般来说,都一定会对它进行操作.我们可以很方便地给它加上自定义的属性,比如: <div id="test" class="hello"></div> var test = document.getElementById("test"); test.adang = "adang"; alert(test.adang); 我们会发现,已经给这个id为tes

随机推荐