web前端开发教程，最全JavaScript入门讲解

如果是，那么这篇文章一定会对你有所帮助，这里总结了5条建议，帮助JavaScript初学者总结学习方法，提高学习效率。

对初学者而言，看书的效率是很低的，书上的内容大多会展示核心代码，而视频为了演示效果，会展示全部代码。初学者自学需要的是全部代码，只看核心代码必定会留下踩不完的坑。所以，初学者一定要多看视频少看书。

学习JavaScript，一定要以写为主，而不是以看为主。学习时间的一半以上要留给写代码，剩下的时间用来看书和看视频。几乎所有初学者都有这个问题，就是拿一本书（或视频）看3个小时但是一行代码都没写。这样的结果就是，3个小时最多只利用了1个小时。太浪费时间了。正确的学习方法是：看到一行代码就写一行代码，就算理解，抄也得抄下来，然后再去慢慢理解。

  • react，vue，angular,和你没关系
  • node，express，koa，和你没关系
  • grunt，gulp，webpack，和你没关系

JavaScript这几年变化很快，但是对于初学者来说要摒弃浮躁的气氛，静下心来打好基础。记住：自己是初学者，玩的东西就是：JavaScript和jQuery，工具就用一个编辑器和一个浏览器，这些就够了，别的不要碰.

有些朋友会说jQuery已经淘汰了，jQuery确实注定要被淘汰，但是现在还差得远呢。

首先，jquery对于初学者非常友好，甚至不会js都可以学jQuery。并且目前市面上的网站和应用，仍然是jQuery居多，所以如果你是自学，jQuery是必学的。

熟悉基本概念：变量，数据类型，函数，运算符，表达式，对象（自定义对象，内置对象）。

这些基本概念一定要熟悉，熟悉到什么程度，看见一个概念，立刻就能写出示例代码，就够了。

2.熟悉DOM：树状结构，节点分类，添加节点，删除节点，修改属性，绑定事件。

3.熟悉jQuery：选择器、操作属性和样式、绑定事件、节点操作、动画方法。

4.用jQuery实现网页上看到的页面效果，比如轮播图，菜单的各种效果，返回顶部等。

5.试着用原生的js实现jQuery的常用方法。比如addClass，removeClass,index这些。

上面5条如果没能做到，就不要想着闭包，原型继承，ES6新特性这些东西了。

JavaScript 是世界上最流行的编程语言。

这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

  • JavaScript 是脚本语言
  • JavaScript 是一种轻量级的编程语言。
  • JavaScript 是可插入 HTML 页面的编程代码。
  • JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
  • JavaScript 很容易学习。
  • JavaScript：写入 HTML 输出

实例

实例

alert() 函数在 JavaScript 中虽然并不常用，但它对于代码测试非常方便。

onclick 事件只是您即将在本教程中学到的众多事件之一。

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

实例

你会经常看到 document.getElementByID(\”some id\”)。这个方法是 HTML DOM 中定义的。

