【JavaScript的执行机制简述及BOM的对象-学习小结】

目录

  • 一、JavaScript的执行机制
    • 1、JavaScript是弱类型语言(特征)
    • 2、JavaScript是脚本语言,边解释边执行,效率比较低
    • 3、单线程
    • 4、同步与异步
  • 二、location对象
    • 1、url:统一资源定位符
    • 2、常用属性
    • 3、常用方法
  • 三、history对象
    • 1、常用属性
    • 2、常用方法

一、JavaScript的执行机制

1、JavaScript是弱类型语言(特征)

(1)变量不需要指定类型。
(2)变量的类型由给变量的值决定。

2、JavaScript是脚本语言,边解释边执行,效率比较低

3、单线程

单线程:JavaScript程序是单线程的,同一时间只能做一件事。
程序:可执行的代码,是静态的。
进程:进程是程序的一次动态运行,一个进程可以占用内存空间的,提高CPU的利用率
线程:它是一个更小的进程,抢占内存空间的,更加提高CPU的利用率。

4、同步与异步

同步:前一个任务执行结束后在执行后一个任务,程序顺序和任务的排列顺序一致。

console.log(1)
console.log(2)
console.log(3)

在这里插入图片描述

异步:在做一件事情的同时,可以去处理其他的事情

console.log(1)
setTimeout(function(){console.log(3)},3000)
console.log(2)

在这里插入图片描述
6、执行机制:

(1)执行栈:主程序的执行流程(单线程的)
(2)任务栈:回调函数(异步执行的函数)

【JavaScript的执行机制简述及BOM的对象-学习小结】_第1张图片
☀️举个例子:

console.log(1)
setTimeout(function(){
    console.log(3)
},0)
for(let i=0,str='';i<90000;i++){
    str+=i
}
console.log(2)

在这里插入图片描述

二、location对象

1、url:统一资源定位符

协议://主机名:端口号/路径?参数

(1)http://localhost:8089/findAll?id=1002&name=张三

localhost:代表本地机,对应的ip地址是127.0.0.1
?:它是分隔符,作用是将路径和参数隔离
&:它也是分隔符,作用是将参数与参数分开。
id和name是参数名:参数是可变的
1002和张三是参数值

(2)http://www.hao123.com—>http://www.hao123.com:80/index.html

http:协议
www.hao123.com:域名代表主机(主机名),也可以是ip地址。
80:端口号/路径
index.html:默认文件名

2、常用属性

(1)location.href:完整的url

<body>
    <button>跳转</button>
    <script>
        let btn=document.querySelector('button')
        btn.addEventListener('click',function(){
            location.href='http://www.hao123.com'
        })
    </script>
</body>

【JavaScript的执行机制简述及BOM的对象-学习小结】_第2张图片
点击跳转按钮,跳转到所填写的链接页面。

(2)location.search:url中"?"之后的部分(query部分)

form表单页面:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
    <form action="index.html">
        用户名:
           <input type="text" name="userName">
           <input type="submit" value="登录"/>
    form>
body>
html>

index.html模拟服务器页面:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务器title>
head>
<body style="text-align: center;">
    <div>div>
    <script>
        console.log(location.search)//输出URL后面的参数query(?后面的部分)
    script>
body>
html>

往form表单输入值后,用location.search属性在控制台输出url中"?"之后的部分(query部分)也就是参数部分如下:
【JavaScript的执行机制简述及BOM的对象-学习小结】_第3张图片在这里插入图片描述

(3)location.host:代表主机名和端口号。
(4)location.port:代表端口号。
(5)location.hostname:返回一个主机名字。
(6)location.protocol:代表协议。
(7)location.pathname:代表路径。

代码演示:
index.html代码段如下:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务器title>
head>
<body style="text-align: center;">
    <div>div>
    <script>
        console.log(location.search) //输出url中的query(?后面的部分)
        let params = location.search.substr(1)//截取子串:从索引1的位置开始到串末尾(去掉?)
        console.log(params)

        let arr = params.split('=') //进行字符串分割,将参数名和参数值分开
        console.log(arr)
        document.querySelector('div').innerHTML = arr[1] + '!欢迎您!'

        console.log('主机名:',location.hostname)
        console.log('端口号:',location.port)
        console.log('协议:',location.protocol)
        console.log('路径:',location.pathname)
    script>
body>
html>

展示如下
【JavaScript的执行机制简述及BOM的对象-学习小结】_第4张图片


【JavaScript的执行机制简述及BOM的对象-学习小结】_第5张图片

3、常用方法

【JavaScript的执行机制简述及BOM的对象-学习小结】_第6张图片

三、history对象

1、常用属性

属性 说明
history.length 返回历史历史列表中的网址数

2、常用方法

方法 说明
back() 加载history列表的前一个url。
forward() 加载history列表的url。
go() 加载history列表中的某个具体页面

你可能感兴趣的:(javascript,javascript,开发语言)