【JS30】JavaScript 30天练习第一天简介

最新推荐文章于 2022-03-14 15:50:49 发布

duyanke888

最新推荐文章于 2022-03-14 15:50:49 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript30Days 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_34378032/article/details/122813672

版权

JavaScript30Days 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

📔 第一天简介

本文参考了GitHub项目 Asabeneh/30-Days-Of-JavaScript，该项目只有英语、俄语和西班牙语，对中国新生代农民工不是很友好。
本人在翻译的过程中也对原文进行了一些修改，有问题还望读者指出。

介绍

祝贺您决定参加为期30天的JavaScript编程挑战。在这个挑战中，您将学习成为JavaScript程序员所需要的一切。

30DaysOfJavaScript编程挑战是一个针对初学者和高级JavaScript开发人员的指南。欢迎来到JavaScript。JavaScript是开发web网络应用的语言。我喜欢使用和教学JavaScript，我希望您也能喜欢。

在这一步一步的挑战中，您将学习JavaScript，人类历史上最流行的编程语言。

JavaScript被用来为网站添加交互性，开发移动应用程序、桌面应用程序、游戏，现在的JavaScript也可以用于机器学习和人工智能。

JavaScript(JS) 近年来越来越流行，并连续六年成为领先的编程语言，是Github上最常用的编程语言。

要求

应对此次挑战，您不需要任何其它先前的编程知识。您只需要：

一颗想要学习的心
一台电脑
网络
一个浏览器
一个代码编辑器

设置

相信你有动力和强烈的愿望成为一名开发人员，并且拥有一台连有互联网的计算机电脑。这些准备好了，就可以开始了。

下载Node.js

就算你现在并不需要下载Node.js，但是你后面早晚要下载。
下载Node.js.

下载好安装包后双击安装。

安装Node.js

我们可以打开设备终端或命令行运行如下代码检验Node.js是否安装成功。

$ node -v

v12.14.0

在制作本教程时，我使用的是 Node 版本 12.14.0，但现在推荐下载的 Node.js 版本是 v14.17.6。

浏览器

尽管市面上有很多浏览器，但是我这里推荐使用Google Chrome谷歌浏览器。

下载谷歌浏览器

如果你电脑上没有的话，可以下载谷歌浏览器。我们可以在浏览器控制台上编写短小的 JavaScript 语句代码，但我们不使用浏览器控制台来开发应用程序。

打开谷歌浏览器控制器

可以通过单击浏览器右上角的三个点、选择更多工具 -> 开发人员工具或使用键盘快捷键来打开谷歌浏览器控制台。这里更推荐使用快捷键。
谷歌浏览器控制台

使用键盘快捷键打开谷歌浏览器控制台。

Mac
Command+Option+J

Windows/Linux:
Ctl+Shift+J

打开谷歌浏览器控制台后，请点击查看标记出来的按钮。我们将在控制台上花费大部分时间。控制台是JavaScrip 代码所在的地方。 Google Console V8 引擎将 JavaScript 代码更改为机器代码。
让我们在 Google Chrome 控制台上编写一段 JavaScript 代码：
谷歌浏览器的简单输出

在浏览器控制台写代码

我们可以在 Google 控制台或任何浏览器控制台上编写任何 JavaScript 代码。但是，对于此次挑战，我们只关注 Google Chrome 控制台。使用以下命令打开控制台：

Mac
Command+Option+I

Windows:
Ctl+Shift+I

Console.log

为了编写我们的第一行JavaScript代码，我们使用JS内置函数console.log( )。我们传入一个参数作为输入数据，可以得到输出结果。在这里，传入了’Hello,World!’。

console.log('Hello,World!')

带有多个参数的 Console.log

console.log() 函数可以采用逗号分隔的多个参数。语法如下所示：console.log(param1, param2, param3)

输出多个参数

console.log('Hello', 'World', '!')
console.log('HAPPY', 'NEW', 'YEAR', 2022)
console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript')

