栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

javascript学习笔记

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

javascript学习笔记

javascript:

是一种弱类型世界上最流行的脚本语言,其源代码不需要经过编译,而是由浏览器解释运行,用于控制网页的行为。

表现层css

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

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

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

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

CSS 预处理器

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

常用的CSS预处理器有哪些

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

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

行为层(Javascript)

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

Native原生JS开发

原生JS开发,也就是让我们按照[ECMAscript] 标准的开发方式, 简称是ES,特点是所有浏览器都支持。截止到当前博客发布时间,ES标准已发布如下版本:

  • ES4 (内部,未正式发布)

  • ES5 (全浏览器支持)

  • ES6 (常用,当前主流版本: webpack打包成为ES5支持! ). ES7

  • ES8

  • ES9(草案阶段)

    区别就是逐渐增加新的特性。

    Typescript微软的标准

    Typescript是一种由微软开发的自由和开源的编程语言。 它是Javascript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。由安德斯海尔斯伯格(C#、

    Delphi. Typescript之父; ,NET 创立者)主导。

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

Javascript框架
  • jQuery:大家熟知的Javascript框架,优点是简化了DOM操作,缺点是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了悲容IE6、7、8;

  • .Angular: Google收购的前端框架,由一群Java程序员开发,其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念,与微软合作,采用Typescript语法开发;对后台程序员友好,对前端程序员不太友好:最大的缺点是版本迭代不合理(如: 1代-> 2代,除了名字,基本就是两个东西截止发表博客时已推出了Angular6)

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

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

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

UI框架
  • Ant-Design:阿里巴巴出品,基于React的UI框架

  • ElementUl、 iview、 ice: 饿了么出品,基于Vue的UI框架Bootstrap: Twitter推出的一个用于前端开发的开源工具包IAmazeUI:又叫“妹子UI",一款HTML5跨屏前端框架

Javascript 构建工具

美15编译工具,主要用于浏览器不支持的ES新特性,比如用于编译Typescript. WebPack: 模块打包器,主要作用是打包、压缩、合并及按序加载

注:以上知识点已将WebApp开发所需技能全部梳理完毕

三端统一

混合开发(Hybrid App)

主要目的是实现一套代码三端统一(PC、 Android: apk、ios: .ipa )并能够调用到设备底层硬件(如:传感器、GPS、摄像头等),打包方式主要有以下两种:

●云打包: HBuild -> HBuildX DCloud 出只,ADI Clad

什么是javascript?

一个合格的后端人员必须精通javascript

标准

ECNAscript可以理解为是javascript的一个标准,最新版本已经到es6版本,但是大部分浏览器还只停留在支持es5代码上。

开发环境----线上环境,版本不一致

1.2快速入门

引入javascript

css在html中用style描写,而javascript则是用script标签描写。

aiert(” “);弹窗,双引号内写弹窗内容。且以分号结尾,script标签(必须成对出现)放在head或者body里面,一般情况下是放在head的头部或者body的尾部。

引用方式:

1.内部描写script标签在head或者body里

2.外部写一个javascript.js文件在里面写核心代码,并在原来的代码中加入

变量:

所有的变量都是var

var num=1;

弹窗:

alert(num);即弹窗弹出为num变量

条件控制:

if(true){

}

这些基本语法和java没有区别,但是还是会有一部分是不同的,而且,javascript也是严格区分大小写

调试:

console:控制台

sources:源码里面有调试工具,我们通过打断点来调试,

1.双击源码,打开html

2.点一下需要打断点的行号,就是打了一个断点

3.刷新网页

4.可以点下一步(有一个向下的箭头可以一步一步调)(或者有step over走完)

打印:

console.log(score) 在浏览器的控制台打印变量,相当于java里的sout,alert是弹窗我们尽量少使用,更多使用的是console

Application:

里面有web的数据库,它是保存在浏览器里面,它里面有一个local Storage是本地存储的意思。

总结

Elements:跑网站,复刻网站(元素)

Console:调试Javascript(控制台)

Sources:打断点(源码)

Network:抓包(网络)

Performance:

Memory:

Application:查看网站cookies(应用)

Security:

Audits:

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/332669.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号