JavaScript 高淇讲解的代码（二）

4_事件机制_event对象_操作CSS属性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<style>
#div1 {
background-color: red;
position: absolute;
top: 100px;
left: 100px;
width: 10px;
height: 10px;
}
</style>
<script>
var divPos = 100;
function test() {
var a = document.getElementById("div1");
a.style.backgroundColor = "blue";
divPos += 10;
a.style.left = divPos + "px";
}
</script>
</head>
<body>
<div id ="div1"></div>
<input type="button" value="测试" οnclick="test();"/>
</body>
</html>
<!-- 4_操作CSS属性 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script>
function test (event) {
var evt = window.event || event;
/*
* ie:window.event
* fire fox:参数event
*/
var src = evt.srcElement || evt.target;
var code = evt.keyCode || evt.charCode;
alert(code);
}
</script>
</head>
<body>
<input type="button" value="测试" οnclick="test(event);"/>
</body>
</html>
<!-- 4_事件机制_event对象 -->

5_常见内置对象_类的定义方式_prototype继承方式_JSON

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script>
// 类
function Person(name, age) {
this.name = name;
this.age = age;
this.study = function() {
console.log("Your name is: " + this.name + ", Your age is: " + this.age);
}
}
function testPerson() {
var p = new Person("cary", 25);
p.study();
}
// 继承
function Boy() {
}
Boy.prototype = new Person("李四", 12);
Boy.prototype.runner = function() {
console.log("Boy run!");
}
function testBoy() {
var b = new Boy();
b.study();
b.runner();
}
</script>
</head>
<body>
<input type="button" value="测试Person" οnclick="testPerson();"/>
<br/>
<input type="button" value="测试Boy" οnclick="testBoy();"/>
<br/>
</body>
</html>
<!-- 5_类的定义方式_prototype继承方式 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script>
function testJSON() {
var a = {
name : "Yin",
age : 25,
study : function() {
console.log("Learning...");
}
};
//对象直接量
var b = {
name : "Cary",
age : 21
};
var fs = [a, b];
var c = {
friends : fs
};
console.log(c.friends[0].name + " , " + c.friends[1].name);
}
</script>
</head>
<body>
<input type="button" value="测试JSON" οnclick="testJSON();"/>
<br/>
</body>
</html>
<!-- 5_JavaScript object native js原生对象 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script>
function testFrame() {
var isLogin = confirm("你确认登录吗？");
if (isLogin) {
console.log("yes");
} else {
console.log("no");
}
}
function testFrame1(){
var name = prompt("请输入名字");
console.log("Your name is : " + name);
}
</script>
</head>
<body>
<input type="button" value="测试确认框" οnclick="testFrame();"/>
<input type="button" value="测试询问框" οnclick="testFrame1();"/>
</body>
</html>
<!-- 5_常见内置对象 -->

6_window对象_定时控制_navigator_history_location对象

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
</head>
<script>
var t;
var v;
function aa(a, b) {
console.log("a + b = " + (a + b));
}
function testTimeout() {
var c = 1;
var d = 2;
t = window.setTimeout(function() {
aa(c, d);
}, 3000);
}
function testClearTimeour() {
window.clearTimeout(t);
}
function testInterval() {
var c = 1;
var d = 2;
v = window.setInterval(function() {
aa(c, d);
}, 500);
}
function testClearInterval() {
window.clearInterval(v);
}
function testNavigator() {
console.log("userAgent : " + navigator.userAgent);
console.log("Is firefox : " + navigator.userAgent.toLowerCase().indexOf("firefox"));
}
</script>
<body>
<input type="button" value="测试Timeout" οnclick="testTimeout();"/>
<input type="button" value="测试ClearTimeout" οnclick="testClearTimeour();"/>
<br/>
<br/>
<input type="button" value="测试Interval" οnclick="testInterval();"/>
<input type="button" value="测试ClearInterval" οnclick="testClearInterval();"/>
<br/>
<br/>
<input type="button" value="测试Navigator" οnclick="testNavigator();"/>
</body>
</html>
<!-- 6_window对象_定时控制 -->

JavaScript 高淇讲解的代码（二）相关推荐

【MATLAB】无人驾驶车辆的模型预测控制技术（精简讲解和代码）【运动学轨迹规划】
文章目录 0.友情链接 1.引言 2.预测模型 3.滚动优化 3.1.线性化 3.2.UrU_rUr的求取 3.3.离散化与序列化 3.4.实现增量控制 4.仿真示例 0.友情链接 B站链接1-北京 ...
【OS系列-2】- 进程详细讲解（代码示例）
进程进程详细讲解(代码示例) 进程示例代码创建进程的具体过程? 执行 fork()的时候系统做了什么? 进程间通信管道消息队列共享内存信号量套接字进程间同步信号量文件锁无锁 C ...
JavaScript 高阶函数
一.高阶函数 JavaScript 中的高阶函数是一种接受函数作为输入或返回函数作为输出的函数.它们提供了灵活的方式来处理函数,并允许把函数作为参数或返回值传递.它们是函数式编程的重要组成部分,并且可 ...
狂神说Java CSS3讲解综合代码
狂神说Java CSS3讲解综合代码 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/ ...
Java零基础小白的福利来了！！高淇老师带你飞~
经过一年时间的沉淀,高淇老师终于带着他的Java300集走来啦!!简直就是新手小白入门编程的福音,内容讲解细致,画面丰富. 课件所有图形做了重新绘制和配色,图解学习Java,让学习成为一种享受本套教 ...
HTML Inspector – 帮助你编写高质量的 HTML 代码
HTML Inspector 是一款代码质量检测工具,帮助你编写更优秀的 HTML 代码.HTML Inspector 使用 JavaScript 编写,运行在浏览器中,是最好的 HTML 代码检测工 ...
html空格代码_编写灵活、稳定、高质量的CSS代码的规范（推荐收藏）
01 编写灵活.稳定.高质量的HTML代码的规范一.唯一定律无论有多少人共同参与同一项目,一定要确保每一行代码都像是唯一个人编写的. 二.HTML 2.1 语法 (1)用两个空格来代替制表符(ta ...
ML之FE：特征工程中常用的五大数据集划分方法(特殊类型数据分割，如时间序列数据分割法)讲解及其代码
ML之FE:特征工程中常用的五大数据集划分方法(特殊类型数据分割,如时间序列数据分割法)讲解及其代码目录特殊类型数据分割 5.1.时间序列数据分割TimeSeriesSplit 特殊类型数据分割 ...
高淇python讲义百度文库_python 面向对象01
原创是:高淇老师讲义 Python 中一切皆对象 ========================================================================== ...
javascript获取asp.net后台代码的方法
1.如何在JavaScript访问C#函数? 2.如何在JavaScript访问C#变量? 3.如何在C#中访问JavaScript的已有变量? 4.如何在C#中访问JavaScript函数? 问题1 ...

JavaScript 高淇讲解的代码（二）

JavaScript 高淇讲解的代码（二）相关推荐

最新文章

热门文章