web前端开发教程,最全JavaScript入门讲解
你是否已经初步掌握了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. 学习的顺序
1.熟悉基本概念:变量,数据类型,函数,运算符,表达式,对象(自定义对象,内置对象)。
这些基本概念一定要熟悉,熟悉到什么程度,看见一个概念,立刻就能写出示例代码,就够了。
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 常用于验证用户的输入。
实例
ifisNaN(x) {alert("Not Numeric")};
JavaScript学习教程
JavaScript学习教程推荐小伙伴们看动力节点老杜讲解的web前端全套教程,这个教程是将多年的编程经验灌输其中,典型的实践派,既适合初学者入门,也适合进阶(学习底层)。
主要讲解了前端开发中的核心技术JavaScript,俗称JS,视频中讲解了JavaScript核心语法、JavaScript内置支持类、JavaScript调试、JavaScript DOM编程、JavaScript BOM编程、大量前端小案例、JavaScript事件处理、JavaScript对象、继承、JSON等知识点,该视频可以开启你的WEB前端之路。
学习目录
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