DOM(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。

本例会动态地改变 HTML <image>的来源 (src)：

The Light bulb

点击灯泡就可以打开或关闭这盏灯

JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。

改变 HTML 元素的样式，属于改变 HTML 属性的变种。

实例

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

Javascript入门级教程

一 * js的引入方式

https://www.dcloud.io/hbuilderx.html

1.行内引入

<button id=\”bt1\” onclick=\”console.log(\’页面加载成功\’)\”>点击实现效果</button>

<button id=\”bt2\” ondblclick=\”alert(\’页面加载成功\’)\”>点击</button>

2.js内部引入

<script type=\”text/javascript\”>

//window表示当前的浏览器页面 onload触发事件进行加载

document.write(Date())

document.write(\”Hello World ! ! !\”)

window.onload=function(){

alert(\’公用的js页面加载成功了！！！\’)

}

var a=20;

console.log(typeof(a))

var b=document.getElementById(\’demo\’)

console.log(b)

//用按钮中的onclick中的函数实现js点击事件

function button(){

alert(\’点击按钮实现\’)

}

</script>

<body>

<p id=\’demo\’ class=\’demo\’>页面内容展示</p>

<button id=\’button\’ onclick=\’button()\’>点击</button>

</body>

3.外部引入

<!–外部引入js页面–>

<script src=\”js/a.js\” type=\’text/javascript\’></script>

二 * 关于js 运算 逻辑

1.js运算

<script type=\’text/javascript\’>

//运算符运算

var a=20;

var b=30;

console.log(a+b)

a++;

b–;

console.log(a)

console.log(b)

var c=50;

c++;

var d=++c;

console.log(c)

console.log(d)

var num=10;

var nums=num++;

console.log(nums)

console.log(num)

</script>

2.三目运算

3.判断语句

4.switch case 选择语句

//switch case 选择语句

console.log(\’欢迎进入银行管理系统*1.存款 2.取款 3.转账 4.退出\’)

var choice=parseInt(prompt(\’请输入选择的行为*\’))

switch(choice){

case 1:

put()

break;

case 2:

get()

break;

case 3:

trun()

break;

default:

console.log(\’退出银行管理系统\’)

break;

}

function put(){

console.log(\’选择存款功能\’)

}

function get(){

console.log(\’选择取款功能\’)

}

function trun(){

console.log(\’选择转账功能\’)

}

5.for while 语句

6.do while 语句

7.break语句

button onclick语句实例*

一个适合前端新手轻松上手的JavaScript教学

JavaScript 是一门编程语言，可为网站添加交互功能（例如：游戏、动态样式、动画以及在按下按钮或收到表单数据时做出的响应等）。本文介绍了 JavaScript 的精彩之处和主要用途。

JavaScript（缩写：JS）是一门完备的 动态编程语言)。当应用于HTML文档时，可为网站提供动态交互特性。由布兰登·艾克（ Brendan Eich，Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人）发明。

JavaScript 的应用场合极其广泛，简单到幻灯片、照片库、浮动布局和响应按钮点击，复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。

JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具，可以使 开发工作事半功倍。其中包括：

1、浏览器应用程序接口（API）—— 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成3D 图像与音频样本等等。

2、第三方 API —— 让开发者可以在自己的站点中整合其它内容提供者（Twitter、Facebook 等）提供的功能。

3、第三方框架和库 —— 用来快速构建网站和应用。

本节是一篇 JavaScript 简介，因此这个阶段不会对 JavaScript 语言和上述工具做过多的介绍。之后可以到 JavaScript 学习区 和 MDN 的其它地方学习更多细节。

下面对语言核心做一个不完整介绍，期间还可以接触到一些浏览器 API 特性。

读到这里你一定很激动，诚然 —— JavaScript 是最振奋人心的 Web 技术之一，而且在娴熟驾驭之后，你的网站在功能和创新力上将达到一个新的维度。

然而，JavaScript 比 HTML 和 CSS 学习起来更加复杂一点，所以必须一步一个脚印地学习。首先，来看看如何在页面中添加一些基本的信息 JavaScript 脚本来建造一个 “Hello world!” 示例

重要的是：如果你没有完成之前的课程实践，可联系我获取资料包继续跟着练习哦，如果你要实践，前两篇笔记就是html和css阶段的内容哦。

  1. 首先，打开你的测试站点，创建一个名为 scripts 的文件夹。然后在其中创建一个名为 main.js 的文件。
  2. 下一步，在index.html文件</body>标签前的新行添加以下代码。
  1. 与 CSS <link>的元素类似，它将** JavaScript**引入页面以作用于 HTML（以及 CSS 等页面上所有内容）;
  2. 现在将以下代码添加到main.js文件中：
  1. 最后，保存HTML和JavaScript 文件，用浏览器打开 index.html。可以看到如下内容：

注：我们将 <script> 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。

JavaScript 把页面的标题改成了 “Hello world!” 。首先用 querySelector() 函数获取标题的引用，并把它储存在 myHeading 变量中。这与 CSS 选择器的用法非常相像：若要对某个元素进行操作，首先得选择它。

之后，把 myHeading 变量的属性 textContent （标题内容）修改为 “Hello world!” 。

注：上面用到的两个函数都来自文档对象模型 (DOM) API， 均用于控制文档。

