学习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 ...
随机推荐
- Jenkins配置分布式构建环境——添加固定Agent并使用JNLP启动Agent详解
1.概述 在<Jenkins部署架构概述>这篇博文中对Jenkins部署架构进行了讲解.对于分布式架构,Jenkins包括固态Agent和动态Agent两种方案. 固定Agent(常用于虚 ...
- 01-canvas体验
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- PLC开发没有前景想转行嵌入式,找个培训机构还是自学?
0. 粉丝提问 把粉丝的情况和问题总结起来,主要以下几点: 这位粉丝19年毕业,25岁,专业是是自动化,之前从事plc开发,现在在自学单片机,想转行做Linux相关开发 犹豫是自学还是报线下培训班? ...
- 编译stvo-pl报错error: ‘random_device’ was not declared in this scope 解决方案
近来在研究PL-SLAM时,由于要安装stvo-pl库,所以我下载安装了这个库.在编译阶段我遇到了一个让人头大的问题. 即红框标出的地方报错:error: 'random_device' was no ...
- 一键k8s企业级集群部署(以k8s的1.18.0版本为例)
一.下载安装sealos wget https://github.com/fanux/sealos/releases/download/v3.2.0-beta.2/sealos && ...
- Spark - Pandas UDF
spark 本身对 dataframe 的操作支持没有像pandas 那样强大,所有我们可以把spark dataframe 转化成 pandas dataframe 来利用pandas datafr ...
- time series classification and transfer learning
最近在看几篇最近几年的工作和survey,希望早点能做点东西.
- 使用vue-cli4快速搭建项目环境、使用webpack4打包自己的library类库、封装vue插件并发布
快速创建 使用官方推荐的vue-cli创建项目如下: # 安装 Vue Cli npm install -g @vue/cli # 创建一个项目 vue create vanttest # 创建完成后 ...
- CSS & JS Effect – Hero Banner Swiper
效果 重点 1. 一张图片, 一个 content 定位居中作为一个 slide 2. slider 用了 JavaScript Library – Swiper 3. 当 slide active ...
- [namespace hdk] Balanced_tree 整合
代码 #include<bits/stdc++.h> using namespace std; namespace hdk{ namespace balanced_tree{ const ...