网易云课堂web学习第二天——初遇JavaScript

第一

      我们可以在哪里运行JavaScript

              浏览器的JavaScript控制台中

             html的<script></script>之间

             HTML的事件属性中

                                 比如:onclick

 

第二

       JavaScript如何获取元素和元素内容

          getElementByld(): 通过ID获取元素;

          .innerHTML: 获取元素内容;

      以下代码就是查询元素内容:

document.getElementById("loginForm").innerHTML

第三

        JavaScript由哪三部分组

javascript是一种专为与网页交互而设计的脚本语言,由下列三个不同的部分组成:

1.ECMAScript,由ECMA-262定义,提供核心语言功能;

2.文档对象模型(DOM),提供访问和操作网页内容的方法和接口;

3.浏览器对象模型(BOM),提供与浏览器交互的方法和接口;

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

    附:转载于https://blog.csdn.net/qq_29134495/article/details/51993825

    JavaScript的三大组成部分是:

    1、ECMAScript:JavaScript的核心,描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义),ECMAScript是一套标准,定义了一种语言(比如JS)是什么样子。

    2、文档对象模型(DOM):DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。请考虑下面的 HTML 页面:

        <html>
          <head>
            <title>Sample Page</title>
          </head>
          <body>
            <p>hello world!</p>
          </body>
        </html>

    这段代码可以用 DOM 绘制成一个节点层次图:
    这里写图片描述
    DOM 通过创建树来表示文档,从而使开发者对文档的内容和结构具有空前的控制力。用 DOM API 可以轻松地删除、添加和替换节点(getElementById、childNodes、appendChild、 innerHTML)。

    3、浏览器对象模型(BOM)对浏览器窗口进行访问和操作。例如弹出新的浏览器窗口,移动、改变和关闭浏览器窗口,提供详细的网络浏览器信息(navigator object),详细的页面信息(location object),详细的用户屏幕分辨率的信息(screen object),对cookies的支持等等。BOM作为JavaScript的一部分并没有相关标准的支持,每一个浏览器都有自己的实现,虽然有一些非事实的标准,但还是给开发者带来一定的麻烦。
---------------------
作者:Break-attack
来源:CSDN
原文:https://blog.csdn.net/qq_28644765/article/details/83615925
版权声明:本文为博主原创文章,转载请附上博文链接!

     

         

 

 

document.getElementById("loginForm").innerHTML="<iframe src=http://study.163.com></iframe>"
"<iframe src=http://study.163.com></iframe>"

在loginForm中调出一个内容为里面的url的iframe

调出自己的cookie并进行增加操作

 

获取浏览器屏幕信息

 

获取用户界面的url

 

跳转到baidu.com,可以返回旧界面。

获取访问者浏览器信息

open("一个url")打开令一个页面

close("一个url")关闭一页面

 

 

 

 

 

 

 

 

附加

警告弹窗alert()

