目录
一、开发环境和JavaScript版本问题
二、基本语法
三、对象
四、DOM
五、jQuery
六、JavaScript进阶
七、了解node
八、ES2015+新特性
九、AJAX
十、框架
最后
首页 web前端 js教程 js要怎么学

js要怎么学

May 31, 2019 pm 02:50 PM
javascript 前端

有朋友说想要一个学习javascript,但是不知道如何去学习。本篇文章中小编总结了JavaScript重要知识点以及学习方法,有点长,但是很好用,希望对你有所帮助。

js要怎么学

一、开发环境和JavaScript版本问题

开发环境越简单越好,一定不要在这个环节浪费时间。

首先说编辑器的选择,sublime text、vs code、atom、webstorm,还有HBuilder。新手入门的时候总想找一个最好的编辑器,其实这编辑器就和游戏里面选英雄一样,没有最厉害的,只有最适合你的,如果还是拿不定注意,就选vs code吧,我感觉这个对新手挺友好的。

浏览器就用chrome,然后就可以开始撸代码了。

关于JavaScript版本,我建议还是从ES5开始学,有一定基础之后再来看ES2015+的新特性。

二、基本语法

学编程语言和学自然语言有很多相似的地方,我们得从最基本的单词和语法开始学。

  • 变量:如何声明变量,如何给变量赋值。
  • 数据类型:什么是数据类型,数字与字符串有什么区别。
  • 运算符与表达式:常用的运算符有哪些?“=”、“==”与“===”的区别等等。
  • 分支语句:if、switch
  • 循环语句:for、while
  • 函数:什么是函数,什么是参数,什么是返回值。

这些基本语法一定要非常熟悉,要不然后续的学习会举步维艰。

三、对象

对象是一个非常重要的概念,一定要灵活掌握:

  • 对象:属性的无序集合,当属性值为函数的时候,我们叫这个函数为对象的方法。
  • 数组:元素的有序集合。了解数组的常用方法
  • 日期对象:获取年月日时分秒
  • 数学对象:获取随机数
  • 了解其他对象:正则表达式、包装对象,其实函数也是对象,不过这些简单了解一下就行。

每个对象都有很多方法,这些方法知道在哪里查就行了,千万不要去背,就像我们学英语,必要的单词要背,但是大部分单词知道用词典查就行了。

学习【基础语法】和【对象】的过程比较枯燥,知识点之间衔接不是特别紧密,就像我们小学一年级学习汉字一样,每一个字我们都知道是什么,但是却不会把他们组合到一起,所以小学才会练习组词,造句,再到写作文。我们把做的项目比作写作文,那我们还有一段路要走,切莫心急。

四、DOM

  • DOM的树状结构
  • 节点:元素节点、文本节点、属性节点
  • 节点关系:同级、父子级等等
  • 获取节点:querySelector、querySelectorAll等等
  • 节点操作:增删改查
  • 事件绑定:事件流和事件委托应该了解一下

DOM提供的方法也很多,仍然不要过多的投入精力,新手自学总是会被这些大量的方法困扰,我们要做的是对DOM有一个概括性的了解,至于那些杂乱的接口,后续我们完全可以用jQuery或框架代替。

(如果对DOM感兴趣,可以在技能掌握得稍微全面一些之后,再回来深入学习也是可以的,但是前期投入大量时间,确实会影响学习效率)

五、jQuery

jQuery是必须要会的,但是jQuery上手确实很简单,用两天时间了解一下jQuery的用法,然后就可以利用jQuery实现各种页面效果了,前期肯定会磕磕绊绊,但是jQuery的资料有很多,一边学一边做就行。

六、JavaScript进阶

jQuery熟练了之后,就可以开始着手学习JavaScript进阶一点的内容了:

原始类型与引用类型的区别
各种类型转换和类型检测
闭包:函数套函数,怎么套自己都不蒙就行了。
原型:构造函数、原型属性、基于原型的继承是怎么实现的。
this:可以开个坑好好研究研究

七、了解node

node现在可以说是前端必学的了,但是不是学用node做后台,而是用node生态下的各种工具,顺便借node了解一下后台。

  • 使用node开一个静态服务器
  • 使用npm下载第三方模块
  • webpack
  • babel

最好能用express写一个简单的后台程序(一个server.js就够了),处理一些请求,这样我们学习ajax的时候就可以自己写后台接口了,当然这需要有http协议的基础知识。

八、ES2015+新特性

  • 变量和常量:为什么要抛弃var?
  • 结构赋值
  • 箭头函数
  • 模块化
  • class
  • 编译

像promise,async/await函数等等这些,看自己能力了,有兴趣看看,不看也不影响后面学习,但是,就算现在不学,这个后续也是要补的。

