前端三要素

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>

第50天学习打卡(JavaScript)的更多相关文章

  1. 第50天学习打卡(CSS 圆角边框 盒子阴影 定位)

    4.4圆角边框 圆角边框:  <!DOCTYPE html> <html lang="en"> <head>     <meta char ...

  2. JavaScript学习(1)之JavaScript基础

    JavaScript学习(1)之JavaScript基础 由于工作原因,开发语言逐渐以JavaScript为主,所以,抽空学习了下JavaScript语法.等现阶段的工作稳定之后,陆续会分享下自己在学 ...

  3. 【学习笔记】JavaScript的基础学习

    [学习笔记]JavaScript的基础学习 一 变量 1 变量命名规则 Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头.例如: var myTestValue = 0, mySeco ...

  4. 前端学习 第二弹: JavaScript中的一些函数与对象(1)

    前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...

  5. RX学习笔记:JavaScript数组操作

    RX学习笔记:JavaScript数组操作 2016-07-03 增删元素 unshift() 在数组开关添加元素 array.unshift("value"); array.un ...

  6. seaJs学习笔记之javascript的依赖问题

    之前分别为大家介绍了有关javascript中的冲突和性能问题,今天为大家介绍一下有关javascript中的依赖问题.我们将继续就之前javascript中性能问题继续介绍. 先来回顾一下性能问题的 ...

  7. 转 利用 Console 来学习、调试JavaScript

    利用 Console 来学习.调试JavaScript   一  什么是 Console Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象 ...

  8. 学习笔记:Javascript 变量 包装对象

    学习笔记:Javascript 变量 包装对象 如下代码,可以输出字符的长度. var str = "Tony"; str.length; 这时再试试以下代码,返回是 undefi ...

  9. 微信小程序开发:学习笔记[5]——JavaScript脚本

    微信小程序开发:学习笔记[5]——JavaScript脚本 快速开始 介绍 小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来 ...

随机推荐

  1. Flink-v1.12官方网站翻译-P015-Glossary

    术语表 Flink Application Cluster Flink应用集群是一个专用的Flink集群,它只执行一个Flink应用的Flink作业.Flink集群的寿命与Flink应用的寿命绑定. ...

  2. 翻译:《实用的Python编程》01_01_Python

    目录 | 下一节 (1.2 第一个程序) 1.1 Python Python 是什么? Python 是一种解释型(译者注:区别于编译型)的高级语言, 通常被归类为 "脚本语言"  ...

  3. HDU6430 Problem E. TeaTree【dsu on tree】

    Problem E. TeaTree Problem Description Recently, TeaTree acquire new knoledge gcd (Greatest Common D ...

  4. hdu4352 XHXJ's LIS (数位dp)

    Problem Description #define xhxj (Xin Hang senior sister(学姐))  If you do not know xhxj, then careful ...

  5. poj1061青蛙的约会 (扩展欧几里德)

    Description 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是它们出发之前忘记了一件很重要的事 ...

  6. poj3757 Training little cats

    Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 11496   Accepted: 2815 Description Face ...

  7. hdu5459 Jesus Is Here

    Problem Description I've sent Fang Fang around 201314 text messages in almost 5 years. Why can't she ...

  8. Python3.9.1中如何使用match方法?

    接触编程的朋友都听过正则表达式,在python中叫re模块,属于文字处理服务里面的一个模块.re里面有一个方法叫match,接下来的文章我来详细讲解一下match. 作为新手,我建议多使用帮助文档,也 ...

  9. kubernetes实战-交付dubbo服务到k8s集群(二)交付jenkins到k8s集群

    首先下载jenkins镜像并上传到我们自己的私有仓库:7-200 # docker pull jenkins/jenkins:2.190.3 # docker tag 22b8b9a84dbe har ...

  10. next v5升级到next v7需要注意的地方

    title: next v5升级到next v7需要注意的地方 date: 2020-03-04 categories: web tags: [hexo,next] 大部分的设置都是一样的,但有一些细 ...