/** JavaScript
* 1.0
* 对象
*/
function Test(){
var book = { // 创建对象.
name: "中华上下五千年" , // 属性name的值为"中华上下五千年".
price: "99.00" ,
flag: true // flag的值为true.
}; // 花括号标记了对象的结束.
/* 对象的两种取值方式: 通过"."或者"[]"来访问对象属性
* : book.name
* : book["name"]
*/
book.healthy = "Y"; // 通过赋值创建一个新的属性.
console.log(book.name);
console.log(book["name"]); // 此种方式必须加引号还说明这是对象的属性名,否则取不到.
console.log(book);
}
/** JavaScript
* 1.1
* 数组
*/
function Test(){
var arr = [2,3,4,5]; // 具有四个值的数组,由"["和]"划定边界.
/* arr[0] 获取数组中第一个元素的值.
* arr.length 获取数组的长度.
* arr[arr.length-1] 获取数组中最后一个元素.
*/
console.log(arr[0]); // 数组中第一个元素的索引为0
console.log(arr.length);
console.log(arr[arr.length-1]);
console.log(arr[4]="9"); // 通过赋值来添加新元素.
console.log(arr[4]="6"); // 通过赋值来改变现有元素的值.
var arrs = []; // arrs是一个空数组,此时它具有0个元素.
console.log(arrs.length);
}
/** JavaScript
* 1.2
* 数组和对象中都可以包含另一个数组或对象.
*/
function Test(){
/** 具有两个元素的数组
* 其中每个元素都是一个对象
*/
var arr = [
{name:"张国荣",identity:"歌手"},
{name:"黑虎",identity:"锦衣卫"}
];
/** 这是一个包含两个属性的对象
* 其中每个属性都是一个数组.
* 数组的元素也是数组.
*/
var book = {
adult:[1,1,2],
juveniles:[1,1,1]
};
}
/** JavaScript
* 1.3
* 基础运算.
*/
function Test(){
console.log("2"+"3"); // 字符串连接.
console.log(6+1); // 基础运算.
var count = 0; // 定义一个变量.
console.log(count++); // 自增1.
console.log(count--); // 自减1.
console.log(count += 2); // 自增2: 和"count = count + 2;"写法一样.
console.log(count *= 2); // 自乘2: 和"count = count * 2;"写法一样.
count; // 变量本身也是一个表达式.
/**相等关系运算符来判断两个值是否相等.
*不等于,大于,小于运算符的运算结果是true或false.
*/
var x=2; y=3;
console.log(x==y); // false.
console.log(x!=y); // true.
console.log(x<y); // true.
console.log(x<=y); // true.
console.log(x>y); // false.
console.log("two"=="three"); // false.
console.log("two">"three"); // false.
console.log(false == (x>y)); // true.
/**粗略的讲短语是表达式的话,那整个句子就可以认为是语句.
*表达式仅仅计算出一个值,但并不做任何操作,他并不会改变程序的运行状态.
*而语句并不包含一个值(或者它所包含的值我们不怎么关心),但它们改变程序的运行状态.
*/
}
/** JavaScript
* 1.4
* 函数(函数是带有名称和参数的代码段,可以一次定义多次调用).
*/
function add(x,y){ // 定义一个名为add的函数,带有参数x,y
return x+y; // 计算函数的值,返回两个参数之和.
} // 函数代码块是由花括号包裹起来的部分.
add(1,1); // 调用函数add(),传入参数1和1,最终返回2.
var arr = function(x,y){ // 函数是一种值,可以赋值给变量.
return x*y; // 计算函数的值.
}; // 注意: 分号标示了赋值语句的结束.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<p><button onclick="see();" >按钮</button></p>
</body>
<script type="text/javascript">
/* JavaScript
* 1.5
*下段代码展示了如何在javaScript中定义一个类来表示2D平面几何中的点.
* 这个类实例化的对象拥有一个名为r()的方法,用来计算该点到原点的距离.
* prototye属性: 向对象添加属性和方法。
*/
// 定义一个构造函数以初始化一个新的Point对象
function Point(x,y){ // 按照惯例,构造函数均以大写字母开始
this.x = x ; // 关键字this指代初始化的实例
this.y = y ; // 将函数参数存储为对象的属性
} // 不需要return
// 通过给构造函数的prototye对象赋值,来给Point对象定义方法.
Point.prototype.r = function(){
return Math.sqrt(
this.x * this.x + // this指代调用这个方法的对象
this.y * this.y // 返回x² + y² 的平方根
);
};
// 使用new关键字和构造函数来创建一个实例
var p = new Point(1,1); // 平面几何中的点(1,1)
// Point的实例对象p(以及所有的Point实例对象)继承了方法r()
p.r(); // 1.414
// 调用实现
function see(){
//alert(p.r());
console.log(Point.prototype);
}
</script>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
Hello
<button onclick="hide(this,true); debug('hide button 1'); ">Hide1</button>
<button onclick="hide(this); debug('hide button 2'); ">Hide2</button>
World
</body>
<script type="text/javascript">
/*在document中的一个指定区域输出调试信息
*如果document中不存在这样的一个区域则创建一个.
*/
function debug(msg){
// 通过查看HTML元素id属性来查找文档的调试部分.
var log = document.getElementById("debuglog");
// 如果这个元素不存在,则创建一个.
if(!log){
log = document.createElement("div"); // 创建一个新的<div>元素.
log.id = "debuglog"; // 给这个元素的HTML元素id 赋值.
log.innerHTML = "<h1>Debug Log</h1>"; // 定义初始内容.
document.body.appendChild(log); // 将其添加到文档的末尾.
}
// 将消息包装在<pre>中,并添加至log中.
var pre = document.createElement("pre"); // 创建<pre>标签.
var text = document.createTextNode(msg); // 将msg添加在一个文本节点中.
pre.appendChild(text); // 将文本添加至<pre>.
log.appendChild(pre); // 将<pre>添加至log.
}
function hide(e, reflow){ // 通过javaScript操纵样式来隐藏元素e.
if(reflow){ // 如果第二个元素是true.
e.style.display = "none"; // 隐藏这个元素,其所占的空间也随之消失.
}else{ // 否则
e.style.visibility = "hidden"; // 将e隐藏,但是保留其所占用的空间.
}
/* visibilty属性规定元素是否可见
* 即使不可见的元素也会占据页面上的空间,一般会使用display属性.
*/
}
function highlight(e){ // 通过设置CSS类来高亮显示e.
/* 简单的定义或追加HTML类属性
* 这里假设CSS样式表中已经有"hilite"类的定义.
*/
if(!e.className) e.className = "hilite";
else e.className += "hilite";
}
</script>
</html>
