跳至主要內容

JS入门基础

Skyme2023/7/4大约 7 分钟前端前端javascript

JavaScript的使用

内嵌JavaScript

  1. 使用script标签,在html页面嵌入JavaScript代码
<script type="text/javascript">...</script>
  1. script标签可以嵌入在页面中的任何位置
    • 传统是放在head标签中。
    • 现在为了提高浏览器的加载效率，推荐放在html的最后（<body>结尾与<html>之间位置，和head、body标签平级）。
  2. 在html5中，<script>标签的type属性默认就是javascript，所以通常省略掉了type属性的书写。

    Document

    console.log("这是一条控制台消息");
alert("hello!");

常量和变量

  • 变量
    var name ="xxx"
``` ES6中推荐使用let
  • 常量
    1. 常量表示不能被修改的变量，在传统的JavaScript（ES5标准）中是没有常量概念的。 在ES6中，可以使用const来声明常量。
    2. 系统提供了几个供开发使用的常量，主要是数学和数值常量：
      • Math.E：常量e
      • Math.PI：常量PI
      • Number.MAX_VALUE：可表示的最大的数
      • Number.MIN_VALUE：可表示的最小的数
      • Number.NaN：非数字值
  • 标识符
  • 字面量

数据类型

  • 7种原始数据类型:
    1. undefined: 未被赋值的变量，但是已经声明
    2. null:
    3. number 整数和浮点数都是
    4. boolean
    ```js
let bool1 =true;
let bool2 =false;
```
    1. string
    ```js
let str1 = "123";
let str2 = '123';
let str3 = `123`;

// 双引号中可以直接使用单引号
let str4 = "1'2'3";
// 单引号中可以直接使用双引号
let str5 = '1"2"3';
// 反引号中可以直接使用单双引号
let str6 = `1'2"3`;
``` 转义字符
    1. bigint
    2. symbol 它的值独一无二，用于确保对象的属性名不重复
      • 使用Symbol()函数创建：Symbol(string)函数可以传入一个字符串，用于对Symbol值进行标识。
      • 使用Symbol.for()函数全局注册：Symbol.for(string)，根据标识全局注册一个Symbol值，如果标识已经注册过，那么直接返回已经注册过的Symbol值
        let s3=Symbol("b");
let s4=Symbol("b");
console.log(s3==s4);
let s1=Symbol.for("a");
let s2=Symbol.for("a");
console.log(s1==s2);
    3. object
    ```js
