你是否已经初步掌握了html和css,但完全不知道从何入手JavaScript?
如果是,那么这篇文章一定会对你有所帮助,这里总结了5条建议,帮助JavaScript初学者总结学习方法,提高学习效率。
1. 多看视频少看书
对初学者而言,看书的效率是很低的,书上的内容大多会展示核心代码,而视频为了演示效果,会展示全部代码。初学者自学需要的是全部代码,只看核心代码必定会留下踩不完的坑。所以,初学者一定要多看视频少看书。
2. 写代码的时间要多于看书和看视频的时间
学习JavaScript,一定要以写为主,而不是以看为主。学习时间的一半以上要留给写代码,剩下的时间用来看书和看视频。几乎所有初学者都有这个问题,就是拿一本书(或视频)看3个小时但是一行代码都没写。这样的结果就是,3个小时最多只利用了1个小时。太浪费时间了。正确的学习方法是:看到一行代码就写一行代码,就算理解,抄也得抄下来,然后再去慢慢理解。
3. 不可盲目追新技术
- react,vue,angular,和你没关系
- node,express,koa,和你没关系
- grunt,gulp,webpack,和你没关系
JavaScript这几年变化很快,但是对于初学者来说要摒弃浮躁的气氛,静下心来打好基础。记住:自己是初学者,玩的东西就是:JavaScript和jQuery,工具就用一个编辑器和一个浏览器,这些就够了,别的不要碰.
4. jQuery还没过时
有些朋友会说jQuery已经淘汰了,jQuery确实注定要被淘汰,但是现在还差得远呢。
首先,jquery对于初学者非常友好,甚至不会js都可以学jQuery。并且目前市面上的网站和应用,仍然是jQuery居多,所以如果你是自学,jQuery是必学的。
5. 学习的顺序
熟悉基本概念:变量,数据类型,函数,运算符,表达式,对象(自定义对象,内置对象)。
这些基本概念一定要熟悉,熟悉到什么程度,看见一个概念,立刻就能写出示例代码,就够了。
2.熟悉DOM:树状结构,节点分类,添加节点,删除节点,修改属性,绑定事件。
3.熟悉jQuery:选择器、操作属性和样式、绑定事件、节点操作、动画方法。
4.用jQuery实现网页上看到的页面效果,比如轮播图,菜单的各种效果,返回顶部等。
5.试着用原生的js实现jQuery的常用方法。比如addClass,removeClass,index这些。
上面5条如果没能做到,就不要想着闭包,原型继承,ES6新特性这些东西了。
JavaScript 简介
JavaScript 是世界上最流行的编程语言。
这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
- JavaScript 是脚本语言
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
- JavaScript 很容易学习。
- JavaScript:写入 HTML 输出
实例
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
JavaScript:对事件作出反应
实例
<button type="button" onclick="alert('Welcome!')">点击这里</button>
alert() 函数在 JavaScript 中虽然并不常用,但它对于代码测试非常方便。
onclick 事件只是您即将在本教程中学到的众多事件之一。
JavaScript:改变 HTML 内容
使用 JavaScript 来处理 HTML 内容是非常强大的功能。
实例
x=document.getElementById("demo") //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
你会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。
DOM(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。
JavaScript:改变 HTML 图像
本例会动态地改变 HTML <image>的来源 (src):
The Light bulb
点击灯泡就可以打开或关闭这盏灯
JavaScript 能够改变任意 HTML 元素的大多数属性,而不仅仅是图片。
JavaScript:改变 HTML 样式
改变 HTML 元素的样式,属于改变 HTML 属性的变种。
实例
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变样式
JavaScript:验证输入
JavaScript 常用于验证用户的输入。
实例
if isNaN(x) {alert("Not Numeric")};
JavaScript学习教程
JavaScript学习教程推荐小伙伴们看动力节点老杜讲解的web前端全套教程,这个教程是将多年的编程经验灌输其中,典型的实践派,既适合初学者入门,也适合进阶(学习底层)。
主要讲解了前端开发中的核心技术JavaScript,俗称JS,视频中讲解了JavaScript核心语法、JavaScript内置支持类、JavaScript调试、JavaScript DOM编程、JavaScript BOM编程、大量前端小案例、JavaScript事件处理、JavaScript对象、继承、JSON等知识点,该视频可以开启你的WEB前端之路。
http://www.bjpowernode.com/?toutiaoweb.chai
学习目录
- JavaScript教程
- JavaScript语言特点
- JavaScript组成
- JavaScript中BOM和DOM之间的关系及主流浏览器
- JavaScript开发工具
- JavaScript基础语法
- HTML嵌入JavaScript
- JavaScript注释
- JavaScript标识符
- JavaScript保留关键字
- JavaScript内置类型
- JavaScript变量
- JavaScript函数
- JavaScript数据类型
- JavaScript的typeof运算符
- JavaScript创建对象
- JavaScript Void
- JavaScript中 null、NaN和undefined的区别
- JavaScript流程控制语句
- JavaScript事件和事件句柄
- JavaScript常用事件及事件句柄
- JavaScript注册事件的方式
- JavaScript HTML DOM对象
- JavaScript HTML DOM 对象
- JavaScript BOM编程
- JavaScript window对象
- JavaScript history对象与location对象
- JavaScript JSON
- JavaScript JSON