从上面的代码片段可以看出，console.log() 可以接受多个参数。

恭喜！您使用 console.log() 编写了您的第一个 JavaScript 代码。

我们必须在代码中添加注释。注释可以提高我们代码的可读性，并且可以在我们的代码中留下一些标记以便下次查看。当然， JavaScript 并不执行我们代码的注释部分。在 JavaScript 中，任何以 // 开头的文本行都是注释，像 /* */ 这样的任何内容也是注释。

示例：单行注释

// 这是第一行注释
// 这是第二行注释
// 我是单行注释

示例：多行注释

/*
这是一个多行注释
 多行注释可以多行
 JavaScript 是网络语言
 */

语法

编程语言和人类语言一样。英语或许多其他语言使用单词、短语、句子、复合句等来传达有意义的信息。语法的英语含义是 用一种语言对单词和短语进行排列以创建格式良好的句子 。语法的技术定义是计算机语言中语句的结构。编程语言具有语法。 JavaScript 作为一种编程语言，与其他编程语言一样，它有自己的语法。如果我们不编写 JavaScript 可以理解的语法，它将引发不同类型的错误。稍后我们将探讨不同类型的 JavaScript 错误。现在，让我们看看语法错误。

谷歌浏览器输出语法错误

在这里，我故意犯了一个错误，控制台会因此触发语法错误提示。事实上，语法是非常有用的。它会提示程序犯了什么类型的错误。通过阅读错误反馈指南，我们可以准确地更正语法错误以便解决问题。从程序中发现和消除错误的过程称为调试。上图的问题可以做如下修复：

console.log('Hello, World!')
console.log('Hello, World!')

到目前为止，我们看到了如何使用 console.log() 函数输出文本。如果我们使用 _console.log()_函数打印文本或字符串，文本必须在单引号（’’）、双引号（""）或反引号（``）内。
例如:

console.log('Hello, World!')
console.log("Hello, World!")
console.log(`Hello, World!`)

计算

现在，让我们在谷歌浏览器控制台上练习使用 console.log() 编写 JavaScript 代码来处理数字数据类型。
除了文本，我们还可以使用 JavaScript 进行数学计算。让我们做以下简单的计算。
控制台可以在没有 console.log() 函数的情况下直接接受参数。但是，仅仅是本文为了方便演示才把语句放在控制台演示，因为大多数时间你都是在文本编辑器中编程，并且某些函数是强制性使用的。您可以直接使用控制台上的说明进行操作。

js计算

console.log(2 + 3) // 加法
console.log(3 - 2) // 减法
console.log(2 * 3) // 乘法
console.log(3 / 2) // 除法
console.log(3 % 2) // 模数 - 求余数
console.log(3 ** 2) // 求幂 3 ** 2 == 3 * 3

代码编辑器

我们可以在浏览器控制台上编写代码，但它不适用于更大的项目。在真实的工作环境中，开发人员使用不同的代码编辑器来编写他们的代码。在本文战中，我们将使用 Visual Studio Code 来写代码。

安装 Visual Studio Code

Visual Studio Code 是一个非常流行的开源文本编辑器。我会推荐下载 Visual Studio Code，但如果您有别的代码编辑器（如，IDEA、Eclipse等），请随意。

vscode

如果您已成功安装了 Visual Studio Code，让我们开始使用它。

将 JavaScript 添加到网页

可以通过三种不同的方式将 JavaScript 添加到网页中：

行内脚本
内部脚本
外部脚本
多个外部脚本

以下部分展示了将 JavaScript 代码添加到网页的不同方法。

行内脚本

在桌面或任何位置创建一个项目文件夹，将其命名为 30DaysOfJS 并在项目文件夹中创建一个 index.html 文件。然后粘贴以下代码并在浏览器中打开它，例如 Chrome。

<!DOCTYPE html>
<html>
    <head>  
        <title>行内脚本</title>
  </head>
  <body>
        <button onclick="alert('Welcome to 30DaysOfJavaScript!')">Click Me</button>
  </body>
