hello亲爱的小伙伴们大家好，这里是鸽了好几天的一位小萌新，之所以几天没更新是因为最近的学习阶段进入了js部分的学习，难度会比之前有所提升，所以几天都没有时间更新，那么从今天开始我就会在此更新前端中js部分的内容，希望大家与我一起前进学习，那么话不多说，让我们开始吧。
1.js的引入方式：
与css一样，js部分编辑的内容是需要在编引入到我们的html中的，所以如何引入js部分的代码时第一个我们需要面对的问题，在这里它拥有与css相似的三种方法，分别是行内式，内嵌式和外链式三种方式，下面我来把三种方法一一介绍一下。
1.行内式：
行内式顾名思义就是在行内书写的样式，直接将js代码书写在标签的内部，举个例子，我书写两个超链接标签，其中一个正常给个链接，另一个给一个js样式代码：
<!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>
<a href="http://www.baidu.com">点击1</a>
<a href="javascript:alert('hello javascript');">点击2</a>
</body>
</html>最终输出结果是两个可点击的超链接，第二个就是用js书写的，点击会显示js输出样式;
2.内嵌式：
这个内嵌式可比css厉害一点，因为它可以书写在html中的任何地方，只要用 script包裹起来，就可以把它放在标签的任何地方，举例：
<!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 type="text/javascript">
alert("hello");
</script>
</body>
</html>
输出结果：
3.外链式：
外链式和css就差不多了，在外部编写js代码，然后在head中引入，具体方法举例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<!-- 引入外部js文件 -->
<script type="text/javascript" src="js/my.js">
</head>
<body>
</body>
</html>此时标签的内部不用再书写js代码，如果需要书写的话，再用一个script标签包裹起来然后使用即可。
2.js的输入和输出方式：
1.输入方式：
js可以实现根据用户需求输入用户想输入的东西，我们需要用到的是window.prompt，进行输入的方法如下：
<!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 type="text/javascript">
window.prompt("请输入你的身高");
</script>
</body>
</html>
然后输出的结果为下图，我们可以输入任意的数字：
2.输出方式：
输出方式和输入方式比起来比价多样，我们有三种方法进行输出，分别为：
1.alert() 一般用作警告窗使用，在网页中弹出窗口
2.console.log() 这里我们经常用到的是第二种方法，在控制台输出
3. document.write() 第三种方法会让数据输出到网页当中
举例：
<!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 type="text/javascript">
alert("警告，您已经泄露你的银行密码");
console.log("我是被输出在控制台的一行字");
document.write("我是被输入到网页上的一行字");
</script>
</body>
</html>
最终输出结果我要用三张图片来显示，因为这是三种不同的输出的方式：
首先会跳出弹窗：
然后点击确定之后会在网页上看见字：
最后按F12打开控制台，可以看到最后的一段字：
这里便是js输出的三种方法，大家可以练习一下。
3.变量的使用方法：
在介绍完基本的输入输出方式之后，今天再给大家介绍一下js中最基本的变量以及变量的使用方法：
变量的定义：指代计算机中的一段内存空间，可以临时储存数据，与它所对应的数据库mysql则可以永久储存数据。
那么如何去使用变量，在此我简单分为三个步骤给大家说明：
1. 变量的声明，首先我们使用变量就得先声明一个变量，用来开辟内存空间；
2. 变量赋值，声明变量过后，需要向内存空间中存储数据；
3. 使用变量，最后就可以使用这个变量进行业务逻辑的编写。
使用变量的时候，为了方便我们区分，都会给每个变量命名，不同的变量进行不同的命名，这样会方便后期我们调用，而变量名的命名规则如下：
1.变量名可以由，数字，字母，下划线，$，元素组成；
2.不以数字开头，比如可以命名a1但是不可以命名为1a；
3. 不能使用关键字和保留字,例如：var，for，if，class等关键词都不可以使用；
4. 变量名要见名知意，让别人一看到就知道大概是什么意思；
5. 使用驼峰命名方法：大驼峰是指每个单词的首字母都要大写，比如StudentName，小驼峰是指第一个单词的首字母小写其余首字母大写，比如studentName。
下面我来举个例子给大家看看。如何进行变量的命名以及赋值，还有如何更改变量值的方法：
<!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 type="text/javascript">
//给一个变量命名
var age;
//给命名的变量赋值
age = 18;
//输出值
console.log(age);
//一般不为了麻烦我们会简写
var age = 20;
console.log(age);
//修改变量中的值
age = window.prompt("请输入你的年龄");
console.log(age);
</script>
</body>
</html>我们输入一个年龄为30，最后再控制台显示的结果如下：
可以看到以上就是我们给变量命名赋值以及修改值的方法。
那么今天就先说到这里，后面我会持续更新js部分的学习内容给，欢迎大家的观看，让我们共勉！