学习JavaScript第四天
文章目录
1 回顾 内置对象
1. Number
2. String
3. Math
4. Date
5. Array
2 内置对象
2.1 Function
Function 是所有函数的构造函数,Function 也是自己的构造函数,Function 实例的属性方法:
length 获取形参的数量
call() 调用函数并设置里面的this,第二个参数开始后面的参数都是给函数的
apply() 调用函数并设置里面的this,第二个参数是数组,数组中的元素作为函数的函数
bind() 返回被设置了this的新函数
2.2 Global
ECMAScript 标准中规定了一个全局对象 Global,像 Array、Number、 String、isNaN、isFinite 等都是 Global 的属性。
浏览器上存在 window 对象,向alert、prompt 等都是 window 的属性,运行在浏览器上的 JS,Global 就是 window。
eval() 参数是字符串,将字符串作为代码执行
encodeURI() 对URL进行编码
decodeURI() 对编码后的URL进行解码
3 DOM 部分知识点介绍
DOM 全称 Document Object Model,译为文档对象模型。
DOM 是 HTML 文档为 JavaScript 提供的能够对 HTML 文档进行相关操作的 API。
1. 获取元素
document.getElementById()
2. 给元素添加事件
元素对象.oncilck = function() {};
3. 设置元素的 CSS 样式
元素对象.style.属性名 = '值';
4. 设置元素中的文字内容
元素对象.innerHTML = '内容';
4 BOM
BOM 全称 Browser Object Model,译为浏览器对象模型。
BOM 是浏览器为 JavaScript 提供的能够对浏览器进行相关操作的 API。
4.1 window
window 表示浏览器窗口,打开页面的时候会自动创建; 运行在浏览器上的 JS,window 是全局对象, 所有的全局变量都是 window 的属性,使用 window 的属性可以省略 window.。
① 弹框
// 警告框 没有返回值
alert()
// 确认框 返回布尔值
confirm()
// 输入框 返回用户输入的内容(string)
prompt()
② 打开关闭窗口
open() 打开新窗口
close() 关闭本窗口,要求该窗口必须是 open 打开的
// 打开空白窗口
open();
// 打开新窗口 指定网页
open('网页地址');
// 在指定的窗口打开网页
open('网页地址', '窗口名称');
// 打开新窗口指定尺寸
open('网页地址', '', 'width=400,height=300')
③ 页面滚动
scrollTo() 页面滚动到指定位置,设置坐标
scrollBy() 页面滚动指定距离,设置距离
// 设置两个参数作为坐标
scrollTo(0, 0);
// 设置一个参数,该参数是对象
scrollTo({
left: 0,
top: 0,
behavior: 'smooth'
});
// 设置两个参数作为滚动的距离
scrollBy(100, 100);
// 设置一个参数,该参数是对象
scrollBy({
top: 600,
behavior: "smooth"
});
④ 定时器
多次定时器:
setInterval(回调函数, 时间间隔) 时间间隔单位是毫秒,默认值是 0, 返回定时器标记
clearInterval(定时器标记) 停止定时器,指定定时器标记
单次定时器:
setTimeout(回调函数, 时间间隔) 时间间隔单位是毫秒,默认值是 0, 返回定时器标记
clearTimeout(定时器标记) 停止定时器,指定定时器标记
⑤ window 对象属性和方法总结
name 窗口的名字,可读可写
innerWidth 读取视口的宽度
innerHeight 读取视口的高度
document 获取文档对象 DOM对象
history
location
navigator
screen
alert()
confirm()
prompt()
open()
close()
scrollTo()
scrollBy()
setTimeout()
setInterval()
clearTimeout()
clearInterval()
4.2 history
history 表示本窗口的历史记录, 相关属性方法如下:
length 获取本窗口历史记录的数量
back() 回到历史记录上一个
forward() 回到历史记录下一个
go() 设置一个数字作为参数,正数前进,负数后退
4.3 location
location 表示本窗口的地址信息,相关属性方法如下:
href 完整的url,可读可写
protocol 协议部分,可读可写
hostname 主机名,可读可写
port 端口号,可读可写
host 主机名和端口号,可读可写
pathname 文件路径,可读可写
hash 锚点信息,可读可写
search 参数信息,可读可写
reload() 刷新页面
assign() 页面跳转,设置一个地址作为参数,留下历史记录
repalce() 页面跳转,设置一个地址作为参数,不会留下历史记录
4.4 navigator
navigator 用于表示浏览器版本信息以及操作系统信息,属性如下:
userAgent 获取客户端浏览器信息
4.5 screen
screen 用于表示屏幕相关信息,属性如下:
width 获取屏幕宽度
height 获取屏幕高度
学习JavaScript第四天的更多相关文章
- 学习javascript数据结构(四)——树
前言 总括: 本文讲解了数据结构中的[树]的概念,尽可能通俗易懂的解释树这种数据结构的概念,使用javascript实现了树,如有纰漏,欢迎批评指正. 原文博客地址:学习javascript数据结构( ...
- 学习 JavaScript (四)核心概念:操作符
JavaScript 的核心概念主要由语法.变量.数据类型.操作符.语句.函数组成,前面三个上一篇文章已经讲解完了.后面三个内容超级多,这篇文章主要讲解的是操作符. 操作符 什么叫做操作符? 这是一种 ...
- 轻松学习JavaScript十四:JavaScript的RegExp对象(正則表達式)
一RegExp对象概述 RegExp对象表示正則表達式,RegExp是正則表達式的缩写.它是对字符串运行模式匹配的强大工具. RegExp 对象用于规定在文本中检索的内容. 当您检索某个文本时.能够使 ...
- 学习javascript数据结构(三)——集合
前言 总括: 本文讲解了数据结构中的[集合]概念,并使用javascript实现了集合. 原文博客地址:学习javascript数据结构(三)--集合 知乎专栏&&简书专题:前端进击者 ...
- Ext JS学习第五天 我们所熟悉的javascript(四)
此文用来记录学习笔记: •javascript之对象.面向对象 •可能对于高级语言你可能了解甚至精通OOP面向对象,那么对于javascript你又熟悉多少呢?我们一起来学习javascript面向对 ...
- 《如何正确学习JavaScript》读后小结
在segmentfault上读的一篇学习JavaScript路线的文章,做个小结. 一.简介.数据类型.表达式和操作符 (1)<JavaScript权威指南>前言1-2章&< ...
- 一步步学习javascript基础篇(3):Object、Function等引用类型
我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...
- 一步步学习javascript基础篇(2):作用域和作用域链
作用域和作用域链 js的语法用法非常的灵活,且稍不注意就踩坑.这集来分析下作用域和作用域链.我们且从几道题目入手,您可以试着在心里猜想着答案. 问题一. if (true) { var str = & ...
- 一步步学习javascript基础篇(1):基本概念
一.数据类型 数据类型 基本数据类型(五种) Undefined Null Boolean Number String 复杂数据类型(一种) Object Undefined:只有一个值undefin ...
- (转)轻松学习JavaScript三:JavaScript与HTML的结合
摘自:http://blog.csdn.net/erlian1992 HTML中的JavaScript脚本必须位于<script>与</script>标签之间,JavaScri ...
随机推荐
- python 音频处理(2)——提取PPG特征之whisper库的使用(2.1)
提取PPG特征之--whisper库的使用(2.1) 1 安装对应的包 方法一(自用): 直接pip即可: pip install openai-whisper 成功后如下图所示 方法二: 当时用了他 ...
- 利用标准IO函数接口实现文件拷贝
把本地磁盘的文件A中的数据完整的拷贝到另一个文本B中,如果文本B不存在则创建,要求文本A的名称和文本B的名称通过命令行传递,并进行验证是否正确. /************************** ...
- kafka查看未被消费的消息
$ kubectl exec -it gitee-kafka-0 -n gitee bash unset JMX_PORT $ kafka-consumer-groups.sh --bootstrap ...
- Mac版Sublime Text 4152 激活
Sublime Text下载地址:Download - Sublime Text 破解工具"Hex Fiend"下载地址:Hex Fiend, a fast and clever ...
- shell 删除文件内容Mac、Linux兼容方法
# 定义sedi数组 # Linux sed后面, 用 "-i" sedi=(-i) case "$(uname)" in Darwin*) # Mac sed ...
- portainer安装&升级
2024年4月15日 关于升级: 如果需要升级 Portainer,请按以下步骤操作: 使用以下命令列出所有镜像: docker ps -a 根据需要删除指定镜像: docker rm <镜像名 ...
- shiro的rememberMe各种漏洞一刀切解决
rememberMe的低版本AES固定密码导致的漏洞,高版本仍然有被爆破,穷举的风险等.这种东西总是在安全检测的时候被拿出来说事儿,然而项目中并未开启rememberMe,也就是说压根不需要这个功能. ...
- 将workbench 导出的sql数据修改为 oracle 的sql版本
将导出的文件内容复制到 dd1.txt,或其它文件,修改path的值即可 修改后的sql文件为 dd1.sql : 替换的内容: 1. 全局替换了一些字符串,如` 2. workbench导出的sql ...
- 《花100块做个摸鱼小网站! 》第五篇—通过xxl-job定时获取热搜数据
️基础链接导航️ 服务器 → ️ 阿里云活动地址 看样例 → 摸鱼小网站地址 学代码 → 源码库地址 一.前言 我们已经成功实现了一个完整的热搜组件,从后端到前端,构建了这个小网站的核心功能.接下来, ...
- 在一个简单的pwn题目中探究执行系统调用前堆栈的对齐问题
题目介绍:在输入AAAAAAAAAAAAAAAAAAAAAAAAA后,程序会打开一个shell,这是为什么?字符串中的A能否更换为@? 1.程序接收输入AAAAAAAAAAAAAAAAAAAAAAAA ...