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

本文将带领大家,从零开始学习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

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

你可能感兴趣的:(前端,前端,javascript,学习)