引言
上次讨论了刚开始学习C语言时在if和switch语句中容易犯的错，这篇文章再来讨论一下前端的知识：JavaScript。
JavaScript是一种脚本语言，是用来控制网页行为(动画效果)的，相当于给人了一些行为：说话、吃、跑、睡，任何一个好的网站都离不开JavaScript。
总之，JavaScript的作用就是让我们的网页“动”起来，比如用户交互(根据用户点击等操作做出反应)、动态内容(轮播图、炫酷的动画)，数据交互等。
目录
1、JS的历史
2、JS的三种写法(行内、内嵌、外链式)
3、关于变量
4、关于数据类型
5、常见的转义字符
6、思考题
废话不多说，直接进入正题。
一、JavaScript的历史
要开始正式学习JavaScript(简称JS)之前，了解一下它的历史是有必要的，一方面可以显得我们比较专业，有一定知识深度，另一方面也可以在将来进入职场之后成为和同事的一点谈资。
JavaScript之前是叫liveScript，因为在当时java非常火，而知道liveScript的人少之又少，所以当时开发js的公司-----网景公司，为了蹭java的流量，将liveScript改名为了JavaScript，从此JavaScript便一路飞速发展，直到现在JavaScript已经在前端开发中占有非常重要的地位。
首先要注意：java和JavaScript没有半毛钱关系，不要将java和JavaScript混为一谈，容易让人笑话。其次，JavaScript是历时10天开发出来的，所以有一定的瑕疵，但这并不妨碍它的迅猛发展，更不妨碍我们学习、使用它。
二、JS的三种写法
JS和CSS一样，也是有三种写法，分别为：行内式，内嵌式，外链式。
1、行内式---就是写在具体代码里面
这种写法仅适用于我们日常学习，真到开发中用到的地方特别少，而且特别简单，所以不做过多解读，这里附上一小段代码就可以解释清楚了。
<body>
<script>
</script>
<!-- 行内式js效果 在标签后面直接写js语法----语法一定要记住：规定 -->
<input type="button" value="来点我呀" οnclick="alert('开始学习js了，大家加油！')">
</body>
2、内嵌式----把js代码放到一对script标签内，整体写在head中
注意，这种写法比行内式更实用，在平时学习中更推荐这种写法，可以帮助我们有效提高代码质量，方便阅读，维护。
接着送上一段代码，为了方便理解，这里就把前面的模板一并加上了。
<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>
<script>
alert("我是内嵌式js效果");
</script>
</head>
<body>
<!-- 内嵌式js就是把js代码放在一对script里面的 -->
</body>
3、外链式 ---- 写在专门的js文件夹，且后缀为.js的文件
这种写法在我们日后进入公司做前端开发时是最常用的，优点是：真正实现了js代码和网页代码的分离，因为我们都知道，js就是用来给网页做动画效果的，所以单独写在一个文件内更方便后期的修改，查询，便于维护。当然缺点就是比较麻烦，日常学习中用内嵌式写法足矣。
1、在网页项目中创建一个叫js的文件夹
2、在js文件夹内创建一个名为index.js的文件
为什么要叫index.js呢，因为在前端开发中，我们要开发的网站首页一般名为index.html，它是用来修饰首页的所以就统一命名为index.js了。这是程序员的约定，既然我们要开始学习前端了，那么就要遵守，不要另辟奇径。
3、 在index.js文件中写好我们的js代码，然后通过script引用到index.html中
比如我们想让我们的网页弹出一个警示框，并且有文字，那么就可以这么写
这是写在index.js中的代码
alert("我是外链式js效果"); // alert(); 弹出警示框
这是写在index.html中的代码
<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>
<!-- 链接外部js文件 ---script -->
<script src="js/index.js"></script>
</head>
因为我这里的 index.js 和 index.html 是在同一个目录下，所以直接在script中添加src属性就可以引用到js文件了。
注：如果不在同一个目录，则需要在js/index.js前加上 ../(返回上一级目录)。
效果图
注意这里只是用alert()函数做一个演示，正常的网页中很少会直接弹出这么一个框框出来，所以在前端开发中慎用，否则你做出来的网页可能有种流氓网站的味道，用户体验比较差。
小结
1、外链式、内嵌式(日常学习)、外链式(正式开发)。
2、链接外部文件：script的src属性。
3、alert()函数：弹出警示框(正式开发不推荐，除非有需求)。
4、../：返回上一层目录。
三、变量
是的你没有看错，JavaScript中也有变量这么一个概念，不止有变量，JavaScript中还有函数、数据类型等概念。JavaScript中的变量跟我们学习C/C++/python等后端语言中的变量概念是一样的，如果有编程基础的话基本一句话就可以完全理解------JavaScript中的变量跟C/C++/python等后端语言中的变量概念是一样的。
先上代码再做解释
<body>
<script>
let userName = "张三"; // 变量名推荐用关键词let 右边的值赋给左边的变量
let onNumber = 123456;
console.log(userName);
console.log(onNumber);
</script>
</body>
这段代码是通过let将“张三”这个字符串赋给了名为userName的变量，123456赋给了名为onNumber的变量，然后通过console.log()函数 打印出userName和onNumber中的内容，也就是张三和123456。
有的读者可能不知道怎么看打印出来的数据，我这里就在多啰嗦一点。
1、运行代码之后右键鼠标，找到最下面的“属性”。
2、点开属性之后在点击控制台就OK了。
因为确实很简单，就不上图演示了，大家自己操作一两下就可以学会，这个要记住，以后的学习中会经常经常用到。
另外还有多种赋值方式，了解即可
1、var的作用也是赋值，以后见到不要不认识就好，因为let比var更严谨，所以推荐使用let。
2、let可以一次性赋多个值。
3、若一个变量声明了，但没有赋值，那么会输出undefined。
小结
1、JavaScript中console.log()函数是用来打印的。
2、JavaScript中赋值用let 关键字。
四、数据类型
上面提到了js中的数据类型和其他的高级语言中的数据类型的概念是一样的，有一点点编程基础的都知道，所以我这里就不做过多讲解了，只列举几个不同点。
1、js的基础数据类型：number(整型)、string(字符串)、boolean(布尔型)、null(空)、undefined(未赋值/未存在)。
2、获取一个数据的类型---- typeof()函数
语法：
1、typeof(变量名)
2、typeof 变量名 ----- 推荐写法
eg：
let str = "张三";
console.log(typeof str);
输出
3、null:空数据类型 ---- 返回object
按常理来说查看null的数据类型，所以应该返回空(null)，但其实却是返回的是object，别不信，看图说话。
这是运行以下代码输出的，有兴趣的朋友可以自己试试。
let nul = null;
console.log(typeof(nul));
想知道具体原理的朋友自行百度，因为我们这是初识js，完全涉及不到底层知识，只需要知道null的数据类型是object，且这是一个历史遗留问题即可。
小结
1、基本数据类型：number、string、boolean、null、undefined。
2、获取数据类型的函数：typeof(变量名)/typeof 变量名;
3、null的数据类型：object
五、常见的转义字符
js中的转义字符概念与其他高级语言的概念也是一样的，而且也很简单，所以不做过多讲解，不是很了解的朋友也只需要看一下下面的案例再敲几遍就可以完全掌握了。
console.log("哈哈\t呵呵");
console.log("哈哈\n呵呵");
console.log("哈哈\"呵呵");
运行结果如下
这里我们先知道这些转义字符就好，当然还有很多转义字符，需要着重强调的是如果我们想在程序中输出' " \ 这样的符号的话，直接写是会报错的，这时就需要我们的 \ 了。
\' ---- '
\" ---- "
\\ ---- \
小结：转义字符就是一些特定的字符或符号加上 \ 会成为一个新整体，产生一定效果。
六、思考题
需求1：输出---- 向天再"借"五百年
需求2：输出---- 不好好学 "就'搬砖'"
七、总结
第一周的收获：
1、了解了js的历史，增加了以后成为程序员时和同事的谈资。
2、学习了js语句的三种写法(行内式、内嵌式、外链式)及它们的好处、缺点和应用场景。
3、学习了变量和数据结构的知识，在js中应该怎么给变量赋值及各种赋值方法。
4、学习了alert()函数、typeof()函数的作用，亲自试验了查看null的数据类型输出的结果是什么，并了解了原因。
5、学习了js中的数据类型
6、最后初步接触了一些js中的转义字符，并根据提出的需求完美写出来第一个js程序。
分割线
------------------------------------------------------------------------------------------------
看到这里如果觉得有所收获非常感谢大家的点赞和关注，我立志每周最少发一篇博客，用作我当周学到知识的总结，因为时间和学业原因这里分享到的仅仅是九牛一毛，因为我在CSDN收获了很多，所以也想反馈给刚来CSDN不久，想要或正在学习编程的朋友们，觉得讲的还可以的朋友感谢关注，一起学习，每周日准时分享一周所得，我也尽量在最少的篇幅中讲的更多，更清楚。
新人发贴，感谢阅读~~~~(づ￣3￣)づ╭❤～
854
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
