JavaScript学习简记

javascript学习简记:

关于arguments

 

JavaScript学习简记_第1张图片

运行结果:

JavaScript的组成

    完整的JavaScript是由ECMAScript(语法)、Browser Object(DOM\BOM)(特性)组成的!

前面的语法部分基本上看看都懂,啥时候碰上了不懂的,就在上面加上,在现在看的视频中需要重点了解的就是后面的部分了!

以下是DOM相关

获取节点的三种方式:

getElementsByTagName

getElementById

getElementsByClassName 

属性获得的方式

类似

href属性就可以直接在js代码中通过a.href调用

注意,class属性除外,class属性的获取不能写成:this.class 而应该写成this.claasName

而可以在style中写的属性可以通过p.style.color来获取和设置!

onsubmit事件的绑定

onsubmit事件的触发是因为表单中的提交按钮被点击,但是绑定的话是在表单中绑定,而不是提交按钮!

事件的绑定最好都写在js代码而不是html代码上!

 

键盘事件

onkeydown : 用户按下键盘中某个键

onkeyup : 用户放开之前按下的键

onkeypress : 用户按键,包括前面两个动作!

keycode : 返回的是前三个事件触发键的键码!

JavaScript学习简记_第2张图片

点击上下左右显示的键码。

以下是BOM相关

学习目的:

    掌握BOM的核心——window对象

    掌握什么是BOM

    掌握Windows对象的控制和窗口弹出的方法!

什么是BOM

  1. BOM是Browser Object Model 即浏览器对象模型的缩写!
  2. BOM的对象有:
  • window
  • navigator
  • screen
  • history
  • location
  • document
  • event

BOM核心对象window

    window对象是浏览器的一个实例,在浏览器中,window对象有双重角色:它既是js访问浏览器窗口的一个接口,又是ECMAScript定义的一个Global对象!

window的方法

alert(text):弹出显示text的提示窗口。

comfirm(text):弹出确认窗口,点击OK返回true,Cancel返回false

JavaScript学习简记_第3张图片

prompt(text,defaultText):弹出一个输入框,两个参数的作用如下图,点击ok返回输入框中的文本,未输入返回空字符串,点击dancel的话返回null!

JavaScript学习简记_第4张图片

open(pageurl, name,parameters)方法

JavaScript学习简记_第5张图片

parameters有这些属性:

JavaScript学习简记_第6张图片

close()方法:功能就是关闭浏览器窗口!

 

 

window对象方法——定时器

学习目标:掌握超时调用和间歇调用。

我们应该知道的是,JavaScript是单线程语言,代码的执行必须按照顺序!

首先我们先了解下  超时调用

语法:setTimeout(code, millisec)

功能:在指定毫秒数后调用函数或计算表达式

参数说明 : 执行代码前等待的毫秒数!

返回值:返回一个ID唯一表示这个超时调用,id可以用于清除超时调用!

清除超时调用的方法clearTimeout

语法:clearTimeout(id_of_setTimeout)

参数:id_of_setTimeout表示某个生成超时调用的方法返回的id值!

功能:取消生成id_of_setTimeout的方法设置的超时调用!

间歇调用

语法:setInterval(code,millisec)

功能:每个interval时间执行一次前面的code代码!

返回值:返回一个id唯一确定前面的间歇性调用!用于取消间谢调用。

清除间谢调用的方法clearInterval与上面clearTimeout同理!

BOM的location对象

属性:

语法:location.href

功能:返回当前加载页面的完整url

语法:location.hash

功能:返回url中的hash(即#号后跟零个或多个字符)如果不包含就返回空字符串!

示例例如回到最顶部(最顶部有一个标签的id为top),可以在相应的按钮注册点击事件,响应的方法中直接将location.hash = “#top”即可返回最顶端!

语法:location.host

功能:返回服务器名称和端口号(如果有!)例如百度的host就是“www.baidu.com”

语法:location.hostname

功能:返回服务器名称(不带端口)

语法:location.pathname

功能:返回url中的目录或文件名

语法:location.port

功能:返回url中的端口,没有返回空字符串

语法:location.protocol

功能:返回网站使用的协议

语法:location.search

功能:返回url中的查询字符串,即url中?后的属性

location对象

学习目标:

掌握位置操作

掌握location.reaplace()

掌握location.reload

改变浏览器位置的方法:

JavaScript学习简记_第7张图片

前面的方法会在浏览器中留下历史记录,如果不想留可以用下面一种方法!

location.reaplace(“www.baidu.com”)

JavaScript学习简记_第8张图片

location.reload重新加载目前的页面!在不指定参数时是从浏览器中的缓存中刷新,如果添加一个true的bool参数,就会从服务器中重新获取资源强制刷新!

history 历史对象

语法 :history.back() 

功能:回到历史记录的上一步(我能想到的实际用途就是,我们在任意一处使用一个需要登录权限的网站功能的时候,需要跳转到登录界面,登陆后又要返回这个地方,就可以用到这个功能!)

说明: 相当于使用了history.go(-1) 参数是负几就退几步!

语法 :history.forward() 

功能:回到历史记录的下一步

说明: 相当于使用了history.go(1) 参数是几就退几步!

screen对象

语法:screen.availWidth

screen.availHeight

功能:浏览器窗口页面可用的宽和高!可用的宽和高指的是浏览器窗口去除上面的什么导航栏、书签等功能区之外显示网页的地方!

具体可以参考这个博客 : http://caibaojian.com/js-name.html

但经过自己在chorme的试验:screen.width 和 screen.availWidth 、 screen.height和screen,availHeight相等,都是代表的是显示网页的高宽!

navigator对象

navigator对象提供了操作系统及浏览器的信息,通过这个对象我们可以了解到我们在什么系统下使用的是什么浏览器什么版本!

学习目标:

  • 掌握Navigator对象的userAgent属性
  • 掌握如何判断浏览器的类型
  • 掌握当前使用的是终端的还是移动的!

UserAgent:用来识别浏览器的名称、版本、引擎已经操作系统等信息的内容!

例如:

alert(Navigator.userAgent)

的显示结果是(这是Chrome运行的!)

JavaScript学习简记_第9张图片

可以像视频中那样通过检索返回字段中的浏览器信息来封装成一个方法显示具体浏览器信息:

JavaScript学习简记_第10张图片

你可能感兴趣的:(JavaScript,前端)