</html>

现在，您刚刚编写了您的第一个内联脚本。在程序结果中点击按钮使用 alert() 内置函数创建弹出警报消息。

内部脚本

内部脚本可以写在标题（head）或正文（body）中，但最好放在HTML文档的正文中。
首先，让我们写在页面的头部。

<!DOCTYPE html>
<html>
  <head>
    <title>内部脚本</title>
    <script>
      console.log('Welcome to 30DaysOfJavaScript')
    </script>
  </head>
  <body></body>
</html>

这就是我们大部分时间编写内部脚本的方式。在正文部分编写 JavaScript 代码是最首选的选项。打开浏览器控制台以查看 console.log() 的输出

<!DOCTYPE html>
<html>
  <head>
    <title>30DaysOfScript:Internal Script</title>
  </head>
  <body>
    <button onclick="alert('Welcome to 30DaysOfJavaScript!');">Click Me</button>
    <script>
      console.log('Welcome to 30DaysOfJavaScript')
    </script>
  </body>
</html>

打开浏览器控制台以查看 console.log() 的输出

控制台输出

外部脚本

与内部脚本类似，外部脚本链接可以在标题或正文中，但最好放在正文中。、

首先，我们应该创建一个扩展名为 .js 的外部 JavaScript 文件。所有以 .js 扩展名结尾的文件都是 JavaScript 文件。在您的项目目录中创建一个名为 Introduction.js 的文件，并编写以下代码并将此 .js 文件链接到正文底部。

console.log('Welcome to 30DaysOfJavaScript')

head 中的外部脚本：

<!DOCTYPE html>
<html>
  <head>
    <title>外部脚本</title>
    <script src="introduction.js"></script>
  </head>
  <body></body>
</html>

body 中的外部脚本：

<!DOCTYPE html>
<html>
  <head>
    <title>外部脚本</title>
  </head>
  <body>
    <!-- 它可以在标题或正文中-->
    <!-- 这里推荐放置外部脚本的地方 -->
    <script src="introduction.js"></script>
  </body>
</html>

打开浏览器控制台即可查看console.log()的输出。

多个外部脚本

我们还可以将多个外部 JavaScript 文件链接到一个网页。
在 30DaysOfJS 文件夹中创建一个 helloworld.js 文件并编写以下代码。

console.log('Hello, World!')

<!DOCTYPE html>
<html>
  <head>
    <title>多个外部脚本</title>
  </head>
  <body>
    <script src="./helloworld.js"></script>
    <script src="./introduction.js"></script>
  </body>
</html>

注意：您的 main.js 文件应位于所有其他脚本下方。记住这一点非常重要。
多行输出

数据类型简介

在 JavaScript 和其他编程语言中，有不同种类的数据类型。以下是 JavaScript 基本数据类型：String、Number、Boolean、undefined、Null 和 Symbol，共6种。JavaScript还有引用数据类型：Object、Array、Function ，共3种。

字符串（String）

两个单引号、双引号或反引号之间的一个或多个字符的集合。

例子：

'Hello World'
'我爱中国'
'JavaScript 是一种美丽的编程语言'
'东风夜放花千树 更吹落 星如雨'

数字（Number）

整数：整数（负、零和正）数
例子：
… -3, -2, -1, 0, 1, 2, 3 …
浮点数：十进制数
例子
… -3.5、-2.25、-1.0、0.0、1.1、2.2、3.5 …

布尔值（Boolean）

布尔值是 True 或 False。任何比较都会返回一个布尔值，该值为真或假。

布尔数据类型是真值或假值。

例子：

true // 如果灯亮，则值为 true
false // 如果灯不亮，则值为 false

未定义类型（undefined）

在 JavaScript 中，如果我们不为变量赋值，则该值是未定义的。除此之外，如果一个函数没有返回任何东西，它会返回 undefined。

let firstName
console.log(firstName) // 未定义，因为它还没有赋值

空值（null）

JavaScript 中的 Null 表示空值。

