JavaScript基础语法
JavaScript是在开发网页必不可少的一种语言 那如何使用Javascript呢
目录
javascript的基础使用格式
Javascript的输入和输出
输出
输入
变量的声明
声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。
关于声明变量的两种方式
关于数据类型
布尔类型
JavaScript的几个运算符
比较运算符
在JavaScript里定义数组
访问数组
数组长度的属性
数组使用
JavaScript的函数
function返回值
JavaScript属性
如何调用属性
对于上节课的复盘与总结
javascript的基础使用格式
我们要在<body>的内部标签定义javascript的语言
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 引入方式</title>
</head>
<body><!-- 内联形式：通过 script 标签包裹 JavaScript 代码 --><script>alert(' Hello World！')</script>
</body>
</html>Javascript的输入和输出
输出
JavaScript 可以接收用户的输入，然后再将输入的结果输出：
`alert()`、`document.wirte()`
alert()是弹窗输出
document.wirte()是在页面输出
以数字为例，向 `alert()` 或 `document.write()`输入任意数字，他都会以弹窗形式展示（输出）给用户。
console.log();也是输出，但是是在控制台进行打印
输入
向 `prompt()` 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 输入输出</title>
</head>
<body><script> // 1. 输入的任意数字，都会以弹窗形式展示document.write('要输出的内容')alert('要输出的内容');// 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号prompt('请输入您的姓名:')</script>
</body>
</html>变量的声明
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 声明和赋值</title>
</head>
<body><script> // let 变量名// 声明(定义)变量有两部分构成：声明关键字、变量名（标识）// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语// age 即变量的名称，也叫标识符let age</script>
</body>
</html>关键字是 JavaScript 中内置的一些英文词汇（单词或缩写），它们代表某些特定的含义，如 `let` 的含义是声明变量的，看到 `let` 后就可想到这行代码的意思是在声明变量，如 `let age;`
`let` 和 `var` 都是 JavaScript 中的声明变量的关键字，推荐使用 `let` 声明变量！！！
声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 声明和赋值</title>
</head>
<body><script> // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语// age 即变量的名称，也叫标识符let age// 赋值，将 18 这个数据存入了 age 这个“容器”中age = 18// 这样 age 的值就成了 18document.write(age)// 也可以声明和赋值同时进行let str = 'hello world!'alert(str);</script>
</body>
</html>关于声明变量的两种方式
JavaScript 使用专门的关键字 `let` 和 `var` 来声明（定义）变量，在使用时需要注意一些细节：
以下是使用 `let` 时的注意事项：
1. 允许声明和赋值同时进行
2. 不允许重复声明
3. 允许同时声明多个变量并赋值
4. JavaScript 中内置的一些关键字不能被当做变量名以下是使用 `var` 时的注意事项：
1. 允许声明和赋值同时进行
2. 允许重复声明
3. 允许同时声明多个变量并赋值大部分情况使用 `let` 和 `var` 区别不大，但是 `let` 相较 `var` 更严谨，因此推荐使用 `let`，
关于数据类型
学过c语言的大概知道几种常用的数据类型比如int char float等等......
但是在javascript里并没有那么多数据类型在js里正整数，负数，小数都属于是number类型的
还有一部分是string的类型，也就是很重要的字符串类型
number的声明以及字符串的声明如下图所示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>var a = 10;var str = '我是字符串';document.write(str);document.write(a);</script>
</body>
</html>输出效果
布尔类型
只有false或者true的这两种类型举个例子
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>var sleep = false;document.write(sleep);</script>
</body>
</html>输出的结果
JavaScript的几个运算符
在JavaScript里的几个运算符号和C语言里的运算符号的原理是相同的具体就不赘述功能了，简单的介绍一下符号
+ 求和符号
- 求差符号
* 求积符号
/ 求商符号
% 取模符号
+= 加法赋值
-+ 减法赋值
*= 乘法赋值
/= 除法赋值%= 取余赋值
++ 自增 变量自身的值加1，例如: x++
-- 自减 变量自身的值减1，例如: x--
比较运算符
> 左边是否大于右边
< 左边是否小于右边
>= 左边是否大于或等于右边
<= 左边是否小于或等于右边
=== 左右两边是否`类型`和`值`都相等 注意这里不仅仅是判断数值还判断类型是否相等
== 左右两边`值`是否相等
!= 左右值不相等
!== 左右两边是否不全等
几种与C语言相同的语法
比如while循环 for循环 switch case语句
补充 循环里同样可以用的是break与continue，也是进行同样的想法 在本篇文章不赘述了
举几个例子看一下
<script>// 1. 语法格式// for(起始值; 终止条件; 变化量) {// // 要重复执行的代码// }// 2. 示例：在网页中输入标题标签// 起始值为 1// 变化量 i++// 终止条件 i <= 6for(let i = 1; i <= 6; i++) {document.write(`<h${i}>循环控制，即重复执行<h${i}>`)}
</script>在JavaScript里定义数组
<script>// 1. 语法，使用 [] 来定义一个空数组// 定义一个空数组，然后赋值给变量 classes// let classes = [];// 2. 定义非空数组let classes = ['小明', '小刚', '小红', '小丽', '小米']
</script>访问数组
<script>let classes = ['小明', '小刚', '小红', '小丽', '小米']// 1. 访问数组，语法格式为：变量名[索引值]document.write(classes[0]) // 结果为：小明document.write(classes[1]) // 结果为：小刚document.write(classes[4]) // 结果为：小米// 2. 通过索引值还可以为数组单重新赋值document.write(classes[3]) // 结果为：小丽// 重新为索引值为 3 的单元赋值classes[3] = '小小丽'document.wirte(classes[3]); // 结果为： 小小丽
</script>数组长度的属性
<script>// 定义一个数组let arr = ['html', 'css', 'javascript']// 数组对应着一个 length 属性，它的含义是获取数组的长度console.log(arr.length) // 3
</script>数组使用
1. push 动态向数组的尾部添加一个单元
2. unshit 动态向数组头部添加一个单元
3. pop 删除最后一个单元
4. shift 删除第一个单元
5. splice 动态删除任意单元
<script>// 定义一个数组let arr = ['html', 'css', 'javascript']// 1. push 动态向数组的尾部添加一个单元arr.push('Nodejs')console.log(arr)arr.push('Vue')// 2. unshit 动态向数组头部添加一个单元arr.unshift('VS Code')console.log(arr)// 3. splice 动态删除任意单元arr.splice(2, 1) // 从索引值为2的位置开始删除1个单元console.log(arr)// 4. pop 删除最后一个单元arr.pop()console.log(arr)// 5. shift 删除第一个单元arr.shift()console.log(arr)
</script>JavaScript的函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 声明和调用</title>
</head>
<body><script>// 声明（定义）了最简单的函数，既没有形式参数，也没有返回值function sayHi() {console.log('嗨~')}// 函数调用，这些函数体内的代码逻辑会被执行// 函数名()sayHi()// 可以重复被调用，多少次都可以sayHi()</script>
</body>
</html>补充：使用function定义函数的形式 function 函数名(){函数体}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 函数参数</title>
</head>
<body><script>// 声明（定义）一个计算任意两数字和的函数// 形参 x 和 y 分别表示任意两个数字，它们是两个变量function count(x, y) {console.log(x + y);}// 调用函数，传入两个具体的数字做为实参// 此时 10 赋值给了形参 x// 此时 5 赋值给了形参 ycount(10, 5); // 结果为 15</script>
</body>
</html>function返回值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 函数返回值</title>
</head>
<body><script>// 定义求和函数function count(a, b) {let s = a + b// s 即为 a + b 的结果// 通过 return 将 s 传递到外部return s}// 调用函数，如果一个函数有返回值// 那么可将这个返回值赋值给外部的任意变量let total = count(5, 12)</script>
</body>
</html>JavaScript属性
数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。
1. 属性都是成 对出现的，包括属性名和值，它们之间使用英文 `:` 分隔
2. 多个属性之间使用英文 `,` 分隔
3. 属性就是依附在对象上的变量
4. 属性名可以使用 `""` 或 `''`，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 对象语法</title>
</head>
<body><script>// 通过对象描述一个人的数据信息// person 是一个对象，它包含了一个属性 name// 属性都是成对出现的，属性名 和 值，它们之间使用英文 : 分隔let person = {name: '小明', // 描述人的姓名age: 18, // 描述人的年龄stature: 185, // 描述人的身高gender: '男', // 描述人的性别}</script>
</body>
</html>如何调用属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 对象语法</title>
</head>
<body><script>// 通过对象描述一个人的数据信息// person 是一个对象，它包含了一个属性 name// 属性都是成对出现的，属性名 和 值，它们之间使用英文 : 分隔let person = {name: '小明', // 描述人的姓名age: 18, // 描述人的年龄stature: 185, // 描述人的身高gender: '男', // 描述人的性别};// 访问人的名字console.log(person.name) // 结果为 小明// 访问人性别console.log(person.gender) // 结果为 男// 访问人的身高console.log(person['stature']) // 结果为 185// 或者console.log(person.stature) // 结果同为 185</script>
</body>
</html>对于上节课的复盘与总结
首先引用一下学姐的博客@水工.
前端第三周 CSS进阶_水工.的博客-CSDN博客浮动，定位，伪类，伪元素https://blog.csdn.net/m0_65291134/article/details/129974321?spm=1001.2014.3001.5502通过上次课进一步的加深了对于盒子模型的理解与了解，并且了解了对于盒子的浮动，以及对于CSS的布局，进一步了解如果做一些比较简单的项目，以及清除浮动和伪类于伪元素的了解，并且知道如何进行学习前端的一些布局，进一步巩固了对于前端的理解，在文章的末尾，再次感谢学姐上一周的讲课与付出。