如何全面系统的学习javascript

pdsu_zhao 2016-05-12 06:07:21
在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学习经验和新得，以便于学习任务能够更好地进行，以便于完成一个前端界面系统性的掌握和学习，如果有较好的学习视频，也希望前辈能分享给我，
...全文
1102 27 打赏 收藏 举报
写回复
用AI写文章
27 条回复
切换为时间正序
请发表友善的回复…
发表回复
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
原生JavaScript（简称原生JS）是JavaScript的基石，它包含了语言的基本语法、数据类型、操作符、控制流结构、函数等。
开始系统学习Javascript
开始系统学习Javascript 在此网站学习Javascript，希望有所进步！ 现代 Javascript 教程
成为JavaScript和Vue.js技术专家的系统学习指南
Vue提供了一系列内置指令（如v-ifv-forv-bindv-model等）来简化DOM操作，但Vue同样允许我们创建自定义指令以实现更具体的控制。自定义指令的创建遵循以下结构：// 指令的定义// 仅调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。},// 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。el.focus();// 自动聚焦},// 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
我们怎么去系统的学习js
一、 要系统的学习JavaScript，需要首先掌握HTML和CSS，这是基础也是学习JavaScript的时候需要用到的知识。 二、 刚开始入门不建议看《JavaScript权威指南》和《JavaScript高级程序设计》这些书籍。并非这些书籍不好，相反这些书籍是公认的好书！主要是因为这些书籍内容太多太厚了，很容易让你走上‘从入门到放弃’道路！对于初学者而言，多而全意味着主次难分，无法取舍；此时...
基于JavaScript的可视化数据结构辅助学习系统
本文设计并实现了一个基于JavaScript的数据结构可视化学习系统，通过动态交互解决传统教学中数据结构抽象难理解的问题。系统采用HTML+CSS+Vue.js构建界面，利用Canvas实现链表、树等8种数据结构的实时渲染，支持节点操作、算法单步执行与自测功能。采用分层架构设计，集成事件监听与本地存储，优化了性能与兼容性。测试表明，该系统有效提升了学习效率，成为教学与自学的实用工具。
JavaScript

87,984

社区成员

224,681

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章