[前端系列第3弹]JS入门教程:从零开始学习JavaScript

2023-11-03

本文将带领大家,从零开始学习JavaScript,fighting~

目录

一、JavaScript简介

二、变量和数据类型

三、注释和分号

四、算术运算符

五、表达式和语句

六、代码块和作用域

七、函数(最重要) 


一、JavaScript简介

        JavaScript(简称JS)是一种运行在浏览器中的脚本语言,它可以让网页变得更加动态、交互和有趣。JS是网页开发的三大核心技术之一,与HTML和CSS相辅相成。HTML负责定义网页的内容,CSS负责指定网页的布局,而JS负责编写网页的行为。通过JS,可以实现以下功能:

  • 在网页上显示当前的日期和时间
  • 在用户点击按钮时弹出对话框
  • 在用户输入数据时进行验证和提示
  • 在用户滚动页面时改变网页的背景颜色
  • 在用户拖动元素时实现拖放效果
  • 在用户玩游戏时实现动画和音效
  • 等等

JS不仅仅可以用于网页开发,还可以用于其他领域,例如:

  • 服务器端开发:通过Node.js平台,可以使用JS来编写服务器端的应用程序,处理网络请求、数据库操作、文件操作等。
  • 移动端开发:通过React Native框架,可以使用JS来编写跨平台的移动应用程序,运行在Android和iOS设备上。
  • 桌面端开发:通过Electron框架,可以使用JS来编写桌面应用程序,运行在Windows、Mac和Linux系统上。
  • 机器学习:通过TensorFlow.js库,可以使用JS来编写机器学习的模型和算法,实现人脸识别、图像分类、自然语言处理等功能。

从上面的介绍可以看出,JS是一门非常有用和有趣的编程语言,它可以让我们创造出各种各样的项目和产品。在这篇文章中,我将带你从零开始学习JS的基础知识,并通过一些简单而有趣的例子来巩固学习效果。

二、变量和数据类型

变量是用来存储数据的容器,可以给变量赋予不同类型的值,例如数字、文本、布尔值等。在JS中,我们使用var、let或const关键字来声明变量,例如:

var x = 10; // 使用var声明一个名为x的变量,并赋值为10
let y = "Hello"; // 使用let声明一个名为y的变量,并赋值为"Hello"
const z = true; // 使用const声明一个名为z的常量,并赋值为true

注意,var和let声明的变量可以被重新赋值,而const声明的常量不能被重新赋值,否则会报错。例如:

x = 20; // 可以修改x的值为20
y = "World"; // 可以修改y的值为"World"
z = false; // 不能修改z的值为false,会报错

在JS中,有以下几种基本数据类型:

  • Number:表示数字,包括整数和小数,例如1, 3.14, -5等。
  • String:表示文本,用单引号或双引号括起来,例如"Hello", 'World’等。
  • Boolean:表示逻辑值,只有两个可能的值:true或false。
  • Undefined:表示未定义的值,当一个变量被声明但没有赋值时,它的默认值就是undefined。
  • Null:表示空值,当一个变量被赋值为null时,它表示没有任何有效的数据。

除了基本数据类型外,JS还有一种复杂数据类型:Object。对象是由多个属性和方法组成的集合,每个属性都有一个名字和一个值,每个方法都是一个函数。可以使用大括号{}来创建对象,并用冒号:分隔属性名和属性值,用逗号,分隔不同的属性或方法。例如:

var person = {
  name: "Alice", // 属性name的值是"Alice"
  age: 18, // 属性age的值是18
  sayHello: function() { // 方法sayHello是一个函数
    console.log("Hello, I am " + this.name); // 在控制台输出一句话
  }
};

可以使用点.或方括号[]来访问对象的属性或方法,例如:

console.log(person.name); // 输出"Alice"
console.log(person["age"]); // 输出18
person.sayHello(); // 调用sayHello方法,输出"Hello, I am Alice"

三、注释和分号

注释是用来说明代码的意义或功能的文字,它不会被执行,只是为了方便阅读和理解代码。在JS中,可以使用两种方式来写注释:

  • 单行注释:使用//开头,后面跟着想要写的注释内容,它只会影响当前行的代码。例如:
// 这是一个单行注释,它不会被执行
console.log("Hello"); // 这里也可以写注释,但是console.log("Hello")会被执行
  • 多行注释:使用/开头,/结尾,中间可以写多行的注释内容,它会影响//之间的所有代码。例如:
