这篇博客详细介绍了JavaScript的基础知识，包括基本语法、流程控制语句（如if...else、switch case、循环）、变量、函数、数组操作以及内置对象Date和Math的使用。此外，还涵盖了JavaScript对象—数组的操作，如创建、遍历和修改。最后，提供了综合练习题和思维导图，帮助读者巩固所学。
JavaScript 基础知识
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
一、JS的基本语法与结构
1.1 JavaScript 用法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body>和 <head> 部分中。
1.2 JavaScript 输出
JavaScript 没有任何打印或者输出的函数。
JavaScript 可以通过不同的方式来输出数据：
- 使用
window.alert()弹出警告框。 - 使用
document.write()方法将内容写到 HTML 文档中。 - 使用
innerHTML写入到 HTML 元素。 - 使用
console.log()写入到浏览器的控制台。
document.getElementById("demo")是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。该方法是 HTML DOM 中定义的。
innerHTML = "Paragraph changed."是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
1.3 JavaScript基本语法
JavaScript 是一个程序语言。语法规则定义了语言结构。
1. JavaScript 字面量
- 数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e):
- 字符串（String）字面量 可以使用单引号或双引号 :
"John Doe"'John Doe' - 数组（Array）字面量 定义一个数组：
[40, 100, 1, 5, 25, 10] - 对象（Object）字面量 定义一个对象：
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"} - 函数（Function）字面量 定义一个函数：
function myFunction(a, b) { return a * b;}
2. JavaScript 变量
在编程语言中，变量用于存储数据值。
JavaScript 使用关键字
var来定义变量， 使用等号来为变量赋值：
var x, length
x = 5
length = 6
3.JavaScript 操作符
JavaScript使用 算术运算符 来计算值: (5 + 6) * 10
JavaScript使用赋值运算符给变量赋值
x = 5
y = 6
z = (x + y) * 10
4.JavaScript 关键词
JavaScript 语句通常以关键词为开头。 var 关键词告诉浏览器创建一个新的变量：
var x = 5 + 6;
var y = x * 10;
5.JavaScript 数据类型
JavaScript 有多种数据类型：数字，字符串，数组，对象等等：
var length = 16; // Number 通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
var person = {
firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值
6.JavaScript 函数
JavaScript 语句可以写在函数内，函数可以重复引用：引用一个函数 = 调用函数(执行函数内的语句)。
function myFunction(a, b) {
return a * b; // 返回 a 乘于 b 的结果
}
function calc() {
var n = 1;
for (let t = 9; t >= 1; t--) {
n = (n+1)*2;
}
console.log(n);
document.getElementById("result").innerHTML ="一共有"+ n +"个桃子";
}
1.4 JavaScript 语句
JavaScript 语句是发给浏览器的命令。
这些命令的作用是告诉浏览器要做的事情。
下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 “Hello Dolly” ：
实例
document.getElementById("demo").innerHTML = "你好 Dolly.";
1. JavaScript 语句标识符
JavaScript 语句通常以一个 语句标识符 为开始，并执行该语句。
语句标识符是保留关键字不能作为变量名使用。下表列出了 JavaScript 语句标识符 (关键字) ：
| 语句 | 描述 |
|---|---|
| break | 用于跳出循环。 |
| catch | 语句块，在 try 语句块执行出错时执行 catch 语句块。 |
| continue | 跳过循环中的一个迭代。 |
| do … while | 执行一个语句块，在条件语句为 true 时继续执行该语句块。 |
| for | 在条件语句为 true 时，可以将代码块执行指定的次数。 |
| for … in | 用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。 |
| function | 定义一个函数 |
| if … else | 用于基于不同的条件来执行不同的动作。 |
| return | 退出函数 |
| switch | 用于基于不同的条件来执行不同的动作。 |
| throw | 抛出（生成）错误 。 |
| try | 实现错误处理，与 catch 一同使用。 |
| var | 声明一个变量。 |
| while | 当条件语句为 true 时，执行语句块。 |
1.5 JavaScript 变量
1.声明（创建） JavaScript 变量
var carname;
carname="Volvo";
var carname="Volvo";
var lastname="Doe", age=30, job="carpenter";
<p id="demo"></p>
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
1.6 JavaScript 比较和逻辑运算符
比较和逻辑运算符用于测试 true 或者 false。
1. 比较运算符
| 运算符 | 描述 |
|---|---|
| == | 判断 |
| === | 绝对等于（值和类型均相等） |
| != | 不等于 |
| !== | 不绝对等于（值和类型有一个不相等，或两个都不相等） |
| > | 大于 |
| < | 小于 |
| >= | 大于或等于 |
| <= | 小于或等于 |
| = | 赋值 |
2.逻辑运算符
逻辑运算符用于测定变量或值之间的逻辑。
给定 x=6 以及 y=3，下表解释了逻辑运算符：
- && and与
- || or或
- ! not非
二、JavaScript 流程语句
2.1 if…else 语句
- if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
- if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
- JavaScript三目运算 - 当条件为true 时执行代码，当条件为 false 时执行其他代码
- if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
1. 语法
if (condition){
当条件为 true 时执行的代码
}
if (condition){
当条件为 true 时执行的代码
}else{
当条件不为 true 时执行的代码
}
if (condition1){
当条件 1 为 true 时执行的代码
}else if (condition2){
当条件 2 为 true 时执行的代码
}else{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
2. 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分数页面优化输出</title>
</head>
<body>
<form action="" method="post">
<!-- 1、设置页面 -->
<input type="text" id="score" placeholder="请输入你的分数" />
<!-- 2、设置事件驱动提交按钮 -->
<input type="button" name="anniu" value="领取奖励" onclick="jiangli()" />
<!-- js与dom交互 -->
<div id="msg"></div>
</form>
</body>
<script type="text/javascript">
// 3、自定义函数,函数声明
function jiangli() {
// div中msg初始化
document.getElementById("msg").innerHTML = "";
// 4、输入框 得到页面上文本框text的score中的输入的值
let a = document.getElementById("score").value;
// 5、类型转换
a = parseFloat(a);
// 6、控制输入数字为1-100；
if (!(a >= 0 && a <= 100)) {
document.getElementById("msg").innerHTML = "请输入0-100范围内的分数！";
return;
}
// 7、分数a的条件判断
let msg = ""
if (a >= 90 && a <= 100) {
msg = "奖励两根雪糕！";
} else if (a >= 80) {
msg = "奖励一根冰棒！";
} else if (a >= 70) {
msg = "奖励女子单打！";
} else if (a >= 60) {
msg = "奖励男子单打！";
} else if(a >= 0) {
msg = "奖励男女组合双打！";
}
document.getElementById("msg").innerHTML = msg;
}
</script>
</html>
2.2 switch case 语句
1. 语法
<script type="text/javascript">
switch (n) {
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}
</script>
2. 实例
<script type="text/javascript">
// 小括号内是一个变量或表达式
let a = "A";
switch (a) {
// 用a和case后面的每个值进行一次匹配
case 'A':
// hello =>执行的代码块
console.log('A')
break; // break跳出
case 'B':
// hello =>执行的代码块
console.log('B')
break; // break跳出
case 'C':
// hello =>执行的代码块
console.log('C')
break; // break跳出
default: //上面所有的case都不匹配，走default的代码块
console.log('default')
break;
}
</script>
2.3 while 循环
while循环会在指定条件为真时循环执行代码块。先判断条件，再执行循环体
1. 语法
while (条件)
{
需要执行的代码
}
2. 实例
<script type="text/javascript">
// 自定义变量
function calc() {
let i = 101;
let str ="";
// 循环条件
while (i <= 199) {
// 条件判断,满足则输出结果
if (i % 3 == 1 && i % 4 == 2 && i % 5 == 3) {
console.log("人数可能为" + i + "人");
str = str +i+" ";
}
// i自增
i++;
}
document.getElementById("result").innerHTML = str;
}
</script>
//--------------------------------------------------------------------------------
<script type="text/javascript">
// 循环结构常见要素：循环变量；循环条件；
// while循环
let i = 1; //循环变量
while(i<=100){
//循环条件；一定在某一刻为false
console.log("helloword" + i)
i++; //循环变量要变化，目的是为了在某一刻循环条件为false;
// 循环内部，通过特定的条件判断来执行跳出循环操作
break;
}
</script>
//--------------------------------------------------------------------------------
<script type="text/javascript">
function calc() {
// 获取文本框中输入的值；
let num = document.getElementById("num").value;
num = parseInt(num);
let i = 1; //循环变量
let sum = 0; //定义一个变量和sum，初始值为0；
while (i <= num) {
//循环条件；一定在某一刻为false
// 累加
sum = sum + i; // sum+ = i;
i++;
}
document.getElementById("result").innerHTML = sum;
}
</script>
// 1 <= 4 判断完了 再++ 2
// 2 <= 4 判断完了 再++ 3
// 3 <= 4 判断完了 再++ 4
// 4 <= 4 判断完了 再++ 5
// 5 <= 4 判断完了 再++ 6
<script type="text/javascript">
let i = 1;
while(i++<=4);
console.log("i"+i);
</script>
i++ //先引用后自增
++i //先自增后引用
2.4 do/while 循环
先执行一次，再判断。当程序执行到
while循环时 ， 会首先判断小括号里的值 ，如果值：为假 ：结束
while语句 ， 程序继续向下走为真 ：会把
while循环里大括号里的所有内容执行一次 ， 全部执行完毕之后 ，会再度来到条件处判断小括号里的值 ， 如果值条件一直为
true，且没有break return， 那么循环会一直循环下去 （死循环）
1. 语法
do {
需要执行的代码 } while (循环条件);
2. 实例
let i =1;
do
{
console.log("i"+i);
}
while (i--<=0);
2.5 for 循环
循环可以将代码块执行指定的次数。
先判断条件，再执行循环体
1.语法
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
最低0.47元/天 解锁文章
扫一扫
222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
