【web前端初级课程】第四章 什么是JavaScript
目录
一、JavaScript在前端的三种写法
二、常见的弹框
三、变量
四、常量
五、数据类型
六、运算符
七、循环及函数
八、相关练习
前言
JavaScript是一个面向对象的，弱数据类型的，解释型的，动态脚本语言。
-
面向对象更符合我们对事物认识的视角，通过将代码中的角色进行归类，使得代码得到了梳理，具有更强的可读性以及可扩展性。
-
从代码可执行角度上去分类，编程语言分为编译型和解释型，从数据类型的角度去分类，分为静态类型和动态类型：
-
编译型：将整个代码编译成可执行程序，通过运行这个可执行程序达到执行代码的目的。
-
解释型：阅读到一行代码就执行改代码，不生成可执行文件。
-
静态类型：数据类型必须在创建变量的时候就进行指定。
-
动态类型：无需指定变量的数据类型，变量只有赋值的那一刻才有具体数据类型。
-
一、JavaScript在前端的三种写法
（一）行内样式：在标签中加属性
<button onclick="alert('你点我干嘛?')"> </button>>（二）页面样式
<script type="text/javascript">alert('hello world!')
</script>（三）外联样式
PS:注意进行引用的script标签不能自结束，也不能在内容部分中写代码，要写代码另起一个script标签。
二、常见的弹框
（一）alert警告框
格式：alert("自定义内容")
（二）confirm确认框
他有两个按钮，一个是取消一个是确定，点击取消confirm将会返回false，点击确定返回True。
<script>flag = confirm("自定义内容")if (flag){alert("自定义内容")}else{alert("自定义内容")}
</script>（三）prompt输入框
str = prompt("自定义问题","自定义默认答案")三、变量
（一）创建变量（主用let）
-
使用let关键字进行对变量的声明
-
使用var关键字进行对变量的声明
-
不进行声明直接通过变量名复制的方式进行创建
PS:如果无声明创建变量，变量作用域是全局
如果使用var创建变量，那么变量是函数级作用域
如果使用let创建变量，那么变量是块级作用
（二）变量的命名规范
-
首先只能使用有效字符进行命名，有效字符范围：大小写字母、数字、_、$
-
首字母不能使数字
-
不能使用关键字或者保留字来创建变量
-
变量名最好有意义 name = “lyh” age = 18
-
使用小驼峰法或者下划线法进行命名，具体选择跟官方推荐
四、常量
常量：值不会发生变化的量。
方法：使用const 关键字创建常量。
<script>const version = "3.7.3"//此行代码会错，因为常量在初始化之后就不能在修改。version = "3.7.0"
</script>五、数据类型
（一）基本数据类型
-
数值类型Number：整型int和浮点型float
-
字符串类型String：被单引号，双引号或反引号引起来的内容就是字符串
-
布尔型Boolean：他只有两个值一个是True一个是False
-
表示空类型null
-
表示这不是一个数字：NaN（not a number）
-
表示未定义：undefined
（二）引用数据类型
- 数组Array：关于多个数据的容器
- 对象Object
（三）数据类型转换
-
自动类型转换
-
强制类型转换：使用parseInt、parseFloat进行类型强制转换
六、运算符
（一）算术运算符：+ - * / **
（二）逻辑运算符：&& || ！ & |
（三）比较运算符：>、<、>=、<=、 ==、===、!=
在JS中双等只判断值是否相等不判断类型
三等会考虑变量的数据类型，如果数据类型不同，即使值一样也是返回false
（四）赋值运算符：=、+=、-=、*=、\\=、**=、 %=
（五）自增自减运算符：a++、++a、a--、--a
七、循环及函数
（一）循环结构
包括 for、while、do while、break 、continue
（二）函数
函数就是具有特定功能的代码片段。
提高代码的复用性、可读性、以及可扩展性。降低代码的耦合性（提示代码的内聚性）
语法结构
function 函数名([参数列表]){//函数相关的代码[return 返回值]
}（三）函数的分类
-
有参函数/无参函数
-
有返回值/无返回值
-
定义者：自定函数/系统函数
（四）值传递和引用传递
-
值传递：是将自身的值赋给参数，而不是将本身传递给参数。所以值传递参与运算不影响参与传值的变量。所有的基本数据类型都是值传递。
-
引用传递：是将自身传参到函数中，参与函数的运算。
（五）arguments对象
因为js对参数列表的管理非常的宽容，所以实参可以跟形参不一致，这样不会报错，所有参数都会存在函数内部的arguments中，我们可以通过遍历的方式访问每一个参数。
这样做的好处是，当我需要给扩展该函数，无需修改参数列表，只需判断当前参数的个数，根据个数的不同执行，不同的代码。增强代码的可扩展性。
（六）匿名函数
匿名函数就是没有名字的函数，一般这种函数使用的场景是，只需要调用这么一次，为了这一次的使用没必要起名字，于是匿名函数得到了可用武之地。
function show(fn){fn()
}
how(function(){alert("1111")
})（七）lambda表达式（箭头表示）
lambda表示可以进一步简化匿名函数的结构,
当lambda表达式只有一个参数的时候，参数的小括号可以省略。
当lambda表达式只有一行代码的时候，大括号可以省略。
//单参单行
let fun = x => x + 5
//多参单行
fun = (x, y) => x + y
//多参多行
fun = (x, y) => {let result = x * yreturn result
}（八）递归
递归：常用于分治思想编程，有两个必备的特点：1.自己调用自己 2.又递归结束的条件。
八、相关练习
练习一：菱形代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>菱形</title></head><body><script>cengshu=parseInt(prompt("请输入层数"))up_cengshu=Math.ceil(cengshu/2)for(let i=1;i<=up_cengshu;i++){str1=""for(let j=1;j<=up_cengshu-i;j++){str1+=" "}for(let j=1;j<=i*2-1;j++){str1+="*"}console.log(str1)}under_cengshu=cengshu-up_cengshuz=under_cengshuif(cengshu%2==0){for(let i=1;i<=under_cengshu;i++){str2=""for(let j=2;j<=i;j++){str2+=" "}for(let j=1;j<=z*2-1;j++){str2+="*"}console.log(str2)z-=1}}else{for(let i=1;i<=under_cengshu;i++){str2=""for(let j=1;j<=i;j++){str2+=" "}for(let j=1;j<=z*2-1;j++){str2+="*"}console.log(str2)z-=1}}</script></body>
</html>练习二：求三位水仙花数
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>for(i=100;i<=999;i++){let baiwei=Math.floor(i/100)let shiwei=Math.floor(i%100/10)let gewei=i%10if(Math.pow(baiwei,3)+Math.pow(shiwei,3)+Math.pow(gewei,3)==i){console.log(i)}}</script></body>
</html>练习三：求10！
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>let sum=1for(i=2;i<=10;i++){sum=sum*i}console.log(sum)</script></body>
</html>练习四：求10！+9！+8！……1！
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>let zonghe=0for(i=1;i<=10;i++){let sum=1for(j=2;j<=i;j++){sum=sum*j}zonghe=zonghe+sum}console.log(zonghe)</script></body>
</html>都看到这里了，创作不易，大家点个赞再走呗！！- ̗̀(๑ᵔ⌔ᵔ๑)