/*
这是一个多行注释,它不会被执行
它可以跨越多行
*/
console.log("World"); // 这一行会被执行,因为它不在多行注释里面

分号是用来结束一条语句的标志,它告诉JS解释器这里是一条语句的结束。在JS中,我们可以选择性地使用分号,因为JS解释器会自动在合适的地方添加分号。但是,为了避免一些潜在的错误和歧义,建议在每条语句的末尾都加上分号。例如:

var x = 10; // 这里加了分号,表示这是一条完整的语句
var y = 20 // 这里没有加分号,但是JS解释器会自动在这里加上分号
var z = x + y; // 这里也加了分号,表示这也是一条完整的语句

四、算术运算符

算术运算符是用来进行数学计算的符号,例如加、减、乘、除等。在JS中,可以使用以下的算术运算符:

  • +:加法,用来将两个数值相加,或者将两个字符串连接起来。例如:
var a = 10 + 20; // a的值是30
var b = "Hello" + "World"; // b的值是"HelloWorld"
  • ++:自增,用来将一个数值加1。它可以放在变量前面或后面,但是有不同的效果。如果放在变量前面,表示先加1再返回变量的值;如果放在变量后面,表示先返回变量的值再加1。例如:
var h = 10;
var i = ++h; // i的值是11,h的值也是11,因为先将h加1再赋给i
var j = h++; // j的值是11,h的值是12,因为先将h赋给j再加1
  •  算术运算符、赋值运算符、比较运算符、逻辑运算符、位运算符与Java运算符类似,不再一一列举

五、表达式和语句

  • 表达式:表示一个值,可以是一个字面量、一个变量、一个运算符或者一个函数调用。例如:
10 // 一个数字字面量,表示10这个值
"Hello" // 一个字符串字面量,表示"Hello"这个值
n // 一个变量,表示n所存储的值
n + 1 // 一个运算符,表示n和1相加的结果
Math.sqrt(n) // 一个函数调用,表示求n的平方根的结果
  • 语句:表示一个动作,可以是一个赋值、一个条件判断、一个循环、一个函数定义或者一个输出。例如:
var n = 10; // 一个赋值语句,将10赋给变量n
if (n > 0) { ... } // 一个条件语句,根据n是否大于0来执行不同的代码块
for (var i = 0; i < n; i++) { ... } // 一个循环语句,重复执行一段代码n次
function square(n) { ... } // 一个函数定义语句,定义了一个名为square的函数
console.log(n); // 一个输出语句,将n的值输出到控制台

在JS中,可以使用分号来分隔不同的语句,也可以使用换行来分隔不同的语句。但是,有些情况下,必须使用分号来结束一条语句,否则会导致错误或者意外的结果。例如:

var a = 10 // 这里没有加分号
var b = 20 // 这里也没有加分号
console.log(a + b) // 这里也没有加分号

// 上面的代码等价于:

var a = 10 var b = 20 console.log(a + b)

// 这会导致语法错误,因为JS解释器无法识别这是三条语句还是一条语句

// 正确的写法应该是:

var a = 10; // 这里加了分号
var b = 20; // 这里也加了分号
console.log(a + b); // 这里也加了分号

// 或者:

var a = 10 // 这里没有加分号
var b = 20 // 这里也没有加分号

console.log(a + b) // 这里没有加分号,但是换了一行

// 上面的代码等价于:

var a = 10;
var b = 20;

console.log(a + b);

// 这样就不会导致错误,因为JS解释器会自动在换行处添加分号

六、代码块和作用域

  • {}:代码块,用来将一组相关的语句组织在一起,形成一个逻辑单元。例如:
if (n > 0) {
  console.log("n是正数"); // 这是一个代码块,它属于if语句的条件分支
} else {
  console.log("n是负数或零"); // 这也是一个代码块,它属于else语句的条件分支
}
  • var:局部变量,用来声明在某个代码块内部有效的变量。例如:
function square(n) {
  var result = n * n; // 这是一个局部变量,它只在square函数内部有效
  return result; // 返回result的值
}
console.log(result); // 这里会报错,因为result在函数外部无效
  • let:块级变量,用来声明在某个代码块内部有效的变量,但是不会提升到代码块的顶部。例如:
