本文是JavaScript入门教程的上篇，介绍了JavaScript的基本概念、特点、数据结构、数据类型、运算符、类型转换、基本语法、注释、流程控制以及函数的基础知识。JavaScript是一种嵌入到HTML中的脚本语言，用于实现网页的动态效果，如动态改变内容、外观，验证表单，响应事件等。文章详细讲解了JavaScript的数据结构、数据类型，包括变量、常量、字符串、数字型和布尔型，并介绍了运算符、类型转换和基本语法。此外，还涉及到了流程控制的结构，如选择结构、循环结构，以及函数的概念、定义和调用。通过实例和练习题帮助读者巩固知识。
目录
预备知识与后续知识及项目案例
[HTML入门与进阶以及HTML5]
[CSS]
[JS-上]
[JS-下]
[jQuery]
[Node.js + Gulp 知识点汇总]
[MongoDB + Express 入门及案例代码]
[Vue项目开发-仿蘑菇街电商APP]
一、JavaScript简介
JavaScript，就是我们通常所说的JS，是一种嵌入到HTML页面中的脚本语言，由浏览器一边解释一边执行。
我们在“HTML入门教程”中的“前端技术简介”中深入浅出地讲解了HTML、CSS和JavaScript之间的关系，这一篇文章分量很重，大家没看过的记得回去看一下。
HTML、CSS和JavaScript的关系如下：
“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。”
我们都知道单纯的HTML页面是静态的（只供浏览），而JavaScript的出现，把静态的页面转换成支持用户交互并响应相应事件的动态页面。那么在我们平常的浏览的网页中，都有哪些地方用到了JavaScript呢？
我们就拿绿叶学习网来说，导航、tabs选项卡、回顶部这些地方都用到了JavaScript。HTML只是一门描述性的语言，这些地方单纯地使用HTML是无法实现的，而必须使用编程的方式来实现，那就必须使用JavaScript了。
二、JavaScript的特点
HTML页面是静态的，而JavaScript可以弥补HTML语言的缺陷，实现Web页面客户端的动态效果。JavaScript的作用有以下几点：
1、动态改变页面内容
HTML页面是静态的，一旦编写，内容是无法改变的。JavaScript可以弥补这个不足，可以将内容动态地显示在网页中。
2、动态改变网页的外观
JavaScript通过修改网页元素的CSS样式，达到动态地改变网页的外观。
3、验证表单数据
我们常见的在各大网站中的注册中的验证功能，就是JavaScript实现的。
4、响应事件
JavaScript是基于事件的语言。例如点击一个按钮弹出一个对话框，就是鼠标点击触发的事件，例如绿叶学习网教程文章中的点赞效果：
对于JavaScript的理解，就一句话：如果没有使用JavaScript，网页就是静态的，唯一的功能就是给用户浏览。加入了JavaScript，网页变得绚丽多彩起来。
三、内容
1、JavaScript简介
一、JavaScript是什么？
1、HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。
2、HTML页面是静态的（只供浏览），平常我们所见到的各种网页特效就是使用JavaScript实现的。
二、JavaScript编辑工具
常用的JavaScript编辑工具有：
（1）记事本；
（2）Dreamweaver；
（3）UltraEdit-32；
（4）Visual Studio；
（5）sublime Text
绿叶学习网系列教程推荐使用Visual Studio作为网站开发工具。
三、JavaScript在HTML的引用方式
JavaScript在HTML的引用方式共有4种：
（1）页头引入（head标签内）；
（2）页中引入（body标签内）；
（3）元素事件中引入（标签属性中引入）；
（4）引入外部JS文件；
四、JavaScript和Java的关系
JavaScript和Java只有一毛钱的关系，无他。
JavaScript和Java虽然名字相似，但是本质上是不同的。
（1）JavaScript往往都是在网页中使用，而Java却可以在软件、网页、手机App等各个领域中使用；
（2）Java是一门面向对象的语言，而从本质上讲，JavaScript更像是一门函数式编程语言；
五、训练题
在进入JavaScript基础学习之前，先让大家接触一下神奇的javascript程序究竟是怎样的？
这个例子实现的功能是：在页面打开时候，弹出对话框显示“欢迎您来到绿叶学习网！”。
程序代码实现如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
刚刚打开这个页面时，在浏览器预览效果如下：
2、JavaScript入门基础
一、数据结构
JavaScript的数据结构包括：标识符、关键字、常量、变量等。
1、标识符
标识符，说白了，就是一个名字。在JavaScript中，变量和函数等都需要定义一个名字，这个名字就可以称为“标识符”。
JavaScript语言中标识符最重要的3点就是：
（1）第一个字符必须是字母、下划线（_）或美元符号这3种其中之一，其后的字符可以是字母、数字或下划线、美元符号；
（2）变量名不能包含空格、加号、减号等符号；
（3）标识符不能和JavaScript中用于其他目的的关键字同名；
2、关键字
JavaScript关键字是指在JavaScript语言中有特定含义，成为JavaScript语法中一部分的那些字。
3、常量
常量，顾名思义就是指不能改变的量。常量的指从定义开始就是固定的，一直到程序结束。
常量主要用于为程序提供固定和精确的值，包括数值和字符串，如数字、逻辑值真（true）、逻辑值假（false）等都是常量。
4、变量
变量，顾名思义，就是指在程序运行过程中，其值是可以改变的。
二、JavaScript数据类型
JavaScript数据类型有2大分类：一是“基本数据类型”，二是“特殊数据类型”。
其中，基本数据类型包括以下3种：
- （1）数字型（Number型）：如整型84，浮点型3.14；
- （2）字符串型（String型）：如"绿叶学习网"；
- （3）布尔型（Boolean型）：true或fasle；
特殊数据类型有3种：
- （1）空值（null型）；
- （2）未定义值（undefined型）；
- （3）转义字符；
根据个人的开发经验中，只需要记忆\n、\'、\"这3个就已经够初学者走很远了，其他的转义字符我们完全没必要去记忆，到时候需要的时候再回来查表就行了，大家别浪费脑细胞喔。
三、运算符
JavaScript的运算符按运算符类型可以分为以下5种：
（1）算术运算符；
（2）比较运算符；
（3）赋值运算符；
（4）逻辑运算符；
（5）条件运算符；
四、typeof运算符
typeof运算符用于返回它的操作数当前所容纳的数据的类型，这对于判断一个变量是否已被定义特别有用。
例如：typeof(1)返回值是number，typeof("javascript")返回值是string。
五、表达式
表达式是一个语句的集合，计算结果是个单一值。
在JavaScript中，常见的表达式有4种：
（1）赋值表达式；
（2）算术表达式；
（3）布尔表达式；
（4）字符串表达式；
六、类型转换
1、字符串型转换为数值型
在JavaScript中，将字符串型数据转换为数值型数据有parseInt()和parseFloat()这2种方法。其中，parseInt()可以将字符串转换为整型数据；parseFloat()可以将字符串转换为浮点型数据。
语法：
| 1 2 |
|
2、数值型转换为字符串型
在JavaScript中，将数值型数据（整型或浮点型）转换为字符串，都是使用toString()方法。
语法：
| 1 |
|
七、JavaScript基本语法
1、执行顺序
JavaScript程序按照在HTML文档中出现的顺序逐行执行。如果需要在整个HTML文件中执行，最好将其放在HTML文件的标签中。某些代码，如函数体内的代码，不会被立即执行，只有当所在的函数被其他程序调用时，该代码才会被执行。
2、区分大小写
JavaScript是严格区分大小写的。例如str和Str这是两个完全不同的变量。
3、分号和空格
在JavaScript中，语句的分号“;”是可有可无的。但是我们强烈要求大家在每一句语句后面加一个分号“;”，这是一个非常重要的代码编写习惯。
另外，JavaScript会忽略多余的空格，用户可以向脚本添加空格，来提高代码的可读性，说白了就是让代码“漂亮点”，读得舒服一点。
例如：
| 1 2 |
|
八、JavaScript注释
在编写JavaScript代码时，我们经常要在一些关键代码旁做一下注释，这样做的好处很多。
语法：
| 1 2 |
|
“//”是单行注释方式，如果你的注释内容只占一行就应该使用这种注释方式。“/**/”是多行注释方式，如果你的注释内容占多行建议使用这种注释方式。
3、流程控制
JavaScript对程序流程的控制跟其他编程语言是一样的，主要有3种：
（1）顺序结构；
（2）选择结构；
（3）循环结构；
一、选择结构
在JavaScript中，选择结构共有5种：
（1）if语句;
（2）if……else语句;
（3）if……else if……语句;
（4）if语句的嵌套;
（5）switch语句;
二、循环结构
在JavaScript中，循环结构总有3种：
（1）while语句；
（2）do……while语句；
（3）for语句；
三、跳转语句
JavaScript支持的跳转语句主要有2种：
（1）break语句；
（2）continue语句；
break语句与continue语句的主要区别是：break是彻底结束循环，而continue是结束本次循环。在这一点跟其他编程语言（如C和Java）相同。
四、训练题
（1）题目：计算100以内所有奇数的和比较简单，使用for语句就可以实现。
代码实现如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
在浏览器预览效果如下：
分析：
“i+=2”等价于“i=i+2”，“sum+=i”等价于“sum=sum+i”。这些基础的东西可别忘了。
（2）
题目：输出所有的“水仙花数”。所谓“水仙花数”是指一个3位数，其各位数字立方和等于该数的本身。例如，153就是一个水仙花数，因为153=13+53+33。
代码实现如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
在浏览器预览效果如下：
分析：
parseInt()函数是将一个数转换为整型数据，我们在“JavaScript类型转换”这一节中已经详细给大家讲解了。
（3）
题目：找出字符串中“how are you doing？”中所有小于字母“s”的字符，并在页面输出。
代码实现如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
最低0.47元/天 解锁文章
314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
