百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

一分钟复习-JavaScript基础语法(7)

wxin55 2024-11-03 15:40 9 浏览 0 评论

web浏览器中的JavaScript

四种在浏览器中使用JavaScript的方法。

// 1
// 内联,放置在<script>和</script>标签对之间
<script>
function displayTime(){
    alert('hello world')
}
window.onload = displayTime
</script>

// 2
// 放置在由<script>标签的src属性指定的外部文件中
<script src="../../script/util.js"></script>

// 3
// 放置在HTML事件处理程序中,该事件处理程序由onclick或onmouseover这样的HTML属性值指定
<div onclick="alert('hello world')"></div>

// 4
// 放在一个URL里,这个URL使用特殊的“javascript:”协议
<a href="javascript:void(0)"></a>

window对象

setTimeout(),指定时间后重复一次,会返回一个值,可以使用使用这个值调用clearTimeout()函数取消setTimeout的执行。setInterval(),指定时间循环重复,会返回一个值,可以使用使用这个值调用clearInterval()函数取消setInterval的执行。

var index = setTimeout(function(){
    alert('Hello World')
},1000)
clearTimeout(index)

function getStr(){
    alert('Hello World')
}
var index = setInterval(add,500)
clearInterval(index)

Window对象的Location属性引用的是location对象,它表示该窗口中当前显示的文档的URL,并定义了方法来使窗口载入新的文档。

// https://www.baidu.com/s?wd=adw&rsv_spt=1&rsv_iqid=0x80244dd8000464c9&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=4&rsv_sug1=2&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&prefixsug=adw&rsp=6&inputT=173161&rsv_sug4=173162
// Location对象属性
// hash: ""
// host: "www.baidu.com"
// hostname: "www.baidu.com"
// href: "https://www.baidu.com/s?wd=adw&rsv_spt=1&rsv_iqid=0x80244dd8000464c9&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=4&rsv_sug1=2&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&prefixsug=adw&rsp=6&inputT=173161&rsv_sug4=173162"
// origin: "https://www.baidu.com"
// pathname: "/s"
// port: ""
// protocol: "https:"
// search: "?wd=adw&rsv_spt=1&rsv_iqid=0x80244dd8000464c9&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=4&rsv_sug1=2&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&prefixsug=adw&rsp=6&inputT=173161&rsv_sug4=173162"

// assign()方法加载一个新的文档。
window.location.assign('https://www.baidu.com')
// reload()实现页面刷新
window.location.reload()
// replace()方法可用一个新文档取代当前文档。
window.location.replace('https://www.baidu.com')

Window对象的history属性引用的是该窗口的History对象。History对象是用来把窗口的浏览历史用文档和文档状态列表的形式表示。

window.history.length   // 表示查看过的页面数量
window.history.go()     // 正数向前n个页面,负数表示返回n个页面。可以使用具体url加载历史列表中的某个具体的页面
window.history.back     // 后退
window.history.forward  // 前进

Window对象的navigator属性引用的是包含浏览器厂商和版本信息的Navigator对象。appName表示名称,appVersion表示版本号,geolocation表示地理信息,platform表示系统平台,userAgent表示浏览器在它的userAgent的http头部中发送的字符串。


Window对象的screen属性引用的是Screen对象。他提供有关窗口显示的大小和可用的颜色数量的信息。height表示浏览器高度,width表示浏览器宽度。


alert()、confirm()、prompt()、showModalDialog()方法都能产生一个对话框。alert显示一个简单的文本。confirm除了显示文本还支持确定取消,返回一个布尔值。prompt会等待输入文本,返回文本。

alert('hello world')

var a = confirm('hello world')
if(a==true){console.log(1)}else{console.log(0)}

console.log(prompt())

Window对象的onerror属性是一个事件处理程序,当未捕获的异常传播到调用栈上时就会调用它,并把错误消息输出到浏览器的JavaScript控制台上。如果给这个属性赋一个函数,那么只要这个窗口中发生了JavaScript错误,就会调用该函数,即它成了窗口的错误程序。

window.onerror = function(msg, url, line){
    alert(msg)
    alert(url)
    return true
}

