前端语言JavaScript | 青训营

德芙39
75 阅读5分钟

JavaScript

相关概念

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

  • 组成
    Javascript主要由ECMAScript、DOM、BOM三部分组成。ECMAScript规定了 JS 的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套 JS 语法工业标准；DOM是文档对象模型 ，是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作；BOM是浏览器对象模型，是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过 BOM 可以操作浏览器窗口，比如弹出框、控制浏览器跳转等。

  • 引入方式
    （1）行内式，将单行或少量 JS 代码写在 HTML 标签的事件属性中（以 on 开头的属性）
    <input type="button" value="点击" onclick="alert('Hello World')" />
    （2）内嵌式，可以将多行 JS 代码写到 script 标签中。内嵌 JS 是常用方式

     <!-- 内嵌式 -->
    <script>
        alert("弹窗式");
        console.log("控制台");
        let str=prompt("请输入：");
        console.log(str);
    </script>

    （3）外部引入，有利于 HTML 页面代码结构化，把大段 JS 代码独立到 HTML 页面之外，美观且方便文件级别的复用

基本语法

  • 输入输出
    1.jpg
    alert("弹窗式"); console.log("控制台"); let str=prompt("请输入数据："); console.log(str);

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

  • 数据类型
    JavaScript的数据类型分为简单数据类型和复杂数据类型
    2.jpg 而数据类型的转换有转为字符串、转为数字型、转为布尔型三种

数组

  • 利用 new 创建数组
    var 数组名 = new Array()；

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

    //1. 使用数组字面量方式创建空的数组 
var 数组名 = []； 
//2. 使用数组字面量方式创建带初始值的数组 
var 数组名 = ['红','绿','蓝']；
函数

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

  • 变量作用域
    通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。JavaScript（ es6 前）中的作用域有全局变量和局部变量两种。
    全局变量在代码的任何位置都可以使用，在全局作用域下 var 声明的变量是全局变量，特殊情况下，在函数内不使用 var 声明的变量也是全局变量
    局部变量是在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量），局部变量只能在该函数内部使用，在函数内部 var 声明的变量是局部变量，函数的形参实际上就是局部变量

DOM及其应用

  • 介绍
    文档对象模型是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。DOM 树又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理结果可加入当前页面。
    文档：一个页面就是一个文档，DOM中使用document表示
    节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
    标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

  • 获取元素
    想要操作页面上某部分，则要先获取该部分对应的元素，再进行操作。获取方式举例如下：

    // id选择器
let btn1=document.getElementById("btn1");
console.log(btn1);
// class选择器
let btn2=document.getElementsByClassName("btn2");
console.log(btn2);
// 标签选择器
let btn3=document.getElementsByTagName("button");
console.log(btn3);
// css选择器
let btn4=document.querySelector("button");
let btn5=document.querySelectorAll("button")
事件

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为，即触发--响应机制。网页中的每个元素都可以产生可触发 JavaScript 的事件，比如我们在用户点击某按钮时产生一个事件，然后执行某些操作。
主要有三要素：事件源（谁），触发事件的元素；事件类型（什么事件）；事件处理程序（做啥），事件触发后要执行的代码。

3.jpg

小结

自己对于JavaScript这块的知识还是有很多地方需要学习熟悉的，涉及的较多知识点还没有很好地整理，所以要安排时间继续梳理，计划后期通过更多的实操来熟悉。

avatar
文章
阅读
粉丝