从0开始学习前端第二十课：JavaScript入门-程序员宅基地

技术标签：学习前端从0开始学前端 javascript

第二十课：JavaScript入门

学习目标

在本课程结束时，你将能够：

理解并书写JavaScript注释。
了解并声明不同数据类型的变量。
使用并理解JavaScript中常用的赋值、算术和比较运算符。

学习内容

注释
- 概念: 在JavaScript中，注释用于解释代码的作用，增加可读性，有助于他人（或未来的你）理解代码的意图。注释还可以用于临时禁用代码，以便调试。
- 代码示例:
```
// 这是单行注释，它解释了下面的代码行将会做什么事情

/* 这是多行注释的开始
你可以在这里写多行文本
这些文本不会被JavaScript执行
这是多行注释的结束 */
```
- 预计输出效果: 注释不会在浏览器的控制台中产生任何输出，因为它们不是可执行代码。
变量声明与数据类型
- 概念: 变量是存储信息的容器。在JavaScript中，可以使用var, let, 或 const关键字来声明变量。常见的数据类型包括：字符串(String)、数字(Number)和布尔值(Boolean)。
- 代码示例:
```
let message = "Hello, World!"; // 字符串类型
const PI = 3.14159; // 数字类型，常量声明
var isLearning = true; // 布尔类型
```
- 预计输出效果: 如果你使用console.log(variableName);来打印这些变量，你将在控制台看到相应的值输出。
运算符
- 赋值运算符: 用于给变量赋值。
  - 代码示例:
```
let x = 5; // 将5赋值给x
```
- 算术运算符: 用于执行变量和/或值之间的算术计算。
  - 代码示例:
```
let sum = x + 2; // 结果为7
let product = x * 3; // 结果为15
```
  - 预计输出效果: console.log(sum); 将输出7，console.log(product); 将输出15。
- 比较运算符: 用于比较两个值，并返回布尔值表明比较结果。
  - 代码示例:
```
let isEqual = (x === 5); // 结果为true
let isGreater = (x > 3); // 结果为true
```
  - 预计输出效果: console.log(isEqual); 将输出true，console.log(isGreater); 将输出true。

课后练习

编写注释: 找到一段代码，对其每一行添加说明性的单行或多行注释。
声明变量:
- 声明一个字符串类型的变量myFavoriteColor并赋值为你最喜欢的颜色。
- 声明一个数字类型的变量numberOfPets并赋值为你拥有的宠物数量。
- 声明一个布尔类型的变量doILikePizza并根据你是否喜欢披萨赋值为true或false。
- 使用console.log打印出上述每个变量的值。
使用运算符:
- 声明两个变量a和b，分别赋值为10和3。
- 使用算术运算符计算并打印a和b的和、差、积、商及余数。
- 检查变量a是否大于b，并使用console.log输出结果。

课后练习解析

注释编写: 具体代码取决于你选择的代码段。关键是确保注释准确反映了代码的功能和目的。

声明变量:

示例代码：

let myFavoriteColor = "blue";
let numberOfPets = 2;
let doILikePizza = true;

console.log(myFavoriteColor); // 输出: blue
console.log(numberOfPets); // 输出: 2
console.log(doILikePizza); // 输出: true

使用运算符:

示例代码：

let a = 10;
let b = 3;

console.log(a + b); // 输出: 13
console.log(a - b); // 输出: 7
console.log(a * b); // 输出: 30
console.log(a / b); // 输出: 3.3333333333333335
console.log(a % b); // 输出: 1

console.log(a > b); // 输出: true

通过这些练习，你将加深对JavaScript注释、变量声明、数据类型和基本运算符的理解。记住，编程是一项实践技能，所以多写代码，遇到问题时查找资料或询问他人也是很重要的学习过程。

章节目录
 第二十一课：控制结构 - 条件语句与循环

本文链接：https://blog.csdn.net/weixin_44738632/article/details/135827419

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

c# 调用c++ lib静态库_c#调用lib-程序员宅基地

文章浏览阅读2w次，点赞7次，收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案，在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建：添加Visual C++ , Win32 项目这......_c#调用lib

deepin/ubuntu安装苹方字体-程序员宅基地

文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体，挺好看的。注重颜值的网站都会使用，例如知乎：font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang

html表单常见操作汇总_html表单的处理程序有那些-程序员宅基地

文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--method将表单中的数据传送给服务器处理，get方式直接显示在url地址中，数据可以被缓存，且长度有限制；而post方式数据隐藏传输，_html表单的处理程序有那些

PHP设置谷歌验证器（Google Authenticator）实现操作二步验证_php otp 验证器-程序员宅基地

文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证（即Google Authenticator服务）后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器

【Python】matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距-程序员宅基地

文章浏览阅读4.3k次，点赞5次，收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距

docker — 容器存储_docker 保存容器-程序员宅基地

文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节，实现了多层数据的堆叠，为用户提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制（CoW）策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的，不建议用于生成环境。_docker 保存容器

随便推点

网络拓扑结构_网络拓扑csdn-程序员宅基地

文章浏览阅读834次，点赞27次，收藏13次。网络拓扑结构是指计算机网络中各组件（如计算机、服务器、打印机、路由器、交换机等设备）及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式，也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn

JS重写Date函数，兼容IOS系统_date.prototype 将所有 ios-程序员宅基地

文章浏览阅读1.8k次，点赞5次，收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时，通常的做法是：new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的，而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠，也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑，需要做一些额外的特殊处理，笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数，一劳永逸，避免每次ne_date.prototype 将所有 ios