if (n > 0) {
  let message = "n是正数"; // 这是一个块级变量,它只在if语句的代码块内部有效
  console.log(message); // 输出"n是正数"
}
console.log(message); // 这里会报错,因为message在if语句的代码块外部无效
  • const:常量,用来声明一个不可修改的变量,它也是一个块级变量。例如:
const PI = 3.14; // 这是一个常量,它的值不能被修改
PI = 3.15; // 这里会报错,因为不能修改常量的值
  • global:全局变量,用来声明在任何地方都有效的变量。例如:
name = "Alice"; // 这是一个全局变量,它没有使用var、let或const关键字声明
console.log(name); // 输出"Alice"
function sayHello() {
  console.log("Hello, " + name); // 在函数内部也可以访问name变量
}
sayHello(); // 输出"Hello, Alice"

七、函数(最重要) 

        函数是JS中非常重要的一个概念,它可以封装一段可重用的代码,然后在不同的地方调用它,从而简化代码和提高效率。在JS中,可以使用以下的方式来定义和调用函数:

  • 函数声明:使用function关键字来声明一个函数,给它一个名字和一组参数,然后在大括号里面写上函数的代码块。例如:
function square(n) { // 声明一个名为square的函数,它接受一个参数n
  return n * n; // 返回n的平方
}
  • 函数表达式:使用var、let或const关键字来声明一个变量,并将一个匿名函数赋给它,然后在小括号里面写上函数的参数,再在大括号里面写上函数的代码块。例如:
var cube = function(n) { // 声明一个名为cube的变量,并将一个匿名函数赋给它,它接受一个参数n
  return n * n * n; // 返回n的立方
}
  • 箭头函数:使用=>符号来定义一个简洁的函数表达式,如果只有一个参数,可以省略小括号;如果只有一条语句,可以省略大括号和return关键字。例如:
var double = n => n * 2; // 声明一个名为double的变量,并将一个箭头函数赋给它,它接受一个参数n,并返回n的两倍
  • 函数调用:使用函数名或者变量名加上小括号来调用一个函数,并在小括号里面传入实际的参数值。例如:
console.log(square(5)); // 调用square函数,并传入5作为参数,输出25
console.log(cube(3)); // 调用cube变量所指向的函数,并传入3作为参数,输出27
console.log(double(4)); // 调用double变量所指向的函数,并传入4作为参数,输出8

以上就是本文的全部内容啦,学习到这很棒喔,给你点赞~ 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

[前端系列第3弹]JS入门教程:从零开始学习JavaScript 的相关文章