我们来学习一些 JavaScript 的核心特性，从而更好地理解它的运行机制。学习这些知识很有意义，因为这些原理普遍适用于所有编程语言，掌握好它们，可以做到融会贯通。

重要：学习本节时，请尝试将示例代码输入到 JavaScript 控制台里看看会发生什么。 JavaScript 控制台的更多信息请查看 浏览器开发者工具。

变量 (en-US) 是存储能量的容器。要声明一个变量，先输入关键字 let 或 var，然后输入合适的名称：

注：行末的分号表示当前语句结束，不过只有在单行内需要分割多条语句时，这个分号才是必须的。然而，一些人认为每条语句末尾加分号是一种好的风格。

注：几乎任何内容都可以作为变量名，但还是有一些限制（请参阅 变量命名规则）。如果你不确定，还可以 验证变量名 是否有效。

注：JavaScript 对大小写敏感，myVariable 和 myvariable 是不同的。如果代码出现问题了，先检查一下大小写！

注：想要了解更多关于 var 和 let 的不同点，可以参阅 var 与 let 的区别。

变量定义后可以进行赋值：

也可以将定义、赋值操作写在同一行：

可以直接通过变量名取得变量的值：

变量在赋值后是可以更改的：

注意变量可以有不同的 数据类型 ：

那么变量有什么用呢？我们说，编程时它们无所不在。如果知道无法改变，那么就无法做任何动态的工作，比如发送个性化的问候，或是改变在图片库当前展示的图片。

类似于 CSS，JavaScript 中间可以添加注释。

如果注释只有一行，可以更简单地将注释放在两个斜杠之后，就像这样：

运算符 (en-US)是一类数学符号，可以根据两个值（或变量）产生结果。以下表格中介绍了一些最简单的运算符，可以在浏览器控制台里尝试一下后面的示例。

译注：这里说“根据两个值（或变量）产生结果”是不严谨的，计算两个变量的运算符称为“二元运算符”，还有一元运算符和三元运算符，下表中的“取非”就是一元运算符。

运算符种类远不止这些，不过目前上表已经够用了。完整列表请参阅 表达式和运算符。

注：不同类型数据之间的计算可能出现奇怪的结果，因此必须正确引用变量，才能得出预期结果。比如在控制台输入 \”35\” + \”25\”，为什么不能得到 60？因为引号将数字转换成了字符串，所以结果是连接两个字符串而不是把两个数字相加。输入 35 + 25 才能得到正确结果。

条件语句是一种代码结构，用来测试表达式的真假，并根据测试结果运行不同的代码。一个常用的条件语句是 if … else。下面是一个示例：

if ( … ) 中的表达式进行测试，用（上文所提到的）等于运算符来比较变量 iceCream 与字符串 \’chocolate\’ 是否相等。 如果返回 true，则运行第一个代码块；如果返回 false，则跳过第一块直接运行 else 之后的第二个代码块。

函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。之前已经涉及过一些函数，比如：

document.querySelector 和 alert 是浏览器内置的函数，随时可用。

如果代码中有一个类似变量名后加小括号 () 的东西，很可能就是一个函数。函数通常包括参数，参数中保存着一些必要的数据。它们位于括号内部，多个参数之间用逗号分开。

比如， alert() 函数在浏览器窗口内弹出一个警告框，还应为其提供一个字符串参数，以告诉它警告框里要显示的内容。

好消息是：人人都能定义自己的函数。下面的示例是为两个参数进行乘法运算的函数：

尝试在控制台运行这个函数，不妨多试几组参数，比如：

注：return语句告诉浏览器当前函数返回 result 变量。这是一点很有必要，因为函数内定义的变量只能在函数内使用。这叫做变量的 作用域。（详见 变量作用域。）

事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是 点击事件，鼠标的点击操作会触发该事件。 可尝试将下面的代码输入到控制台，然后点击页面的任意位置：

Copy to Clipboard

将事件与元素绑定有许多方法。在这里选用了<html>元素，把一个匿名函数（就是没有命名的函数，这里的匿名函数包含单击鼠标时要运行的代码）赋值给了html的onclick (en-US) 属性。

