JS个人的简单总结

学了4个月的前端,东西学了很多,其中HTML和CSS在于灵活的运用和记忆,JS和前两种有很大区别,个人觉得也是以后工作中非常重要的一点,是唯一有逻辑性的东西,下面是个人的一些简单的学习过程总结:

首先,我们学习了JS的来历和一些简单的语法知识,并且学习了一些由JS原代码组成的代码,一些简单的事件,然后我们学习了BOM和DOM两个最重要的核心对象模型,即浏览器对象模型和文档对象模型。并且学习了其中的很多鼠标和键盘和浏览器事件,虽然实现了我们与用户的交互,但是在学习的过程中却发现有很多麻烦的东西,比如文档中的任一对象,相信对于"document.getElementBy..."这句话有了很大的熟悉度,到后来都是直接闭着眼睛写都没问题了。然后我们根据这些简单的事件写了个游戏,对于我们对JS的熟悉度有了很大的提高。然后在我们学的差不多的时候,悲剧的时候到了,nodejs来了,刚开始学的时候,完全不知道是什么东西,毕竟是涉及到后台的语言,经过两个星期的煎熬之后,回头再看nodejs也就那么回事,就是运用ajax发送请求到后台,然后后台再返回想要的数据或者结果。然后学习了JS的高级部分,闭包和继承。在我们学的头晕脑胀的时候,终于救星来了,jQuery这一牛X的JS库出现了,开始的时候听说不管JS原来学的怎么样,只要你学会jQuery一切都不是问题,原地满血复活,我还不怎么相信,当我真正见识到jQuery的牛X之处的时候,真是瞬间就爱上了它,本来非常繁杂的一些代码,可以通过简单的一行或者两行代码就实现了。学了jQuery之后,就可以不用记那些繁杂的鼠标键盘事件和了。最后,一种新型的框架又来了,angular,这是一种非常好的框架,它直接抛弃了繁琐的DOM操作,运用一些指令就完了,虽然学angular的时间不长,学习的深度也很低,但是深深体会都了它的强大之处,但是可惜的是,在中国运用到angular的公司还是很少的。。。

其实回头一看,JS其实很不难,甚至说是简单,不外乎就是BOM和DOM两种模型,和几十个事件,只要记住一些简单的语法,再加上创造性的想法,很快就能掌握。

时间: 2024-10-19 02:52:57

JS个人的简单总结的相关文章

JS实现一个简单的计算器

使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择框的值. 提示:document.getElementById( id名 ).value 获取或设置 id名的值. 第三步: 获取通过下拉框来选择的值来改变加减乘除的运算法则. 提示:使用switch判断运算法则. 第四步:  通过 = 按钮来调用创建的函数,得到结果. 注意: 使用parseInt

【转】九个Console命令,让js调试更简单

一.显示信息的命令 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title>常用console命令</title> 5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6: </head> 7: <body> 8: <script

分别用css3、JS实现图片简单的无缝轮播功效

本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个img标签:为了实现无缝轮播,注意第一张图片要与最后一张图片相同: <div class="out"> <div class="imgs"> <img src="img/beatuy.jpg"/> <img s

js日期格式简单转换代码

js日期格式简单转换代码: 未经修饰的东西总是狂野粗糙的,比如人没有经过良好的教育,这人可能会有各种问题,同样js中的时间格式也是如此,所以要对时间进行一定的格式化操作,下面是一段非常简单的代码实例和大家分享一下. 代码如下: function dateStr(x,y) { var z={ y:x.getFullYear(), M:x.getMonth()+1, d:x.getDate(), h:x.getHours(), m:x.getMinutes(), s:x.getSeconds() }

[3] 用D3.js做一个简单的图表吧!

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为可缩放矢量图形(Scalable Vector Graphics),SVG 使用 XML 格式定义图像,不清楚什么是SVG的朋友请先在 w3cschools 学习下

用JS做一个简单的电商产品放大镜功能

使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. 实验:制作产品焦点放大图. 所需技能:1.基本的获取页面元素的方法: 2.几个简单的事件: 3.会使用dom设置元素的属性: 案例原理:1.焦点框的跟随鼠标事件: 2.焦点框的移动区域规定: 3.大盒子内容的显示: 适合对象:js初学者 -------------------------------

分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------

JS代码的简单重构与优化

JS代码的简单重构与优化(适合新手) 原文  http://www.cnblogs.com/similar/p/5016424.html Demo . 1 //bad if (age > 20) { return true; } else { return false; } //good return age > 20; 这种一看就明白吧,没什么说的. Demo . 2 //bad for (var i = 0; i < arr.length; i++) { //do something

JS CSS 网页 简单 右侧 悬浮

<!--右侧效果--> <script> $().ready(function() { $(".orm").hover(function() { $(this).css("right", "-2px"); }, function() { $(this).css("right", "-175px"); }); }); </script> <div class=&quo

使用JS完成一个简单的计算器功能

使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElementById("id").value = 1: 取值:var = document.getElementById("id").value: 任务 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择框的值. 提示:document.getElement