前端“三件套“——HTML,CSS,Javascript三

目录

一.Javascript概念：

二.Javascript基本语法：

三.Javascript数组：

四.JavaScriptDOM及其应用：

五.Javascript事件：

六.JavaScript常用的操作元素方法：

一.Javascript概念：

 1.1 Javascript简介：

Javascript是一门轻量级的脚本语言，是一种运行在客户端的脚本语言 （Script 是脚本的意思，脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行）。不同于Java程序运行在JVM中，Javascript运行是直接运行在浏览器中，主要使用来实现页面功能和业务逻辑。

 1.2 Javascript的组成： 

Javascript主要由三部分组成：

• ECMAscript
• DOM
• BOM

ECMAScript ：规定了 JS 的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套 JS 语法工业标准。

DOM： 文档对象模型 （ DocumentObject Model ，简称 DOM ），是 W3C 组织推荐的处理可扩展标记语言的标 准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

BOM： 浏览器对象模型 (Browser Object Model ，简称 BOM) 是指浏览器对象模型，它提供了独立于内容的、可 以与浏览器窗口进行互动的对象结构。通过 BOM 可以操作浏览器窗口，比如弹出框、控制浏览器跳转、 获取分辨率。

Javascript一共有三种引入方式：

•    行内式：将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性）。

<input type="button" value="点我试试" onclick="alert('Hello World')" />

• 内嵌式：可以将多行JS代码写到 script 标签中。内嵌 JS 是学习时常用的方式

1.  
   <!-- 内嵌式 -->
2.  
   <script>
3.  
   // 输出方式
4.  
   alert("弹窗式");
5.  
   console.log("控制台");
6.  
   let str=prompt("请输入数据：");
7.  
   console.log(str);
8.  
   </script>

---

• 外部引入：利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用

1.  
   <!-- 外联式 -->
2.  
   <!-- <script src="https://blog.csdn.net/qq_50692350/article/details/js/test.js"></script> -->

二.Javascript基本语法：

   2.1 常用的输入输出语句：

为了方便测试和查看我们可以使用输入输出语句： 

1.  
   // 输出方式
2.  
   alert("弹窗式");
3.  
   console.log("控制台");
4.  
   let str=prompt("请输入数据：");
5.  
   console.log(str);

  2.2 变量：

Java中变量的声明：数据类型 变量名；而Javascript中的变量是通过 let, 它类型是什么，取决于等号右边传入的什么数据类型，如果传入的是number那么是number，如果是字符串，那么是字符串。综上：变量是存储数据的内存空间，而变量是什么类型取决于等号的右边数据。并且这个变量可以被赋值不同的数据类型，给它什么类型，他就接着，十分灵活。

  2.3 数据类型：

JavaScript的数据类型分为：

•  简单数据类型 （Number,String,Boolean,Undefined,Null）
• 复杂数据类型 （object)

简单数据类型分为：

   

  注意点：

     1.字符串型可以是引号中的任意文本，其语法为 双引号 "" 和 单引号''

      2.一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时，注意结果）

1.  
   var variable;
2.  
   console.log('你好' variable); // 你好undefined
3.  
   console.log(11 variable); // NaN
4.  
   console.log(true variable); // NaN

   3.一个声明变量给 null 值，里面存的值为空

1.  
   var vari = null;
2.  
   console.log('你好' vari); // 你好null
3.  
   console.log(11 vari); // 11
4.  
   console.log(true vari); // 1

  2.3.1  数据类型之间的转换：

一种数据类型的变量转换成另一种数据类型，通常会实现 3 种方式的转换：

•  转为字符串
• 转为数字型
• 转为布尔型

       2.3.1.1 转为字符型：

1.  
   // 字符转换
2.  
   console.log(num);
3.  
   console.log("num:" num.toString);

  2..3.1.2 转为数字型：

2.3.1.3  转为布尔型：

 注意点：

三.Javascript数组：

Javascript创建数组有两种方式：

•    利用 new 创建数组

var 数组名 = new Array() ； var arr = new Array(); // 创建一个新的空数组 12

• 利用数组字面量创建数组

1.  
   //1. 使用数组字面量方式创建空的数组
2.  
   var 数组名 = []；
3.  
   //2. 使用数组字面量方式创建带初始值的数组
4.  
   var 数组名 = ['小白','小黑','大黄','瑞奇'];

 四：Javascript函数： 

    4.1  arguments的使用

当不确定有多少个参数传递的时候，可以用 arguments 来获取。 JavaScript 中， arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象， arguments 对象中存储了传递的所有实参。arguments 展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点:

•      具有 length 属性
• 按索引方式储存数据
• 不具有数组的 push , pop 方法

注意点：

   1.在函数内部使用该对象，用此对象获取函数调用时传的实参 

  4.2 变量作用域：

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就 是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。 JavaScript（ es6 前）中的作用域有两种：

• 全局变量
• 局部变量

全局变量在代码的任何位置都可以使用 在全局作用域下 var 声明的变量 是全局变量 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

局部变量是 在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量） 局部变量只能在该函数内部使用 在函数内部 var 声明的变量是局部变量 函数的形参实际上就是局部变量

     注意点：

全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存

局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间

五.JavaScriptDOM及其应用：

     5.1 DOM简介：

文档对象模型（ Document Object Model ，简称 DOM ），是 W3C 组织推荐的处理 可扩展标记语言 （html 或者 xhtml ）的标准 编程接口 。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

DOM 树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到 当前的页面。

•  文档：一个页面就是一个文档，DOM中使用document表示
•  节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
•  标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

     5.2 获取元素：

为什么要获取页面元素？

例如：我们想要操作页面上的某部分 ( 显示 / 隐藏，动画 ) ，需要先获取到该部分对应的元素，再对其进行 操作。

    获取元素的方式： 

1.  
   <!--四种选择器：
2.  
   1.id选择器
3.  
   2.class选择器
4.  
   3.标签选择器
5.  
   4.css选择器
6.  
   -->
7.  
   <script>
8.  
   window.onload=function(){
9.  
    
10.  
    }
11.  
    // id选择器
12.  
    let btn1=document.getElementById("btn1");
13.  
    console.log(btn1);
14.  
    // class选择器
15.  
    let btn2=document.getElementsByClassName("btn2");
16.  
    console.log(btn2);
17.  
    // 标签选择器
18.  
    let btn3=document.getElementsByTagName("button");
19.  
    console.log(btn3);
20.  
    // css选择器
21.  
    let btn4=document.querySelector("button");
22.  
    let btn5=document.querySelectorAll("button")

 

六.Javascript事件：

  6.1 事件概述：

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。 简单理解： 触发 --- 响应机制 。 网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时 产生一个 事件，然后去执行某些操作。

  三要素：

• 事件源（谁）：触发事件的元素
• 事件类型（什么事件）： 例如 click 点击事件
• 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

 代码演示：

 常见的鼠标事件：

 

七.JavaScript常用的操作元素方法：

  7.1  改变元素内容：

1.  
   <button>显示当前系统时间</button>
2.  
   <div>某个时间</div>
3.  
   <p>1123</p>
4.  
   <script>
5.  
   // 当我们点击了按钮， div里面的文字会发生变化
6.  
   // 1. 获取元素
7.  
   var btn = document.querySelector('button');
8.  
   var div = document.querySelector('div');
9.  
   // 2.注册事件
10.  
    btn.onclick = function() {
11.  
    // div.innerText = '2019-6-6';
12.  
    div.innerHTML = getDate(); }

注意点：

这篇好文章是转载于：学新通技术网