目录一. JavaScript、HTML、CSS简介1.1 HTML简介和举例说明1.2 CSS简介和举例说明1.3 JavaScript 简介和举例说明二. JavaScript 基本语法2.1 变量类型和定义方式2.2 逻辑运算符比较运算符2.3 流程控制ifif...else...while2.4 函数定义和调用2.5 全局变量和局部变量2.6 方法三. 真正理解 JavaScript3.1 JavaScript的组成部分3.2 宿主介绍和举例说明四. BOM和DOM4.1 BOM、DOM概述及二者的关系4.2 BOM详解4.2 DOM对象五. 事件前言HTMLCSSJavaScript 正是我们所熟知的前端三件套而在这三者之中JavaScript 是重中之重。不管你是干前端还是做后端或许都多多少少听说过 VueRecatES5ES6typescript 等前端框架但其实啊这些框架归根究底都是封装的 JavaScript 代码。所以只要我们学会了JavaScript任何一个前端框架我们都可以很快速的上手理解其中的语法和API。那么话不多说我们开始进入正文吧一. JavaScript、HTML、CSS简介JavaScript是一个跨平台面向对象的脚本语言。划重点跨平台面向对象脚本语言。前两个特性学过Java的小伙伴们一定不陌生因此有Java基础的同学学习JavaScript会相对来说比较轻松。再者JavaScript是脚本语言所以它是不需要编译而是由浏览器直接执行的(这句话记住后面要考哦)。本篇主要讲解JavaScript但是我们又不得不将 JavaScript 与 HTMLCSS做比对。因为它们三者都是构成前端的重要元素只是各自的分工有所不同。1.1 HTML简介和举例说明HTML主要组成前端页面的结构部分举例如title标题head网页头body网页体等结构标签应用于网页的整体结构如下图我写博客的界面所示这里只是举个例子说明 titleheadbody方便各位理解不用较真哦。例如我们打开一个界面就会显示我们这个界面的内容它就可以理解为页面的标题title然后下方还会显示网页链接我们姑且把它称之为head头再往下就是文章内容就是我们的主体body这三者就组成了我们的页面结构。1.2 CSS简介和举例说明CSS主要决定了网页中各种元素的表现举例如元素选择器元素名称 {color: red;} 、id选择器 #id属性值{color: red;} 、class选择器 .class属性值{color: red;} 使用选择器可以对我们页面中的各种元素设置不同种类的样式例如设置字体为xxx颜色设置标签为xxx样式如下图所示可以看到在界面中有的字体是正常黑色有的是加粗黑色有的是红色有的还会有特殊格式这些个是都是可以通过CSS选择器来进行控制的。1.3 JavaScript 简介和举例说明JavaScript主要控制网页的行为使网页变的可交互。举例如按钮被点击鼠标移动上去按下键盘等对应的数据会发生什么样的动作都是由JavaScript来进行控制的。如下图下方最醒目的三个按钮选项都是可以进行点击与页面进行交互的点击不一样的按钮产生不一样的行为和后果都是由JavaScript去进行一手操控的这就是JavaScript最重要的一个特点——控制用户与界面的交互。二. JavaScript 基本语法2.1 变量类型和定义方式JavaScript中常用的变量类型分为变量类型数值类型(不区分整数和小数)字符串类型布尔类型而且定义变量均使用 var 关键字一个通用不像Java中intfolatbooleanString等不同的变量不同的关键字JavaScript会自动识别我们定义的变量类型。var 就是单词 variable 的缩写翻译为变量。// 变量类型定义方式 var 变量名 变量值; // 数值类型定义方式,javaScript中不区分整数和小数 var int1 10 var float1 10.5; var double1 10.9; // 字符串类型定义方式 var str abcdefg; // 布尔类型定义方式 var flag true; var flag2 false; // 定义数组Array类型 var arr [1,2,3]; // 定义Map类型 var map new Map([[name,jack],[age,20]]); //定义Set类型 var set new Set([1,3,5,abc,true]);2.2 逻辑运算符比较运算符两个都为真结果为真||一个为真结果为真取反赋值等于类型不一样值一样会判断为true2.3 流程控制ifif...else...while// if 控制代码块 var number 10; if(number 10){ console.log(大于10); } // if...else if...else控制代码块 var number 10; if(number 10){ console.log(大于10); }else if(number 10){ console.log(等于10) }else{ console.log(小于10) } // while 循环控制代码块 var num2 20; var age 18; while(num2 30){ age age 1; num2 num2 1; } console.log(age); // for 临时变量名 of 集合变量名遍历获取集合中的变量如下便利map集合和set集合 // 便利map集合 var map new Map([[name,jack],[age,20]]); for(let x of map){ console.log(x) } // 便利set集合 var set new Set([1,3,5,abc,true]); for(let x of set){ console.log(x) }2.4 函数定义和调用JavaScript中常用的函数的定义方式有两种。方式一function 函数名(参数列表){...方法体}方式二var 变量名 function 函数名(参数列表){...方法体}// 定义求和函数调用者调用时传入参数 function add(number1,number2){ return number1 number2; } var number 0; // 定义判断最大值函数函数返回一个最大的值 var large function bigNumber(number1,number2){ if(number1 number2){ return number1; }else{ return number2; } } // 调用bigNumber函数 number bigNumber(10,11);2.5 全局变量和局部变量在JavaScript中变量也有全局变量和局部变量之分这一点和Java是一样的。如上3.4中所示变量number定义在函数之外是全局变量在其他函数中依然可以使用而number1number2定义咋函数之内是局部变量只能在函数bigNumber内使用JavaScript实际上只有一个全局作用域任何变量函数也可以视为变量假设没有在函数范围内找到就会向外查找如果没有在全局作用域中找到就会报错ReferenceError2.6 方法方法就是把函数放到对象的里边JavaScript中的对象最常用的就是属性和方法。var zhangsan{ name: 张三, birth: 2002, age: function () { //Date().getFullYear()获取今年年份减去出生年份即为年龄 var nowYearnew Date().getFullYear(); return nowYear-this.birth; } } // 获取并打印名称 console.log(zhangsan.name) // 获取并打印年龄 console.log(zhangsan.age())三. 真正理解 JavaScript3.1 JavaScript的组成部分OK上面我们简单了解了JavaScript过了一遍基本语法函数方法定义等也许小伙伴们认为JavaScript就是console.log、if...else...之类的编程代码。如果这样想你就错了在ECMA(欧洲计算机制造协会)-262中有规定真正的JavaScript语言其实包含代码和宿主两部分我们大多数开发人员都更多的关心代码对于宿主环境的概念则比较迷糊其实用大白话来讲宿主环境就是跑代码的地方。我们常见跑JavaScript代码的地方一个就是我们上面提到的浏览器由浏览器直接执行(看这句话是不是考到啦)另一个就是node简要关系图如下所示。3.2 宿主介绍和举例说明ECMA-262规范规定宿主环境必须提供代码的基准实现以及与环境交互必须的扩展。这样说专业名词也许不是很容易听懂我们一起来看个例子。1代码的基准实现同样一句console.log(hello JavaScript)在浏览器中执行会打印在开发者工具的控制台如下图所示但如果在 node 中执行会打印在终端二者虽然环境不同但都实现并输出了我们编写的代码这就是代码的基准实现。2与环境交互必须的扩展在 node 中我们可以通过引入 fs 模块访问本地的文件系统进行文件读写操作但这个操作在浏览器中却不行上述node的办法虽然在浏览器中行不通但是我们却有另一种办法。我们可以通过 document 对象(下面马上要说的DOM和BOM)来操作并获取网页中的元素。这里先简单理解到下面我再详细说明。总结上面两点我们姑且先不说 node 此时就会发现document 对于JavaScript 至关重要它是JavaScript语言和浏览器宿主环境交互必要的扩展条件。如下图所示最左边是我们的浏览器最右边是JavaScript语言二者就可以通过document(DOM)和BOM进行交互(不理解也没事下一小节专门来讲)获取并操作网页中各个元素可以这么来说DOM和BOM就是JavaScript语言将浏览器作为宿主环境在浏览器上运行时所存在的概念是浏览器内置的功能而并非JavaScript的功能。那么DOM和BOM到底是什么呢它有哪些需要我们学习的语法知识呢往下看我们来深入探究。四. BOM和DOM4.1 BOM、DOM概述及二者的关系BOMBOM全称Browser Object Model译为浏览器对象模型。通俗一点来说小伙伴们可以直接将它理解为整个浏览器而DOM全称Document Object Model译为文档对象模型它代表浏览器页面中展示的内容。一个指代浏览器一个指代浏览中的内容此时二者的关系显而易见了BOM是包含DOM的。那么既然BOM是包含DOM的又为什么在网上很多人都喜欢拿二者相提并论呢原因很简单因为在开发的过程中几乎90%的工作量都体现在绘制页面页面文本内容上而 document 正是负责浏览器页面上所展示的内容是我们经常打交道的对象因此将它单独拿出来一点也不为过。4.2 BOM详解BOM是浏览器对象其核心是window(翻译为窗口)它是一个双重角色既是浏览器与JavaScript交互的一个接口又是一个Global全局对象。BOM提供了一组API允许开发者通过JavaScript与浏览器进行交互。浏览器上网页中任何一个对象都是BOM也可以说是window的子属性或子对象所以就可以通过 window. 的方式进行调用获取。如下图所示都是window的子对象当我们想操作浏览器的各个组成部分时可以通过window对象来获取它们和它们的子属性。Document文档对象document window.document 结果就是truedocument对象下面细说History历史记录对象通过window.history获取此对象可以实现对路由跳转的控制Location地址栏对象通过window.location获取此对象后也可以链接到其他URLNavigator浏览器信息对象其中包含大量关于Web浏览器的信息在检测浏览器和操作系统上非常有用Screen屏幕对象通过window.screen获取此对象后可以获取屏幕的各种属性4.2 DOM对象在浏览器中一个页面就是一个xxx.HTML文件。在HTML文件中会有不同种类的标签且部分标签还有父子关系如下图所示HTML主要由head和body构成二者下面还有子标签meta、h1、p子标签的下方还有子标签画出来就是一个树HTML是顶级父节点。DOM对象主要包含以下三种Element元素对象如htmlbodyp等标签都是元素节点对象Text文本对象(向用户展示的内容)如li文本内容/li是展示给用户的文本元素对象Attribute属性对象如a/a超链接标签的链接属性href程序猿ZhangSir-CSDN博客可以说HTML文档是由DOM节点元素对象构成的集合。这里我们只要记住document 对象可以等效替代HTML即可。即 document对象节点 HTML父节点document 也是所有元素标签的父节点对象即可任意一个HTML文件中的标签我们都可以通过 document 对象来获取获取的方式如下代码所示// document 基本语法如下所示常用的就是下面三种其实就跟CSS选择器类似学过CSS的很容易理解 // 1. 标签选择器,通过标签获取我们要操作的元素Tag就是标签的意思这行代码意思就是获取h1标签对象 var h1document.getElementsByTagName(h1); // 2. ID选择器每个元素我们都可以为其设置ID通过ID就可以获取并操作指定的元素对象 var p2document.getElementById(p2); // 3. Class类选择器每个元素不仅不可设置ID也可以设置Class属性 // 通过Class我们同样可以获取并操作指定的元素 var p3document.getElementsByClassName(p3);五. 事件事件其实可以简单的理解为用户与浏览器或文档进行交互时发生的各种效果比如我打开某个新的网页按下某个提交、修改、将鼠标悬停在某个地方、等一系列操作每一下点击或鼠标的移动都有可能会让浏览器生成不一样的新内容或进行一个新的界面这个过程就是一个事件的发生。由于事件涉及到的知识点较多所以小编单独写了一篇文章感兴趣可跳转观看JavaScript 事件精讲鼠标事件、键盘事件、表单事件与事件处理程序_js 打印鼠标键盘事件-CSDN博客