window.open方法支持打开新窗口,格式window.open(URL,name,specs,replace)。参数都可选,第一个是url,第二个是名称,可以选择模式,第三个是一个逗号分隔的项目列表,第四个是浏览历史模式。窗口与窗口之间存在parent、top的相互调用关系。

window.open("https://www.baidu.com");


相关推荐

ES6中 Promise的使用场景?(es6promise用法例子)

一、介绍Promise,译为承诺,是异步编程的一种解决方案,比传统的解决方案(回调函数)更加合理和更加强大在以往我们如果处理多层异步操作,我们往往会像下面那样编写我们的代码doSomething(f...

JavaScript 对 Promise 并发的处理方法

Promise对象代表一个未来的值,它有三种状态:pending待定,这是Promise的初始状态,它可能成功,也可能失败,前途未卜fulfilled已完成,这是一种成功的状态,此时可以获取...

Promise的九大方法(promise的实例方法)

1、promise.resolv静态方法Promise.resolve(value)可以认为是newPromise方法的语法糖,比如Promise.resolve(42)可以认为是以下代码的语...

360前端一面~面试题解析(360前端开发面试题)

1.组件库按需加载怎么做的,具体打包配了什么-按需加载实现:借助打包工具(如Webpack的require.context或ES模块动态导入),在使用组件时才引入对应的代码。例如在V...

前端面试-Promise 的 finally 怎么实现的?如何在工作中使用?

Promise的finally方法是一个非常有用的工具,它无论Promise是成功(fulfilled)还是失败(rejected)都会执行,且不改变Promise的最终结果。它的实现原...

最简单手写Promise,30行代码理解Promise核心原理和发布订阅模式

看了全网手写Promise的,大部分对于新手还是比较难理解的,其中几个比较难的点:状态还未改变时通过发布订阅模式去收集事件实例化的时候通过调用构造函数里传出来的方法去修改类里面的状态,这个叫Re...

前端分享-Promise可以中途取消啦(promise可以取消吗)

传统Promise就像一台需要手动组装的设备,每次使用都要重新接线。而Promise.withResolvers的出现,相当于给开发者发了一个智能遥控器,可以随时随地控制异步操作。它解决了三大...

手写 Promise(手写输入法 中文)

前言都2020年了,Promise大家肯定都在用了,但是估计很多人对其原理还是一知半解,今天就让我们一起实现一个符合PromiseA+规范的Promise。附PromiseA+规范地址...

什么是 Promise.allSettled()!新手老手都要会?

Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise,并带有一个对象数组,每个对象表示对应的pr...

前端面试-关于Promise解析与高频面试题示范

Promise是啥,直接上图:Promise就是处理异步函数的API,它可以包裹一个异步函数,在异步函数完成时抛出完成状态,让代码结束远古时无限回掉的窘境。配合async/await语法糖,可...

宇宙厂:为什么前端离不开 Promise.withResolvers() ?

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发。1.为什么需要Promise.with...

Promise 新增了一个超实用的 API!

在JavaScript的世界里,Promise一直是处理异步操作的神器。而现在,随着ES2025的发布,Promise又迎来了一个超实用的新成员——Promise.try()!这个新方法简...

一次搞懂 Promise 异步处理(promise 异步顺序执行)

PromisePromise就像这个词的表面意识一样,表示一种承诺、许诺,会在后面给出一个结果,成功或者失败。现在已经成为了主流的异步编程的操作方式,写进了标准里面。状态Promise有且仅有...

Promise 核心机制详解(promise机制的实现原理)

一、Promise的核心状态机Promise本质上是一个状态机,其行为由内部状态严格管控。每个Promise实例在创建时处于Pending(等待)状态,此时异步操作尚未完成。当异步操作成功...

javascript——Promise(js实现promise)

1.PromiseES6开始支持,Promise对象用于一个异步操作的最终完成(包括成功和失败)及结果值的表示。简单说就是处理异步请求的。之所以叫Promise,就是我承诺,如果成功则怎么处理,失败怎...

取消回复欢迎 发表评论: