如何全面系统的学习javascript

2016-05-12 06:07:21 1.1k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

系统学习JavaScript 原生JavaScript（简称原生JS）是JavaScript的基石，它包含了语言的基本语法、数据类型、操作符、控制流结构、函数等。阅读详情

在html+css+javascript学习中，最困惑的就是javascript的学习。
javascript的重要性已经有了初步的认识和了解，它表示的是动态界面的实现，进行加载和实现，是一个html语言界面动态显示的核心，1.html+css从大二上学期开始学起，一个月的时间看完了31集的张鹏老师的视频，之后跟实验室老大大三学长做了一个基于html的德育分第二课堂系统，只负责前端html，css的书写，当时有那么点小小的自豪感，不过在现在看来难免觉得界面有那么点小low，比起现在所要求的扁平式界面布局，在div+css布局方面还有很大的欠缺，最近一直在这个方向在努力！
2.javascript从上学期结束的时候，开始学起，看了视频，结束了基础的第一遍，然而效果并不是很好，仅仅对于其元素知晓个大概，但对于实战和代码性的的东西简直就是菜鸟一个了。有硬着头皮把视频看了第二遍，然而却发现依旧毫无所获，找不到它与html，css连接点，不知所云，没有任何的优越感可言，毕竟自己学的一塌糊涂。
3.对于响应式布局，也就通过寒假的时间自学了bootstrap，写了一个小界面，觉得还不错，不过毕竟它还是所有html、css、javascript的综合，基础很重要。
所以，在这里，我想主要请教一下关于javascript学习经验和新得，以便于学习任务能够更好地进行，以便于完成一个前端界面系统性的掌握和学习，如果有较好的学习视频，也希望前辈能分享给我，

...全文

Win系统蓝牙设备频繁卡顿/断连 - 解决方案无线网卡有2个模块，一个是WiFi，一个是蓝牙，因此蓝牙问题可能和无线网卡有关。在某些情况下，例如高温或WiFi速率过高，会导致蓝牙频繁卡顿/断连。解决方法分为2种，1是更新驱动，2是更换无线网卡。阅读详情

pdsu_zhao

JavaScript 87,983 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

Celefar 2018-05-29

打赏
举报

如果只是想做一些动态效果，不想深入学习js的话，建议你稍稍找几本书看，在此建议看《Javascript DOM编程艺术》，这本书看完之后，写点比较简单的程序还是可以的，然后手头准备一个w3school的参考文档（我相信你是有的），接下来你就可以去学习那些js库了，例如jQ，Vue等，这些库，比如jq，整个语法就稍稍类似css，还是很容易学习的。
如果你想深入钻研javascript，建议买一本《Javascript高级程序设计（第3版）》慢慢的，细心的看，遇到不会的就去百度，或者自己敲代码看效果，理解起来还是可以的。毕竟编程语言内容比较庞大，不需要全部掌握，但是最基本的面向对象还是要深入理解的。（尽管js不算一门真正的面向对象语言）。
以上就是我的建议，文中书籍可以到图灵社区搜索购买。

x80819091 2017-09-22

打赏
举报

html语义化，模块化了解吗，css模块化，命名方式css modules,bem..了解了吗，css处理器postcss,sass掌握了吗，处理这些东西的自动化工具gulp,npm script..会用了吗。。。,多花些时间在html,css上，比精通js要划算的多，了解点js基础，就上个框架吧

x80819091 2017-09-22

打赏
举报

花太长时间学就是浪费时间，学一些基础的，html,css要先掌握好，然后学个前端框架，推荐vue，在实战中用js,好多东西框架都已经做好了，js那么大，完全精通是不现实的，如果js真的那么简单易组织的话，就不会存在前端框架了

pdsu_zhao 2016-06-06

打赏
举报

引用 21 楼 fjfjfj的回复:

比如有好几个tag标签.没被选中时是灰色，被选中时是红色，并且自己被选中后，它的兄弟们又要变灰。那么css怎么写？ .tag1{background:#999;color:#fff;} .tag1.active{background:#f00;} <div class="tag1">标签</div> js: $('.tag1').addClass('.active'); //你要用js去给这个DOM节点添加class属性 active $('.tag1').removeClass('.active'); //已激活的标签，再用js删除class属性 active （我说的不是增删改查，而是对DOM对象的操作，改它的属性.attr()、样式.addClass()、内容.html() 。还有在当前节点前后添加.append()删除节点.remove('.p1')，类似这些的，等等。）
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$(".tag1").click(function(){
		$(this).addClass('active').siblings().removeClass('active');
	});
});
</script>
<style type="text/css">
.tag1{float:left;margin-right:4px;padding:5px 10px;background:#999;color:#fff;}
.tag1.active{background:#f00;}
</style>
<div class="tag1 active">标签1</div>
<div class="tag1">标签2</div>
<div class="tag1">标签3</div>
<div class="tag1">标签4</div>
第二个：页面有个小方块区域，有一些内容，点击右上角关闭按钮后，关掉它。
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$(".close").click(function(){
		$(this).parent().hide();
	});
});
</script>
<style type="text/css">
.box{position:relative;border:1px solid #999;width:500px;height:400px;}
.box .close{position:absolute;top:0;right:0;font-size:30px;line-height:1;font-family:'Arial';padding:10px 20px;background:#000;color:#fff;cursor:pointer;}
</style>
<div class="box">
	<div class="close">X</div>
	<p>弹窗关闭效果</p>
</div>
以上只是举了两个很简单的例子。用jquery要学会自己去做这些类似的小效果。网上插件良莠不齐，有的已经是几年前的老代码了。要自己积累，慢慢甄别，找几个强力的国外的一些插件，保留作自己的代码库中，一些比较弱的效果，比较旧的老代码，就略过别看了，自己试着去仿作这些效果。再说用户登录，肯定要用到什么短信验证倒计时、表单验证什么的，自己去仿制这些效果。

大神说的好有道理的样子，能不能收我当徒儿？

，定发奋图强，不丢人。

fjfjfj 2016-06-06

打赏
举报

比如有好几个tag标签.没被选中时是灰色，被选中时是红色，并且自己被选中后，它的兄弟们又要变灰。那么css怎么写？ .tag1{background:#999;color:#fff;} .tag1.active{background:#f00;} <div class="tag1">标签</div> js: $('.tag1').addClass('.active'); //你要用js去给这个DOM节点添加class属性 active $('.tag1').removeClass('.active'); //已激活的标签，再用js删除class属性 active （我说的不是增删改查，而是对DOM对象的操作，改它的属性.attr()、样式.addClass()、内容.html() 。还有在当前节点前后添加.append()删除节点.remove('.p1')，类似这些的，等等。）


<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$(".tag1").click(function(){
		$(this).addClass('active').siblings().removeClass('active');
	});
});
</script>
<style type="text/css">
.tag1{float:left;margin-right:4px;padding:5px 10px;background:#999;color:#fff;}
.tag1.active{background:#f00;}
</style>
<div class="tag1 active">标签1</div>
<div class="tag1">标签2</div>
<div class="tag1">标签3</div>
<div class="tag1">标签4</div>

第二个：页面有个小方块区域，有一些内容，点击右上角关闭按钮后，关掉它。

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$(".close").click(function(){
		$(this).parent().hide();
	});
});
</script>
<style type="text/css">
.box{position:relative;border:1px solid #999;width:500px;height:400px;}
.box .close{position:absolute;top:0;right:0;font-size:30px;line-height:1;font-family:'Arial';padding:10px 20px;background:#000;color:#fff;cursor:pointer;}
</style>
<div class="box">
	<div class="close">X</div>
	<p>弹窗关闭效果</p>
</div>

以上只是举了两个很简单的例子。用jquery要学会自己去做这些类似的小效果。网上插件良莠不齐，有的已经是几年前的老代码了。要自己积累，慢慢甄别，找几个强力的国外的一些插件，保留作自己的代码库中，一些比较弱的效果，比较旧的老代码，就略过别看了，自己试着去仿作这些效果。再说用户登录，肯定要用到什么短信验证倒计时、表单验证什么的，自己去仿制这些效果。

pdsu_zhao 2016-06-05

打赏
举报

引用 4 楼 qq_24380731 的回复:

<javascript 编程艺术可以看看>

里边讲的是关于js基础进阶知识学习的么？

pdsu_zhao 2016-06-05

打赏
举报

引用 17 楼 fjfjfj 的回复:

[quote=引用 16 楼 zxy9602 的回复:] C语言倒是学了，算是一般般吧，直接奔jquery主题学js可以么？

可以，主要学DOM，事件。比如某个DOM节点前后增加东西，取索引值、添加删除属性、改class等。字符串、数值、循环判断，这些还是js的基本基础，再看这些就是了。要先学一下css，再学js这边的。因为jquery的选择器其实和css选取器很类似。[/quote] css选择器学过了，最近一直在复习div+css的界面排版设计规划，以及完善用户登录注册界面的东西，之前接触的js东西太过片面，也没有好好掌握，想借助大三一年的时间好好学习js，那个类似于增删查改数据不是应该是数据库的东西么？难道用dom对象，js或jquery也可以实现？？

fjfjfj 2016-06-03

打赏
举报

引用 16 楼 zxy9602 的回复:

C语言倒是学了，算是一般般吧，直接奔jquery主题学js可以么？

可以，主要学DOM，事件。比如某个DOM节点前后增加东西，取索引值、添加删除属性、改class等。字符串、数值、循环判断，这些还是js的基本基础，再看这些就是了。要先学一下css，再学js这边的。因为jquery的选择器其实和css选取器很类似。

pdsu_zhao 2016-06-01

打赏
举报

引用 15 楼 fjfjfj 的回复:

[quote=引用 14 楼 zxy9602 的回复:] 那最基本的javascripit没咋明白怎么破？虽说之前看了好长时间的视频，不过没咋消化吸收。。。

不知你基础怎样。要是毫无编程基础，建议学一下最普通的C语言（不学指针），了解一下语法如果只是想实现最基本的效果，会jquery操纵DOM、事件、表单验证、控制显示隐藏、添加删除样式表的class，这些就够了如果想进一步，建议先多练习、仿制一些效果，有了一些感觉，再去系统性的啃书理解概念。[/quote] C语言倒是学了，算是一般般吧，直接奔jquery主题学js可以么？

fjfjfj 2016-05-30

打赏
举报

引用 14 楼 zxy9602 的回复:

那最基本的javascripit没咋明白怎么破？虽说之前看了好长时间的视频，不过没咋消化吸收。。。

不知你基础怎样。要是毫无编程基础，建议学一下最普通的C语言（不学指针），了解一下语法如果只是想实现最基本的效果，会jquery操纵DOM、事件、表单验证、控制显示隐藏、添加删除样式表的class，这些就够了如果想进一步，建议先多练习、仿制一些效果，有了一些感觉，再去系统性的啃书理解概念。

qq_18978117 2016-05-25

打赏
举报

有了基础后，我推荐这本《深入理解javascript》。。看完这本。。JS的语法和框架基本原理都能理解

ldxsik 2016-05-25

打赏
举报

JavaScript高级程序设计，JavaScript语言精粹，JavaScript模式，JavaScript设计模式

pdsu_zhao 2016-05-25

打赏
举报

引用 13 楼 fjfjfj 的回复:

都是书虫。。看不动。刚开始嚼一大堆概念，不觉得累么，也许有些人善于理解概念吧，不过我觉得还是先动手能做点东西才会有具体印象。 js可以直接从jquery学，不必管原生，jq已经占市场比例很高了。虽然原生很重要，但可以先把js学到能用能干活，再去理解。 jquery主要看选择器、事件，对DOM节点的操作，ajax和json 要用闭包方式写，不要文件中散落着大量一个个的 function. bootstrap的某些理念很好，你可以尝试自己仿制做一些页面UI小模块（含css js html），一个个独立的，可以组合拼装页面的。看一下bootstrap的css的分离，比如一个button标签， <input type="button" class="btn btn-default btn-lg">为什么要拆成3个样式，再组合。使用chrome浏览器，浏览网页时经常右键——>审查元素，到处多看看，参考别人的html和css怎么写的

谢谢层主指导，那最基本的javascripit没咋明白怎么破？虽说之前看了好长时间的视频，不过没咋消化吸收。。。

fjfjfj 2016-05-25

打赏
举报

都是书虫。。看不动。刚开始嚼一大堆概念，不觉得累么，也许有些人善于理解概念吧，不过我觉得还是先动手能做点东西才会有具体印象。 js可以直接从jquery学，不必管原生，jq已经占市场比例很高了。虽然原生很重要，但可以先把js学到能用能干活，再去理解。 jquery主要看选择器、事件，对DOM节点的操作，ajax和json 要用闭包方式写，不要文件中散落着大量一个个的 function. bootstrap的某些理念很好，你可以尝试自己仿制做一些页面UI小模块（含css js html），一个个独立的，可以组合拼装页面的。看一下bootstrap的css的分离，比如一个button标签， <input type="button" class="btn btn-default btn-lg">为什么要拆成3个样式，再组合。使用chrome浏览器，浏览网页时经常右键——>审查元素，到处多看看，参考别人的html和css怎么写的

pdsu_zhao 2016-05-25

打赏
举报

引用 5 楼 xjearthsoft的回复:

入了门就该看进阶的书了推荐楼主看js高级程序设计,js权威指南,css权威指南,jquery权威指南反正是各种权威指南,各种设计入门容易精通难,与楼主共勉

谢谢大神的指导。

pdsu_zhao 2016-05-25

打赏
举报

引用 9 楼 qq_18978117的回复:

有了基础后，我推荐这本《深入理解javascript》。。看完这本。。JS的语法和框架基本原理都能理解

哦哦，那对于基础性的又有哪些书籍呢。。或者学习方法，基础不扎实，想从头再来。

pdsu_zhao 2016-05-25

打赏
举报

引用 8 楼 ldxsik的回复:

JavaScript高级程序设计，JavaScript语言精粹，JavaScript模式，JavaScript设计模式

这是学习JavaScript的几个模块么？

pdsu_zhao 2016-05-16

打赏
举报

哦哦，谢谢大神们的回复，我会好好学习的

KK3K2005 2016-05-14

打赏
举报

不停不断坚持的写和查看资料是王道

___紫菜 2016-05-13

打赏
举报

想系统的学习那是要花很久的，而且是要在项目中不断学习。不断尝试新的方式，挑战有难度的功能。

加载更多回复（4）

如何全面系统的学习javascript

相关推荐