2019.4.10 4.11 JS

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

var定义变量 function定义方法 都在script方法体内

在这里插入图片描述

在这里插入图片描述

第一个JS-弹出提示框

在这里插入图片描述
在这里插入图片描述

弹出一个带有输入框的提示框

在这里插入图片描述

栗子: 输入数字 输出平方
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

通过一个button 设计点击按钮 来激活弹出对话框行为

  1. 定义方法, 在head标签里面的script标签里面
    关键字:function 方法名(){
    }
  2. 在button标签里面 为onclick属性赋值。

栗子1:取平方
在这里插入图片描述

在这里插入图片描述

这个时候,显示网页的时候会显示一个按钮在这里插入图片描述
点击按钮后才会弹出页面等一系列行为。

栗子2:计算周长面积
在这里插入图片描述
在这里插入图片描述

注意,这里的number01和number02要通过parsInt强制转型, 不然在计算周长的时候,number01+number02 会被js拼接为 number01number02 (如输入2和4变成了24)。所以需要强转。

栗子3:取随机数
在这里插入图片描述
在这里插入图片描述

math.floor:取整


在这里插入图片描述
在这里插入图片描述

写到JS文件夹里面,可以减少主界面过多的代码

主界面通过这句话引用js里面的function方法
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
栗子:通过随机数写一个猜数字的游戏
在这里插入图片描述

input 语法:

在这里插入图片描述

在JS中,通过var 对象名 = document.getElementById(“对象的id”)获取键/输入框输入的内容。

栗子:通过JS写一个简易计算器
在这里插入图片描述

js中数组的写法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
还是和css中的相仿, 通过


来设置。先设置数组中的内容,然后通过for循环输出。 通过 上面那个select size 设置一次显示的数量。

innerHTML与innerText的区别

在这里插入图片描述
在这里插入图片描述

点击前:在这里插入图片描述
点击后:
在这里插入图片描述

原因是由于:
在这里插入图片描述


下午

在这里插入图片描述

window对象

在这里插入图片描述
在这里插入图片描述

window常用属性

在这里插入图片描述
使用示范:
在这里插入图片描述

JS:
在这里插入图片描述

window常用方法

在这里插入图片描述

Confirm:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

关于blur 失去焦点: 一般用于注册的时候,在账号框没有输入账号 却点到别处了会自动弹出提示。

提示框:prompt()

在这里插入图片描述

开启,关闭窗口

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

但是在关闭的时候不是这样操作,需要定义一个全局变量。因为单纯的close 浏览器并不知道关谁。
在这里插入图片描述
a.close() 关闭新窗口
在这里插入图片描述
window.close() 关闭当前窗口


获取当前时间

在这里插入图片描述
在这里插入图片描述

《带有上午好、下午好的时间显示表》
在这里插入图片描述


定时器

注意:这个括号里面 前面是要转向的 方法名(function后面跟的那个) 后面是时间
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

课堂练习:跑马灯的制作。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

document对象(DOM)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

动态的通过JS来操作 显示在body里面的文档数。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


根据层次查找节点。注意!文档中的空白文档也是节点

在这里插入图片描述

在相同节点数下,若查找前一个、下一个节点,一定要注意是否有空白文档,若有空白文档在前面或后面,则下一个、前一个节点就是undifined。

找出select标签。

在这里插入图片描述
在这里插入图片描述
里面一共有7个元素
在这里插入图片描述
这个绿色的长条换行 也算。一个元素

获取属性操作

在这里插入图片描述
在这里插入图片描述

getAttribute是获得值,括号里面是就是你想获得的内容。


赋值:给b01赋予click属性
在这里插入图片描述
在这里插入图片描述

setAttribute: 1.属性的名字 2属性的值(可以是其他方法)


删除属性
在这里插入图片描述


通过name/tagname属性查找节点。

在这里插入图片描述

在这里插入图片描述


增加节点

在这里插入图片描述

在原有元素上添加新的元素(文本框 按钮等)

在这里插入图片描述

示例:
在这里插入图片描述
1.创立一个添加节点的方法 创建一个节点p
2.找到方法体body中的某个元素 (通过id) 并且赋于名称
3.通过节点名.点 innerHTML 设置添加的内容
4.通过元素 。点appendChild(节点名称)

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述


删除节点

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述


事件。(目前就学了一个onclick)

在这里插入图片描述

onchange

在这里插入图片描述
在这里插入图片描述
一旦修改了值,onchange事件就会被触发。
在这里插入图片描述

JS重点:事件冒泡

js的事件委托
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_39263750/article/details/89193623