前端三要素

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. ODS(Operational Data Store)定义

    ODS(Operational Data Store)可操作的数据存储. 很多人对ODS究竟是什么有很多的困惑,ODS对于不同的人可以有不同的看法,我主要说说什么是最主流的定义.首先我们需要注意,OD ...

  2. Pytest(9)skip跳过用例

    前言 pytest.mark.skip可以标记无法在某些平台上运行的测试功能,或者您希望失败的测试功能 Skip和xfail: 处理那些不会成功的测试用例 你可以对那些在某些特定平台上不能运行的测试用 ...

  3. unix环境高级编程第六章笔记

    口令文件 阴影口令 组文件 附属组ID 登录账户记录 系统标识 口令文件<\h2> /etc/passwd文件是UNIX安全的关键文件之一.该文件用于用户登录时校验用户的口令,文件中每行的 ...

  4. Educational Codeforces Round 21

    Educational Codeforces Round 21  A. Lucky Year 个位数直接输出\(1\) 否则,假设\(n\)十进制最高位的值为\(s\),答案就是\(s-(n\mod ...

  5. codeforces#244(div.2) C

    动漫节一游回来之后一直处于一种意识模糊的状态 看到大家都陆陆续续地过了C心里还是有点着急(自己没思路啊囧) 其实当时就在想该如何找到DFS中的一个环,然后再找到环路上最小的一个值 把所有环路上最小的值 ...

  6. 灯光照射,圆形探测类问题(解题报告)<分层差分><cmath取整>

    题目描述 一个n*n的网格图上有m个探测器,每个探测器有个探测半径r,问这n*n个点中有多少个点能被探测到. 输入输出格式 输入格式: (1<=r<n<=5000) (1<=m ...

  7. 【poj 1988】Cube Stacking(图论--带权并查集)

    题意:有N个方块,M个操作{"C x":查询方块x上的方块数:"M x y":移动方块x所在的整个方块堆到方块y所在的整个方块堆之上}.输出相应的答案. 解法: ...

  8. URAL - 1029 dp

    题意: n层楼,每层楼有m个房间.找出一个路径从第一层到达第M层,使得路径上的所有数的和是所有可达路径中最小的,每次上到下一层以后就不能再上去,依次输出路径上的各点在所在层的列数. 题解: 参考链接: ...

  9. Docker架构分解

    Docker总架构分解Docker对使用者来讲是一个C/S模式的架构,而Docker的后端是一个非常松耦合的架构,模块各司其职,并有机组合,支撑Docker的运行. 用户是使用Docker Clien ...

  10. C++程序代码优化的方法

    1.选择合适的算法和数据结构 选择一种合适的数据结构很重要,如果在一堆随机存放的数中使用了大量的插入和删除指令,那使用链表要快得多.数组与指针语句具有十分密切的关系,一般来说,指针比较灵活简洁,而数组 ...