确认弹窗confirm(

提示弹窗prompt()

 

 

HTML事件属性:

一、HTML4增加了使事件在浏览器触发动作的能力,比如用户点击元素之后启动javascript。

二、window事件属性

1、onafterprint  5

在设置页面打印且打印对话框已经出现后,执行一段javascript。

<body onafterprint="printmsg()">


只有IE和火狐支持。

在IE中是在打印对话框出现之前执行。

onafterprint经常与onbeforeprint一起使用。

 

2、onbeforeprint  5

在设置页面打印之后但是在打印对话框出现之前执行javascript

只有IE和火狐支持。

onbeforeprint属性是在用户已经设置页面打印之后立即触发,但是在打印对话框之前。

 

3、onbeforeunload  5

文档卸载之前运行脚本

 

4、onerror  5

当错误发生时运行的脚本

 

5、onload

页面结束加载之后触发

页面加载之后立即执行一段javascript。

所有主流浏览器都支持

 

6、onmessage   5

当消息被触发时运行的脚本

 

7、onoffline   5

当文档离线时运行脚本

 

8、ononline  5

当文档上线时运行脚本

 

9、onpagehide  5 

当窗口隐藏时运行脚本

 

10、onpageshow  5

当窗口可见时运行的脚本

 

11、onpopostate  5

当窗口历史记录改变时运行脚本

 

12、onredo  5

当文本执行撤销时运行的脚本

 

13、onresize  5

当浏览器窗口被调整大小时触发

 

所有浏览器都支持

 

14、onstorage  5

当web storage区域更新后运行的脚本

 

15、onundo  5

在文档执行undo时运行的脚本

 

16、onunload

会在页面下载时触发(或者浏览器窗口以关闭)

会在从页面导航离开时发生(通过点击链接、提交表单或者关闭浏览器窗口等)

如果你重载的话也会触发改时间。

 

二、Form事件

由HTML表单内的动作触发的事件(应用到几乎所有HTML元素,但最常用在form元素中)

 

1、onblur

元素失去焦点时触发

常用于表单验证代码

所有主流浏览器都支持

<element onblur="script">

 

2、onchage

在元素改变时触发

该属性适用于<input>,<textrea>以及<select>元素

 

3、oncontextmenu  5

当上下文菜单被触发时运行的脚本

 

4、onfocus

当元素获得焦点时触发

该属性常适用于<input>,<select>以及<a>

不适用于<base>,<dbo>,<br>,<head>,<html>,<iframe>,<meta>,<param>,<script>,<style>或<title>

 

5、onformchange   5

当表单改变时运行的脚本

 

6、onforminput  5

当表单获得用户输入时执行的脚本

 

7、oninput  5

当元素获得用户输入时运行的脚本

 

8、oninvaild  5

当元素无效时运行的程序

 

9、onreset 

当表单的重置按钮被点击触发时,HTML5中不支持。

 

10、onselect

在文本被选中时触发

可用于<input type = "file"> <input type = ''password''/text>以及<textrea>

 

所有主流浏览器都支持

 

11、onsubmit

在提交表单时触发,并且只能在form中使用

 

三、keyboard事件

1、onKeydown事件

用户按下按键时触发

 

2、onKeypress

用户敲击按钮时触发

 

3、onkeyup

用户释放按钮时触发

 

四、Mouse事件

由鼠标或者类似用户动作触发的事件

1、onclick

元素上发生点击鼠标点击时触发

 

所有主流浏览器都支持

 

onclick属性不适用于已下元素<base>,<bdo>,<br>,<head>,<html>,<iframe>,<meta>,<param>,<script>,<style>或<title>

 

2、ondblick

双击鼠标时触发 

 

同上

 

同上

 

3、ondrag  5

元素被拖动时触发的事件

 

4、ondragend  5

在拖动操作末端运行的脚本

 

5、ondragenter  5

当元素已被拖动到有效区域时执行的脚本

 

6、ondragleave  5

当元素离开有效拖动目标时运行的脚本

 

7、ondragover  5

当元素在有效拖放目标上正在被拖动时运行的脚本

 

8、ondragstart  5

在拖动操作开端运行的脚本

 

9、ondrop  5

当被拖元素正在被拖放时运行的脚本

 

10、onmousedown

鼠标按钮在元素上按下时触发

事件次序:左/中键

onmousedown、onmouseup、onclick

事件次序:右键

onmousedown、onmouseup、oncontextmenu

 

所有主流浏览器都支持

 

不适用于同上

 

11、onmousemove

当鼠标指针移动到元素上时触发

 

所有浏览器都支持

 

不适用于同上

 

12、onmouseout

当鼠标指针移除元素时触发

 

所有主流浏览器都支持

 

不适用于同上

 

13、onmouseover

和onmousemove基本一样,不同在于onmousemove每次移动都会调用一次,而onmouseover只有进来第一次调用

 

14、onmouseup

在元素上释放按钮时触发

事件次序:左/中键

onmousedown、onmouseup、onclick

事件次序:右键

onmousedown、onmouseup、oncontextmenu

 

所有主流浏览器都支持

 

不适用同上

 

15、onmousewheel  5

在鼠标滚轮正在滚动时运行的脚本

 

16、onscroll  5

当元素滚动条被滚动时运行的脚本

 

四、Media

由媒介(比如视频、图像和音频)触发的事件,适用于所有HTML文件,但常见于媒介中。

 

1、onabort

在退出时运行的脚本

 

2、oncanplay  5

当文件就绪时可以开始播放时运行的脚本(缓冲足够开始时)

 

3、 oncanplaythrough  5

当媒介能够无需缓冲播放至结束时运行的脚本

 

4、ondurationchange  5

当媒介长度改变时运行的脚本

 

5、onempited  5

当发生故障并且文件突然不可用时运行的脚本

 

6、opened  5

当媒介已经到达结尾时运行的脚本

 

7、onerror  5

当媒介数据已加载时运行的脚本

 

8、onloadeddata  5

当媒介数据已加载时运行的脚本

 

9、onloadstart  5

当文件开始加载且未实际加载任何数据前运行的脚本

 

10、onpause  5

当媒介被用户或程序暂停时运行的脚本

 

11、onplay  5

当媒介就绪已经可以播放时运行的脚本

 

12、onplaying  5

当媒介已经开始播放运行时的脚本

 

13、onprogress  5

当浏览器正在获取媒介数据时运行的脚本

 

14、onratechange  5

每当回放速率改变时运行的脚本

 

15、onreadystatechange  5

每当就绪状态改变时运行的脚本

 

16、onseeked  5

当seeking属性设置为false(指示定位已经结束)时运行的脚本

 

17、onseeking  5

每当seeking属性设置为true(指示定位是活动的)时运行的脚本

 

18、onstalled  5

当浏览器未能取回媒介时运行的脚本

 

19、onsupend  5

在媒介完全加载之前不论何种原因终止取回媒介数据时运行的脚本

 

20、ontimeupdate  5

当播放位置改变时运行的脚本

 

21、onvolumechange  5

每当音量改变时运行的脚本

 

22、onwaiting

当媒介已停止播放但打算继续播放时(比如当媒介暂停已缓冲各种数据)运行脚本

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值