请注意：

等价于

只是前者更简洁。

现在你已经具备了一些 JavaScript 基础，下面来为示例网页添加一些更酷的特性。

这里将用新的 DOM API 为网页添加另一张图片，并用 JavaScript 使图片在点击时进行切换。

  1. 首先，找到另一张你想要在你的页面上展示的图片，且尺寸与第一张图片尽可能相同。
  2. 将这张图片储存在你的images目录下。
  3. 将图片重命名为\’firefox2.png\’（去掉引号）。
  4. 打开main.js文件，输入下面的JavaScript 代码 ( 请删除刚才的 \”hello world\” 脚本)：

5、保存所有文件并用浏览器打开 index.html 。点击图片可以发现它能够切换了！

这里首先把<img> 元素的引用存放在myImage变量里。然后将这个变量的onclick事件与一个匿名函数绑定。每次点击图片时：

  1. 获取这张图片的 src 属性值。
  2. 用一个条件句来判断src的值是否等于原始图像的路径:
    1. 如果是，则将 src 的值改为第二张图片的路径，并在 “ 内加载该图片。
    2. 如果不是（意味着它已经修改过）, 则把 src 的值重新设置为原始图片的路径，即原始状态。

下面来添加另一段代码，在用户初次进入站点时将网页的标题改成一段个性化欢迎信息（即在标题中添加用户的名字）。名字信息会由 Web Storage API 保存下来，即使用户关闭页面之后再重新打开，仍可得到之前的信息。还会添加一个选项，可以根据需要改变用户名字以更新欢迎信息。

1、打开index.html， 在<script>标签前添加以下代码，将在页面底部显示一个“切换用户”字样的按钮：

2、将以下 JavaScript 代码原封不动添加到main.js文件底部，将获取新按钮和标题的引用，并保存至变量中：

3、然后添加以下函数来设置个性化欢迎信息。（函数需要在调用后生效，下文中提供了两种对该函数的调用方式）

该函数首先调用了prompt()函数， 与alert()类似会弹出一个对话框。但是这里需要用户输入数据，并在确定后将数据存储在myName变量里。接下来将调用localStorageAPI ，它可以将数据存储在浏览器中供后续获取。这里用localStorage的setItem()函数来创建一个\’name\’数据项，并把myName变量复制给它。最后将textContent属性设置为一个欢迎字符串加上这个新设置的名字。

4、接下来，添加以下的if … else 块。我们可以称之为初始化代码，因为它在页面初次读取时进行构造工作：

5、Copy to Clipboard这里首次使用了取非运算符（逻辑非，用!表示）来检测\’name\’数据是否存在。若不存在，调用setUserName()创建。若存在（即用户上次访问时设置过），调用getItem()获取保存的名字，像上文的setUserName()那样设置textContent。

  1. 最后，为按钮设置 onclick 事件处理器。按钮按下时运行 setUserName() 函数。这样用户就可以通过按这个按钮来自由设置新名字了：

第一次访问网页时，页面将询问用户名并发出一段个性化的信息。可随时点击按钮来改变用户名 。告诉你一个额外的福利，因为用户名是保存在 localStorage 里的，网页关闭后也不会丢失，所以重新打开浏览器时所设置的名字信息将依然存在:)

运行示例代码，弹出输入用户名的对话框，试着按下 取消 按钮。此时标题会显示为 “跟着艾编程学习太有成就感了，null”。这是因为取消提示对话框后值将设置为 null，这是 JavaScript 中的一个特殊值，表示引用不存在。

也可以不输入任何名字直接按 确认，你的标题会显示为“跟着艾编程学习太有成就感了，”，原因么显而易见。要避免这些问题，应该更新 setUserName() 来检查用户是否输入了 null 或者空名字：

用人话说就是：如果 myName 没有值或值为 null，就再次从头运行setUserName()。如果有值（上面的表达式结果不为真），就把值存储到 localStorage 并且设置标题。

如果你按部就班完成本文的实践，那么最终可以得到以下页面

相关推荐：

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG
全部
行业动态
C4D教程
C4D百科