JavaScript基础02
015-JS中的常用事件-注册事件的两种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS中的常用事件-注册事件的两种方式</title>
</head>
<body>
<script type="text/javascript">
/*
JS中的事件：
blur失去焦点
focus获得焦点
click鼠标单击
dblclick鼠标双击
keydown键盘按下
keyup键盘弹起
mousedown鼠标按下
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开
mouseup鼠标弹起
reset表单重置
submit表单提交
change下拉列表选中项改变，或文本框内容改变
select文本被选定
load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生。）
任何一个事件都会对应一个事件句柄，事件句柄都是在事件前添加on
onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在。）
*/
// 对于当前程序来说，sayHello()函数被称为回调函数(callback函数)
// 回调函数的特点：自己把这个函数代码写出来了，但是这个函数不是自己负责调用，由其他程序负责调用该函数。
function sayHello(){
alert("sayHello");
}
</script>
<!--注册事件的第一种方式，直接在标签中使用事件句柄。-->
<!--以下代码的含义是：将sayHello函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用。我们称这个函数为回调函数。-->
<input type="button" value="hello" onclick="sayHello()"/>
<input type="button" value="hello2" id="mybtn"/>
<input type="button" value="hello3" id="mybtn1"/>
<input type="button" value="hello4" id="mybtn2"/>
<script type="text/javascript">
function doSome(){
alert("doSome...");
}
/*
第二种注册事件的方式，是使用纯JS代码完成事件注册。
*/
// 第一步：先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表整个HTML页面)
var btnObj = document.getElementById("mybtn");
// 第二步：给按钮对象的onclick属性赋值
btnObj.onclick = doSome; // 注意：千万别加小括号btnObj = doSome()，这是错误的写法。
// 这行代码的含义是将回调函数doSome注册到click事件上。
var mybtn1 = document.getElementById("mybtn1");
mybtn1.onclick = function () { // 这个函数没有名字，叫做匿名函数，这个匿名函数也是一个回调函数。
alert("hello mybtn1"); // 这个函数在页面打开的时候只是注册，不会被调用，在click事件发生之后才会调用。
}
document.getElementById("mybtn2").onclick = function () {
alert("hello mybtn2");
}
</script>
</body>
</html>
<!--
java中也有回调函数机制：
public class MyClass{
public static void main(String[] args){
// 主动调用run()方法，站在这个角度看run()方法叫做正向调用。
run();
}
// 站在run方法的编写者角度来看这个方法，把run方法叫做回调函数。
public static void run(){
System.out.println("run...");
}
}
-->
016-关于JS代码的执行顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于JS代码的执行顺序</title>
<!--load事件什么时候发生？页面全部元素加载完毕之后才会发生。-->
<body onload="ready()">
<script type="text/javascript">
/*
// 第一步：根据id获取节点对象
var btn = document.getElementById("btn").onclick;
// 返回null(因为代码执行到此处的时候id="btn"的元素还没有加载到内存)
// 第二步：给节点对象绑定事件
btn = function () {
alert("hello js!");
}
*/
function ready(){
var btn = document.getElementById("btn");
btn.onclick = function () {
alert("hello js");
}
}
</script>
<input type="button" value="hello" id="btn" />
</body>
</html>
017-关于JS代码的执行顺序2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于JS代码的执行顺序2</title>
</head>
<body>
<script type="text/javascript">
// 页面加载的过程中，将a函数注册给了load事件
// 页面加载完毕之后，load事件发生了，此时执行回调函数b
// 回调函数a执行的过程中，将b函数注册给了id="btn"的click事件。
// 当id="btn"的节点发生click事件之后，b函数被调用并执行。
window.onload = function(){ // 这个回调函数叫做a
document.getElementById("btn").onclick = function () { // 这个回调函数叫做b
alert("hello js");
}
}
</script>
<input type="button" value="hello" id="btn" />
</body>
</html>
018-JS代码设置节点的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS代码设置节点的属性</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
document.getElementById("btn").onclick = function () {
var mytext = document.getElementById("mytext");
// 一个节点对象中只要有的属性都可以“.”
mytext.type = "checkbox";
}
}
</script>
<input type="text" id="mytext"/>
<input type="button" value="将文本框修改为复选框" id="btn"/>
</body>
</html>
019-JS代码捕捉回车键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS代码捕捉回车键</title>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var usernameElt = document.getElementById("username");
// 回车键的键值是13
// ESC键的键值是27
/*usernameElt.onkeydown = function (a,b,c) {
// 获取键值
// alert(a); // [object KeyboardEvent]
// alert(b); // undefined
// alert(c); // undefined
}*/
/*usernameElt.onkeydown = function (event) {
// 获取键值
// 对于“键盘事件对象”来说,都有keyCode属性来获取键值。
alert(event.keyCode);
}*/
usernameElt.onkeydown = function (event) {
if(event.keyCode == 13){
alert("正在进行验证...");
}
}
}
// 张三程序员写了这样一个函数
/*function sum(){
alert("sum executea!");
}*/
/*function sum(a){
//alert("sum execute!");
alert(a);
}*/
// 李四程序员调用sum函数
// sum();
// sum("Hello World!");
</script>
<input type="text" id="username"/>
</body>
</html>
020-JS的void运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的void运算符</title>
</head>
<body>
页面顶部<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--
void运算符的语法：void(表达式)
运算原理：执行表达式，但不返回任何结果。
javascript:void(0)
其中javascript：作用是告诉浏览器后面是一段JS代码
以下程序中的javascript是不能省略的。
-->
<a href="javascript:void(0)" onclick="window.alert('test code')">
既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面不能跳转。
</a>
<br>
<a href="javascript:void(100)" onclick="window.alert('test code')">
既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面不能跳转。
</a>
<br>
<!--
void()这个小括号当中必须要有表达式
-->
<!--
<a href="javascript:void()" οnclick="window.alert('test code')">
既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面不能跳转。
</a>
-->
<br><br><br>
</body>
</html>
021-JS的控制语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的控制语句</title>
</head>
<body>
<script type="text/javascript">
/*
1、if
2、while
3、switch
4、do...while...
5、for循环
6、break
7、continue
8、for...in语句（了解）
9、with语句（了解）
*/
// 创建JS数组
// JS数组中的元素类型随意，元素个数随意
var arr = [false,true,1,2,"abc",3.14];
// 遍历数组
for(var i = 0; i < arr.length; i++){
alert(arr[i]);
}
// for...in语句
for(var i in arr){
alert(arr[i]);
}
// for...in语句可以遍历对象的属性
User = function (username,password) {
this.username =username;
this.password = password;
}
var u = new User("zhangsan","444");
alert(u.username + "," + u.password);
alert(u["username"] + "," + u["password"]);
for(var shuXingMing in u){
//alert(shuXingMing);
//alert(typeof shuXingMing); // shuXingMing是一个字符串
alert(u[shuXingMing]);
}
alert(u.username);
alert(u.password);
with(u){
// 相当于alert(u.username + ", " + u.password);
alert(username + ", " + password);
}
</script>
</body>
</html>
<!--
public class Test{
public static void main(String[] args){
int[] arr = {1, 2, 3, 4, 5};
int[] arr2 = new int[5]; // 等同于，int[] arr2 = {0,0,0,0,0};
String[] arr3 = {"a", "b", "c"};
String[] arr4 = new String[3]; // 等同于,String[] arr4 = {null,null,null};
}
}
-->
7798
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