let ob1=new Object();
let ob2 ={

}
//ob1和ob2的内存地址不同
console.log(ob1==ob2);
let ob3=new Object("skyme");
let ob4=new Boolean(true);
console.log(typeof ob3);
console.log(typeof ob4);
```
![](https://skyme-1307417630.cos.ap-chengdu.myqcloud.com/skyme/image-20230704151829678.png)

    document对象

什么是document对象

  • document是表示整个HTML文档的对象，实际使用中通常直接使用document变量来访问document对象

document的集合属性

document提供了一些属性，可以直接访问HTML文档中的标签元素组成的集合，在实际开发中很少这样使用，这里只做了解。

属性名描述
anchors页面中所有的锚的集合（由<a name="XXX">表示）。
applets页面中所有applet的集合。
embeds页面中所有嵌入对象的集合（有<embed/>标记表示）。
forms页面中所有表单标签的集合。
images页面中所有图像标签的集合。
links页面中所有链接标签的集合（由<a href="XXX">）表示。）

拿images举例:


    Document

    console.log("这是一条控制台消息");
let imgs = document.images;

for(let i=0; i<imgs.length;i++){
    console.log(imgs[i].src);
}

需要注意的是，这些集合属性得到的都是“伪数组”对象。 伪数组对象可以像数组一样遍历，但是不能调用数组对象的方法

文档写入的方法

document对象可以将字符内容写入到HTML页面当中，以下是相关的一些方法。

方法名作用
open()打开一个新文档，用于写入新的内容。 还有一个隐藏用法，可以作为window.open()的别名方法。
close()关闭open()打开的文档。
write()被内容写入到当前打开的文档中，如果当前文档没有调用open()会自动进行调用。
writeln()作用和write()一样，同时会附加一个换行符。

传统查找节点方法

方法作用
getElementById()根据传入id属性值，获取元素节点。
getElementsByName()根据传入的name属性值，获取元素节点的集合。
getElementsByClassName()根据传入的class属性值，获取元素节点的集合。
getElementsByTagName()根据传入的标签名，获取元素节点的集合。

通过选择器查找节点


    05通过选择器查找节点的方法

    p1
    p2

        p3
        p4

    // 查找所有class为c1的元素
    function queryAllC1() {
        // 根据class值，获取元素节点对象组成的集合（伪数组对象）
        let doms = document.querySelectorAll(".c1");
        console.log("class为c1的元素个数：",doms.length); // 3
    }

    // 查找第一个class为c1的元素
    function queryFirstC1() {
        let dom = document.querySelector(".c1");
        console.log("class为c1的第一个元素内容：",dom.innerText); // p1
    }

    // 查找id为i1内部的class为c1的元素
    function queryi1C1() {
        // 根据id，获取第一个匹配的元素节点对象
        let dom = document.querySelector("#i1>.c1");
        console.log("选择器#i1>.c1的内容",dom.innerText); // p4
    }

    // 调用方法
    queryAllC1();
    queryFirstC1();
    queryi1C1();

访问&修改标签内的文字内容

  1. 查找到的元素节点对象，就是JS描述HTML文档中的标签的对象，它与HTML的标签一一对应。通过操作元素节点对象，可以修改标签的内容、属性甚至是在标签内添加新标签，从而打成页面的动态效果。如何查找元素节点对象 对于后面学习的DOM相关知识非常重要。DOM编程是唯一可以对标签进行动态操作的方案，是所有框架（jQuery、vue、react等等）的原理。
  2. 这里我们先来学习一下修改和访问标签内容的属性。
    | 属性名 | 作用 |
    | --- | --- |
    | innerText | 访问属性时：获取标签内（含后代标签）的文字内容，获取的文字内容会忽略HTML标签。 赋值时：使用字符串设置标签的文字内容。 |
    | innerHTML | 访问属性时：获取标签内（含后代标签）的文字内容，文字内容包含HTML标签的字符串。 赋值时：使用字符串设置标签的文字内容，如果字符串有HTML标签，那么会解析它。 |

    Document

    let div1=document.querySelector(".div1");
    let div2=document.querySelector(".div2");
    let arr = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
    let i = 0;
    setInterval(function(){
        div1.innerHTML =""+arr[i]+""+""+arr[i]+"";
        div2.innerText =""+arr[i]+""+""+arr[i]+"";
        i++;
        if(i==arr.length){
            i=0;
        }

    },1000);

history对象


    Document

    前进
    后退

Location对象

属性描述
hash指定浏览器到一个位于文档中的anchor位置（#之后）。
host获取地址栏的主机名和端口。
hostname获取地址栏的主机名。
href访问属性：获取地址栏完整的URL字符串。 设置属性：设置地址栏的url字符串，会使浏览器跳转到指定的URL地址。
pathname获取地址栏基于服务器root（根）的目录结构地址，即地址栏中的资源地址。
port获取地址栏的端口号。
protocol获取地址栏的协议名。
search获取地址栏?传参部分（包含?号）。

    Document

    let str=" ";
    str+= "location.host:"+location.host+"";
    str+= "location.hostname"+location.hostname+"";
    str+= "location.href"+location.href+"";
    str+= "location.pathname"+location.pathname+"";
    str+= "location.port"+location.port+"";
    str+= "location.protocol"+location.protocol+"";
    str+= "location.search"+location.search+"";
    let dom=document.querySelector("#app");
    dom.innerHTML=str;

路的尽头依旧是路
Copyright © 2026 Skyme