重生之我要学前端—JS篇（一）
什么是
JS
？它的作用是什么？它能帮助我们实现什么？那么今天我们就来揭开
JS
神秘的面纱！
文章目录
前言
大家都知道博主之前是后端路线，但是为什么突然就来前端路线了呢？？？这其中是不是有什么不可告人的秘密呢？
嘿嘿其实都不是，只是因为在公司mt给了一个内部工具开发和优化，前后端和测试都是我自己来，由于博主前端不是很好，这对于前端的工作简直是让我犹如坐牢呜呜，所以在空余的时间，博主也是打算把前端给提升提升嘿嘿。
所以就和博主一起
共进步，同成长！
JS的简介
JS
的全称为
JavaScript
—— 一种轻量级的编程语言。
JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页，其中：
- HTML 用来定义网页的内容，例如标题、正文、图像等；
- CSS 用来控制网页的外观，例如颜色、字体、背景等；
- JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。
第一个JS代码
代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>第一个JavaScript程序</title><script type="text/javascript">
document.write("<h1>小宝学JavaScrint</h1>");</script></head><body></body></html>
效果：
JavaScript的基础语法
数据类型
和其他语言一样，
JS
也是有相对应的基础类型，那接下来我们就来看看
JS
有哪些数据类型：
- String（字符串）
var x ='string';//最大值：+1.7976931348623157e+308//最小值：-1.7976931348623157e+308//0以上的最小值：5e-324 - Number（数字）
var x =100; - Boolean（布尔）
- Array（数组）
var a=[];// 定义了一个空的数组a[0]=...// 下标越界错误 a.push(..)//尾插 a.unshift(...)//头插 a.pop()//尾删 a.shift()//头删 a[index]//类似a.get()a[index]=...//类似a.set()前提是:下标要求正确合法下标[0, a.length) a.sort()//排序 - Object（对象）：除基本类型以外都是Object类型。
- Null（空）
- Undefined（未定义）
typeof： 一般用来检查一个变量的数据类型。
typeof 数据
例如：
简单的命令
- alert：提示框。
alert("")
- confirm：确认框，点击后会响应返回
true或false。confirm("")
- prompt：弹出一个输入框。
prompt();
- document.write：将内容写到 HTML 文档中。
document.write("xiaobao") - Console.log：在控制台打印相对应的信息。
console.log("这里是控制台！") - Console.dir：在控制台打印出该对象的所有信息。
console.dir("输出")---
运算符
在每种语言里基本上都是会有相之对应的运算符，当然
JS
也是有着属于他的运算符。
1、算术运算符：
- +：加法。例如：1 + 1 = 2
- -：减法。例如：1 - 1 = 0
- *：乘法。例如：1 * 1 = 1
- /：除法。例如：1 / 1= 1
- %：求余。例如：3 % 2 = 1
- ++：自增。例如：i++
- –：自减。例如：i –
2、比较运算符：
>：大于。例如：3>2<:小于。例如：2 < 3>=：大于等于。例如：2 >= 2 》 true<=：小于等于。例如： 3 <= 3 》 true==：相等运算。例如：3 == 3 》true 注意：== 会自动转换类型来比较。!=：不相等运算。===：全等比较，先判断两者类型是否相等在判断值是否相等。!==：不全等比较，类似于全等。
3、逻辑运算符：
- && ：相当于and。
- || ：相当于 or。
- ！：相当于not。
条件语句
条件语句中我们最常见的就是
if
，比如在
Java
中就有
if、else if、else
等。当然在
JS
中也是包含这个条件语句的。
- if — else
- switch — case
1、if — else：
if --- else
是我们在学习语言中最常见的一种条件判断语句。
例如：
var x =21if(x >18){
console.log("已成年！")}elseif(x ===18){
console.log("刚满18！")}else{
console.log("未成年！")}
2、switch…case：
switch…case是另一种流程控制语句。
switch语句更适用于多条分支使用同一条语句的情况。
基础语法：
switch(语句){case 表达式1:
语句...case 表达式2:
语句...default:
语句...}
循环语句
循环语句是编程语言中最为常见的一种语句，其作用就是只要满足条件，则就会一直执行。
在
JS
中所包含的循环语句有：
- while
- do…while
- for
1、while
基础语法：
while(条件){
循环语句
}
例如：
var x =10;while(x >5){
console.log(x);
x--;}
2、do…while
基础语法：
do{
循环语句
}while(条件表达式)//注意相比较于while，do...while是最少执行一次。
例如：
var i =1;do{
console.log(i);
i++;}while(i <10);
3、for
for循环可以说是最最最经典的循环语句了。基本上开发都会使用一个
for
循环。
for
循环也是最基础的循环语法。
基础语法：
for(初始化表达式 ; 条件表达式 ; 更新表达式){
语句...}
例如：
for(var i =1; i <10; i ++){
console.log(i);}
4、break和continue
- break：提前结束循环。
- continue：结束此次循环。
例如：
for(var i =0; i <10; i ++){if(i ===5){break}if(i ===3){continue}
console.log(i)}
对象
如果大家学过
Java
或者
Python
那么大家就一定会知道
对象
这个东西。
话不多说直接上代码。
//例1：var person =newObject();
person.name ="铁甲小宝";
person.age =18;
console.log(person)//例2:var person ={name:"铁甲小宝",age:18,};
console.log(person);
查询属性：
//1、对象.属性名
console.log(person.name);//2、对象['属性名']
console.log(person['name']);
删除属性：
//delete 对象.属性名delete person.name;
console.log(person);
对象的遍历：
//基础语法for(var 变量名 in 对象名){}//例子：var person ={name:"铁甲小宝",age:18}for(var personKey in person){var personVal = person[personKey];
console.log(personKey +":"+ personVal);}
函数
概念：
函数
是编程语言中比较常见的一种方法，其能封装功能。提高代码的复用率，且增加代码的简洁度。
在
JS
中也是存在
函数
，那么接下来我们就要来看看它其中的奥秘吧嘿嘿。
基本语法：
function函数名(参数){//函数体}//例如：functiontest(){
console.log("this is my frist function");}
函数的调用：
functiontest(){
console.log("this is my frist function");}//调用测试test();
return：
一个函数如果需要有返回值，则需要使用
return
来返回。
例如：
functiontest1(a, b){return a + b;}
console.log(test1(1,2));
对象中的函数：
var person ={name:"zhangsan",age:18,sayHello:function(){
console.log(name +" hello")}}
person.sayHello();
总结
本篇也是写了一周多呜呜呜，因为上班时间的原因所以就进度很慢，但是也还是会连续更新前端类型的文章的嘿嘿，还有相对应的
react
框架等。
此外还给大家推荐一个刷题小网站嘿嘿—连接
在学习的途中可以加固知识点的记忆嘿嘿。
版权归原作者 铁甲小宝同学 所有， 如有侵权，请联系我们删除。