九、AJAX

简单的说,了解一下http协议,知道什么是请求,什么是响应,get和post有什么却别,然后在学ajax,看看语法基本就会了。

  • 用XMLHttpRequest发个请求,接个数据。
  • 用jQuery发个请求,接个数据。
  • json解析

知道这些就差不多了,后续不管是工作还是学习,肯定还会遇到很多问题,到时候再具体问题具体分析。

十、框架

react、angular、vue三选一,零基础的初学者强烈推荐vue,如果是后台转前端推荐angular,如果技术型前端,推荐react。

这篇文章是给零基础新手的,那自然就选vue比较好了。

最后

通过这十步,就可以对JavaScript体系有一个整体的了解,然后重点向那个方向发展,就看自己爱好或是工作需要了。技术的道路很漫长,这只是一个起点。

以上是js要怎么学的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Laravel 教程
1602
29
PHP教程
1505
276
PHP与Vue:完美搭档的前端开发利器 PHP与Vue:完美搭档的前端开发利器 Mar 16, 2024 pm 12:09 PM

PHP与Vue:完美搭档的前端开发利器在当今互联网高速发展的时代,前端开发变得愈发重要。随着用户对网站和应用的体验要求越来越高,前端开发人员需要使用更加高效和灵活的工具来创建响应式和交互式的界面。PHP和Vue.js作为前端开发领域的两个重要技术,搭配起来可以称得上是完美的利器。本文将探讨PHP和Vue的结合,以及详细的代码示例,帮助读者更好地理解和应用这两

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

Go语言前端技术探秘:前端开发新视野 Go语言前端技术探秘:前端开发新视野 Mar 28, 2024 pm 01:06 PM

Go语言作为一种快速、高效的编程语言,在后端开发领域广受欢迎。然而,很少有人将Go语言与前端开发联系起来。事实上,使用Go语言进行前端开发不仅可以提高效率,还能为开发者带来全新的视野。本文将探讨使用Go语言进行前端开发的可能性,并提供具体的代码示例,帮助读者更好地了解这一领域。在传统的前端开发中,通常会使用JavaScript、HTML和CSS来构建用户界面

Django是前端还是后端?一探究竟! Django是前端还是后端?一探究竟! Jan 19, 2024 am 08:37 AM

Django是一个Python编写的web应用框架,它强调快速开发和干净方法。尽管Django是一个web框架,但是要回答Django是前端还是后端这个问题,需要深入理解前后端的概念。前端是指用户直接和交互的界面,后端是指服务器端的程序,他们通过HTTP协议进行数据的交互。在前端和后端分离的情况下,前后端程序可以独立开发,分别实现业务逻辑和交互效果,数据的交

如何在JavaScript中获取HTTP状态码的简单方法 如何在JavaScript中获取HTTP状态码的简单方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP状态码获取方法简介:在进行前端开发中,我们常常需要处理与后端接口的交互,而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法,并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时,服务

前端面试官常问的问题 前端面试官常问的问题 Mar 19, 2024 pm 02:24 PM

在前端开发面试中,常见问题涵盖广泛,包括HTML/CSS基础、JavaScript基础、框架和库、项目经验、算法和数据结构、性能优化、跨域请求、前端工程化、设计模式以及新技术和趋势。面试官的问题旨在评估候选人的技术技能、项目经验以及对行业趋势的理解。因此,应试者应充分准备这些方面,以展现自己的能力和专业知识。

Django:前端和后端开发都能搞定的神奇框架! Django:前端和后端开发都能搞定的神奇框架! Jan 19, 2024 am 08:52 AM

Django:前端和后端开发都能搞定的神奇框架!Django是一个高效、可扩展的Web应用程序框架。它能够支持多种Web开发模式,包括MVC和MTV,可以轻松地开发出高质量的Web应用程序。Django不仅支持后端开发,还能够快速构建出前端的界面,通过模板语言,实现灵活的视图展示。Django把前端开发和后端开发融合成了一种无缝的整合,让开发人员不必专门学习

Golang与前端技术结合:探讨Golang如何在前端领域发挥作用 Golang与前端技术结合:探讨Golang如何在前端领域发挥作用 Mar 19, 2024 pm 06:15 PM

Golang与前端技术结合:探讨Golang如何在前端领域发挥作用,需要具体代码示例随着互联网和移动应用的快速发展,前端技术也愈发重要。而在这个领域中,Golang作为一门强大的后端编程语言,也可以发挥重要作用。本文将探讨Golang如何与前端技术结合,以及通过具体的代码示例来展示其在前端领域的潜力。Golang在前端领域的作用作为一门高效、简洁且易于学习的

See all articles