let emptyValue = null

Symbol

这里JS30的原文并未介绍，此处作为补充。

Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

Symbol 函数栈不能用 new 命令，因为 Symbol 是原始数据类型，不是对象。可以接受一个字符串作为参数，为新创建的 Symbol 提供描述，用来显示在控制台或者作为字符串的时候使用，便于区分。

let sy = Symbol("KK");
console.log(sy);   // Symbol(KK)

// 相同参数 Symbol() 返回的值不相等
let sy1 = Symbol("kk"); 
sy === sy1;       // false

检查数据类型

要检查某个变量的数据类型，可以使用 typeof 运算符。示例如下。

console.log(typeof 'Hello World') // string
console.log(typeof 5) // number
console.log(typeof true) // boolean
console.log(typeof null) // object type
console.log(typeof undefined) // undefined

变量

变量是数据的容器。变量用于在内存位置存储数据。声明变量时，会保留一个内存位置。当一个变量被赋值给一个值（数据）时，内存空间将被该数据填充。要声明变量，可以使用 var、let 或 const 关键字。

如果数据后期会发生变化，我们使用_let_。如果数据完全没有变化，我们使用_const_。例如圆周率、重力单位这些值，他们在任何情况下都不变，我们可以使用_const_。在本文中不使用 var，只是一个建议。这是一种容易出错的声明变量的方式，它有很多泄漏。我们将在其他章节详细讨论 var、let 和 const。此处，上面的解释就足够了。

有效的 JavaScript 变量名必须遵循以下规则：

JavaScript 变量名不应以数字开头。
JavaScript 变量名不允许使用除美元符号和下划线以外的特殊字符。
JavaScript 变量名遵循驼峰命名法。
JavaScript 变量名称不应在单词之间有空格。

以下是有效 JavaScript 变量的示例。

firstName
lastName
country
city
capitalCity
age
isMarried

first_name
last_name
is_married
capital_city

num1
num_1
_num_1
$num1
year2020
year_2020

上例中的第一个和第二个变量遵循在 JavaScript 中的驼峰式声明。本文中，均使用驼峰式命名进行变量命名。

无效变量示例：

  first-name
  1_num
  num_#_1

下面声明具有不同数据类型的变量。

要声明一个变量，我们需要在变量名前使用 let 或 const 关键字。在变量名之后，我们写一个等号（赋值运算符）和一个值（赋值数据）。

// Syntax
let nameOfVariable = value

声明变量的示例

// 声明不同数据类型的不同变量
let name = '张三' // 一个人的名字
let country = '中国' // 国家
let city = '北京' // 首都
let age = 100 // 年龄
let isMarried = true

console.log(firstName, lastName, country, city, age, isMarried)

//输出
张三 中国 北京 100 true

// 用数值声明变量
let age = 100 // 年龄
const gravity = 9.81 // 地球重力，单位为 m/s2
const boilingPoint = 100 // 水的沸点，温度单位为°C
const PI = 3.14 // 圆周率常数
console.log(gravity，boilingPoint，PI)

9.81 100 3.14

// 变量也可以在一行中声明，以逗号分隔
let name = '张三', // 一个人的名字
job='新生代农民工（程序员）'，
live = '中国'
console.log(name,job,live)

张三 新生代农民工（程序员） 中国

🌕 太棒了！恭喜您完成了第 1 天的挑战。

duyanke888

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JS30】JavaScript 30天练习第一天简介

???? 第一天简介本文参考了GitHub项目 Asabeneh/30-Days-Of-JavaScript，该项目只有英语、俄语和西班牙语，对中国新生代农民工不是很友好。本人在翻译的过程中也对原文进行了一些修改，有问题还望读者指出。介绍祝贺您决定参加为期30天的JavaScript编程挑战。在这个挑战中，您将学习成为JavaScript程序员所需要的一切。30DaysOfJavaScript编程挑战是一个针对初学者和高级JavaScript开发人员的指南。欢迎来到JavaScript。
复制链接

扫一扫