随机推荐

  • Java8 stream 对List<Map<String,Object>> 去重、过滤、排序等操作

    1 去重 List
  • 业务敏捷与SOA

    Web2 0催生广泛的蝴蝶效应 亚洲蝴蝶拍拍翅膀 将使美洲几个月后出现比狂风还厉害的龙卷风 蝴蝶效应触发了六十年代对混沌理论的广泛关注 过去十几年 由圣菲研究所发起的复杂性理 论的研究也在对传统经济学发起挑战 有位经济学家还专门写了本 蝴蝶
  • 找不到msvcp120dll,无法继续执行代码,怎么解决?

    当msvcp120 dll文件丢失或找不到时 会导致无法运行使用C 编写的程序 这可能是由于以下原因导致的 1 删除或移动文件 如果你不小心删除了或移动了msvcp120 dll文件 你将无法找到它并加载它 从而导致程序无法正常运行 2 文
  • 使用docker编排容器

    使用Dockerfile构建一个自定义的nginx 首先用docker拉一个nginx镜像 docker pull nginx 拉取完成后 编辑一个Dockerfile文件 vim Dockerfile 命令如下所示 FROM 后面跟的你的
  • Python---copy()、deepcopy()与赋值的区别

    copy 与deepcopy 之间的主要区别是python对数据的存储方式 首先直接上结论 深复制 即将被复制对象完全再复制一遍作为独立的新个体单独存在 所以改变原有被复制对象不会对已经复制出来的新对象产生影响 而等于赋值 并不会产生一个独
  • jmeter的安装与配置环境变量_win7系统

    一 jmeter篇 1 安装JDK ps JMeter是纯java应用程序 需要配置Java环境才能正常运行 JVM1 8或者更高版本 注 JMeter3 2版本 要求jdk1 8及以上 官网 https www oracle com te
  • linux rar解压命令

    一 简介 解压缩是一个常用的操作 在 Linux 中通常比较常用的是 tar 命令 zip 和 rar 命令则是 Windows 中比较常用 二 快速使用 1 tar 命令 语法 tar 主选项 辅选项 文件或目录 示例 压缩文件 file
  • 树莓派静态库和动态库的生成和使用

    静态库 编译时就加入库文件 运行快 但是更新版本操作较麻烦 动态库 程序运行时动态加载的库文件 供给调用程序使用 只调用一次 多个程序可使用 节省内存 因为APP里面没有库文件源码 升级时只要库的名字不变 函数名和参数不变 只是实现做了优化
  • SQL Server数据类型

    最小单位是bit 位 一个字节是8位 一般一个中文字符占据2字节 英文字符占据1个字节 var开头的会把尾部不足的部分去掉 不带var的会补上 n开头的存储一个字符占2个字节 采用Unicode字符集 tinyint 1个字节 8位 范围0
  • 网络安全这条路怎么走?应该学些什么?

    我之前就写过一篇文章专门解答了这个问题 但是还是有很多小伙伴并不清楚这条路该怎么走下去 不同于Java C C 等后端开发岗位有非常明晰的学习路线 网路安全更多是靠自己摸索 要学的东西又杂又多 难成体系 网络安全虽然是计算机众多方向中的一支
  • 一文带你了解如何编写测试用例?【0基础也能看懂】

    我是小濠 一个快要秃头的测试人 欢迎点赞 收藏 留言 如有错误敬请指正 我收集了一些软件测试资料 关注我公众号 程序员小濠 免费领取 送给大家一句话 世界的美丽 来源于你的努力 因此 在介绍如何编写测试用例之前 先看一个软件系统登录功能的测
  • 查看WIN10密钥备忘

    查看WIN10密钥备忘 1 我们按下 Win R 打开运行或者开始菜单右键选择运行 输入 regedit 点击确定打开注册表编辑器 2 依次展开 HKEY LOCAL MACHINE SOFTWARE Microsoft Windows N
  • 【Android -- 相机】调用摄像头拍照 & 选择照片

    效果图 现在很多应用中都会要求用户上传一张图片来作为头像 首先我在这接收使用相机拍照和在相册中选择图片 接下来先上效果图 实现代码 1 布局文件
  • Android OpenGL ES 3.0 开发 :3D实例化(Instancing 3D)

    1 OpenGL ES 实例化 Instancing OpenGL ES 实例化 Instancing 是一种只调用一次渲染函数就能绘制出很多物体的技术 可以实现将数据一次性发送给 GPU 告诉 OpenGL ES 使用一个绘制函数 将这些
  • Leetcode 82. Remove Duplicates from Sorted List II

    题目描述 Given a sorted linked list delete all nodes that have duplicate numbers leaving only distinct numbers from the orig
  • 数据库设计步骤(超级详细)

    数据库设计 我们先来看这样一个问题 假如遇到下面这样的设计需求 我们如何完成数据库的设计呢 设计需求 假设商品经销商有基本实体集 供应商Vendors 产品目录Products 顾客信息Customers和顾客订单Orders 各个实体的属
  • java.lang.object 下载_Java总结篇系列:java.lang.Object

    从本篇开始 将对Java中各知识点进行一次具体总结 以便对以往的Java知识进行一次回顾 同时在总结的过程中加深对Java的理解 Java作为一个庞大的知识体系 涉及到的知识点繁多 本文将从Java中最基本的类java lang Objec
  • QT-信号和槽函数

    信号和槽函数 signals slots Qt5作为c 的GUI开发类库 其最具代表性的特点就是信号和槽 类似于中断和中断处理函数调用的回调 callback 函数 但具体实现在应用层 并且使用起来较后者更为方便 作用 用于对象间的通信 实
  • 计算机网络学习—iptables的SNAT和DNAT

    iptables的SNAT和DNAT iptables SNAT SNAT策略概述 SNAT策略的典型应用环境 局域网主机共享单个公网IP地址接入internet SNAT策略的原理 源地址转换 Source Network Address
  • [前端系列第3弹]JS入门教程:从零开始学习JavaScript

    本文将带领大家 从零开始学习JavaScript fighting 目录 一 JavaScript简介 二 变量和数据类型 三 注释和分号 四 算术运算符 五 表达式和语句 六 代码块和作用域 七 函数 最重要 一 JavaScript简介