javascript语言的应用
2017-11-08 本文已影响31人
简_笑
JavaScript技术：
JavaScript语言：变量，数据类型，流程控制，函数，内置对象（strin，array，math，date）
JavaScript语言操作网页对象：标签对象，浏览器对象
网页对象介绍
- HTML文件中的每个标签都是一个对象
- 对象具有：属性和方法
- 获取网页标签对象的方法：
var v1 = document.getElementById("id名")；
- 操作对象的标签属性：
获取：var v1 = obj1.标签属性名；
赋值：obj1.标签属性名 = 某值；
- 操作对象的样式属性：
获取：var v1 = obj.style.样式属性名；（只能获取”行内样式“）
赋值：obj1.style.样式属性名 = 某值
事件初步
- 简单来说，事件就是“动作”，也就是用户所在的某种操作，比如：点击，鼠标移动，双击……
- JS是一门基于对象的事件驱动的脚本语言
- 事件有以下：
- 鼠标事件：
onclick:
onmouseover:
onmouseout:
ondblclick:双击事件
onmousedown：鼠标按下去的那一刻
onmouseup：鼠标抬起来的那一刻
onmousemove：鼠标移动的时候```
- 键盘事件：
onkeypress：按键点击一次发生
onkeydown：按键按下去的时候发生
onkeyup：按键抬起来的时候发生
- 表单事件：
onsubmit：当一个表单正要“提交”的时候发生
onfocus：当一个表单项“获得焦点”的时候发生
onblur：当一个表单项“失去焦点”的时候发生
onchange：当一个表单项的数据发生改变的时候——通常只用于select标签的选项改变
- 其他
onload：当网页“一加载成功”的时候发生，也就是网页打开的时刻，他在一个页面上只出现一次。（onload只能写在body标签上，或者要么就不在标签中写，而是在脚本中使用window.onload中实现）
小结：事件随时发生，无处不在，只在于我们想要在哪个对象上使用哪个事件来完成什么工作
其基本的代码模式：
<标签名……on事件名 = "函数名;">……</标签名>
<script>
function 函数名(){
//此处就是小结里面我们需要做什么
}
</script>
则其基本的含义是：某个对象发生什么事件的时候会去调用某个函数以完成某种任务
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<style type="text/css">
#t1{
color: #999999;
}
</style>
<script>
function f1(obj){
if(obj.value == "请输入你的用户名"){
obj.value = "";
}
obj.style.color = "black";
}
function f2(obj) {
if(obj.value == ""){
obj.value = "请输入你的用户名";
obj.style.color = "gray";
}
}
</script>
</head>
<body>
<form>
<div>
要求：用户名一获得焦点，文字就消失，且颜色变为正常的黑色，
如果用户什么也没填写就离开，则文字提示重新出现
</div>
<!--onfocus获得焦点，onblur失去焦点-->
登录：<input type="text" value="请输入你的用户名" id="t1" onfocus="f1(this)" onblur="f2(this)" />
<br />
密码：<input type="password" />
<br />
<input type="submit" value="登录" />
</form>
</body>
</html>
