第50天学习打卡（JavaScript）

前端三要素

HTML(结构)：超文本标记语言（Hyper Text Markup Language）,决定网页的结构和内容。

CSS(表现)：层叠样式表(Cascading Style Sheets),设定网页的表现样式。

JavaScript(行为):是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行，用于控制网页行为。

表现层（CSS）

CSS层叠样式表是一门标记语言，并不是编程语言。因此不可以自定义变量，不可以引用等，。换句话说就是不具备任何语法支持，它主要缺陷如下：

语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；

没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；

这就导致了在工作中增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为【CSS预处理器】的工具，提供CSS缺失的样式层复用机制，减少冗余代码，提高样式代码的可维护性。大大提高了前端的样式上的开发效率。

什么是CSS预处理器

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是用专门的编程语言，进行web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用。

常用的CSS预处理器有哪些

SASS:基于Ruby,通过服务端处理，功能强大，解析率高，需要学习Ruby语言，上手难度高于LESS.

LESS:基于NodeJS,通过客户端处理，使用简单，功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以后台人员如果需要的话，建议使用LESS.

行为层（JavaScript）

JavaScript 一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

原生JS开发，也就是让我们按照[ECMAScript]标准的开发方式，简称ES,特点是所有浏览器都支持。

TypeScript微软的标准

TypeScript 是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

该语言的特点就是除了具备ES的特性之外还纳入了许多不在标准范围内的新特性，所有会导致很多浏览器不能直接支持TypeScript语法，需要编译后（编译成JS）才能被浏览器正确执行。

JavaScript框架

jQuery:大家熟知的JavaScript库，优点是简化了DOM操作，缺点是DOM操作太频繁，影响前端性能，在前端眼里使用它仅仅是为了兼容IE6 、7、8；

Angular:Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的概念，与微软合作，采用TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理。

React:Facebook出品，一款高性能的JS前端框架；特点是提出了新概念【虚拟DOM】用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为要额外学习一门【JSX】语言。

Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化、路由、状态管理等新特性。其特点是综合了Angular(模块化)和React(模拟DOM)的优点；

Axios:前端通信框架；因为Vue的边界很明确，就是为了处理DOM,所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery提供的AJAX通信功能。

1.什么是JavaScript

JavaScript是一门世界上最流行的脚本语言

一个合格的后端人员，必须要精通JavaScript

ECMAScript它可以理解为是JavaScript的一个标准

但是大部分浏览器还只停留在支持es5代码上！

开发环境...线上环境，版本不一致。

2 快速入门

2.1 引入JavaScript

1.内部标签

 <script>
     //注释方式
 </script>

2.外部引入

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 
 
 <!--    script标签内，写Javascript代码
           alert 弹窗-->
 <!--    <script>-->
 <!--        alert('hello,world');-->
 
 <!--    </script>-->
 <!--    外部引入-->
 <!--    注意：script标签必须成对出现-->
     <script src="js/qjjs.js"></script>
 
 <!--不用显示定义type,也默认就是javascript-->
     <script type="text/javascript"></script>
 
 <!--这里也可以放script-->
 </head>
 <body>
 
 </body>
 </html>