JavaScript学习复习
JavaScript 输出
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <h1>我的第一个 Web 页面</h1> <p id="demo">我的第一个段落。</p> <button onclick="testAlert()">testAlert</button> <button onclick="testinnerHtml()">innerHTML</button> <button onclick="myFunction()">myFunction</button> <button onclick="testConsole()">console</button> <script src="test.js"></script> </body> </html>
js代码：
test.js
function myFunction() { document.getElementById("demo").innerHTML = "我的第一个 JavaScript 函数"; } function testinnerHtml() { document.getElementById("demo").innerHTML = "段落已修改。"; document.write(Date()); } function testConsole() { a = 5; b = 6; c = a + b; console.log(c); } function testAlert(){ window.alert("testAlert"); }
JavaScript 语法
数字：可以是整数或者是小数，或者是科学计数(e)。
3.14 1001 123e5
字符串:可以使用单引号或双引号。
"John Doe" 'John Doe'
数字表达式：
5 + 6 5 * 10
数组：
[40, 100, 1, 5, 25, 10]
对象：
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
函数：
function myFunction(a, b) { return a * b;}
变量：
JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值。
var x, length x = 5 length = 6
操作符：使用 算术运算符 来计算值。
JavaScript语句：
var x = 5 + 6; var y = x * 10;
例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="demo"></p> <button onclick="testVar()">testVar</button> <button onclick="testArithmeticOperators()">testArithmeticOperators</button> <script src="test.js"></script> </body> </html>
对应的js代码：
function testVar() { var length; length = 6; document.getElementById("demo").innerHTML = length; } /** * 算數操作符 */ function testArithmeticOperators() { document.getElementById("demo").innerHTML = (5 + 6) * 10; }
JavaScript 语句标识符
访问对象属性
person.lastName;
对象方法
name = person.fullName();
demo:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="demo">test</p> <button onclick="testObjectPropertie1()">调用对象属性方法1</button> <button onclick="testObjectPropertie2()">调用对象属性方法2</button> <button onclick="testObjectPropertie2()">调用对象方法fullName</button> <script type="text/javascript" src="test.js" ></script> </body> </html>
对应的Js代码：
/** * 调用对象属性1 */ function testObjectPropertie1() { var person = { firstName: "John", lastName: "Doe", id: 5566 }; //调用firstName，lastName document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName; document.getElementById("demo").innerHTML = person["firstName"] + " " + person["lastName"]; } /** * 调用对象属性 */ function testObjectPropertie2() { var person = { firstName: "张", lastName: "小丽", id: 5566 }; document.getElementById("demo").innerHTML = person["firstName"] + " " + person["lastName"]; } /** * 调用person对象的方法fullName */ function testObjectMethod() { var person = { firstName: "张", lastName: "小丽", id: 5566, fullName: function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo").innerHTML = person.fullName(); }
调用带参数的函数
声明：
function myFunction(var1,var2) { 代码 }
带有返回值的函数
通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
carname="Volvo";
例子：
界面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Js函数</title>
</head>
<body>
<p>点击这个按钮，来调用带参数的函数。</p>
<button οnclick="jsMethod('Harry Potter','Wizard')">调用带参数的函数</button>
<button οnclick="showReturn(100,200)">带有返回值的函数</button>
<p>简单计算器:</p>
<table border="1" style="position:center;">
<tr>
<td>第一个数：</td>
<td><input type="text" id="first" /></td>
</tr>
<tr>
<td>第二个数：</td>
<td><input type="text" id="twice" /></td>
</tr>
<tr>
<td colspan="2">
<button style="width:inherit" οnclick="add()">+</button>
<button style="width:inherit" οnclick="subtract()">-</button>
<button style="width:inherit" οnclick="ride()">*</button>
<button style="width:inherit" οnclick="devide()">/</button>
</td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<p id="result"></p>
</td>
</tr>
</table>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
js代码：
/** * 有参数的js方法 * @param {Object} name 名字 * @param {Object} job 工作 */ function jsMethod(name, job) { alert("Welcome " + name + ", the " + job); } /** * 有返回值的js方法 * @param {Object} a 参数1 * @param {Object} b 参数2 */ function jsMethod2(a, b) { return a * b + a / b; } function showReturn(a, b) { alert(jsMethod2(a, b)) } /** * 加 */ function add() { var first = document.getElementById("first").value; var twice = document.getElementById("twice").value; var result = Number(first) + Number(twice); setResult(result); } /** * 减 */ function subtract() { var first = document.getElementById("first").value; var twice = document.getElementById("twice").value; var result = Number(first) - Number(twice); setResult(result); } /** * 乘 */ function ride() { var first = document.getElementById("first").value; var twice = document.getElementById("twice").value; var result = Number(first) * Number(twice); setResult(result); } /** * 除 */ function devide() { var first = document.getElementById("first").value; var twice = document.getElementById("twice").value; var result = Number(first) / Number(twice); setResult(result); } /** * 加 减 乘 除 结果显示 * @param {Object} result */ function setResult(result) { document.getElementById("result").innerHTML = result; }
主要是加减乘数运算和有参函数，有返回值函数调用
常见的HTML事件
事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
- 页面加载时触发事件
- 页面关闭时触发事件
- 用户点击按钮执行动作
- 验证用户输入内容的合法性
- 等等 ...
可以使用多种方法来执行 JavaScript 事件代码：
- HTML 事件属性可以直接执行 JavaScript 代码
- HTML 事件属性可以调用 JavaScript 函数
- 你可以为 HTML 元素指定自己的事件处理程序
- 你可以阻止事件的发生。
- 等等 ...
字符串长度
可以使用内置属性 length 来计算字符串的长度。
特殊字符
字符串可以是对象
通常， JavaScript 字符串是原始值，可以使用字符创建： var firstName = "John"
但我们也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String("John")
字符串属性和方法
字符串属性
字符串方法
JavaScript 比较 和 逻辑运算符
比较运算符
逻辑运算符
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>比较运算符</h2>
<p>x=5</p>
<button οnclick="comparisonOperators()">比较运算符</button>
<p id="demo">x==8</p>
<p id="demo1">x == 8</p>
<p id="demo2">x == 5</p>
<p id="demo3">x === 5</p>
<p id="demo4">x != 8</p>
<p id="demo5">x !== "5"</p>
<p id="demo6">x!== 5</p>
<p id="demo7">x > 8</p>
<p id="demo8">x < 8</p>
<p id="demo9">x >= 8</p>
<p id="demo10">x <= 5</p>
<h2>逻辑运算符</h2>
<p> x=6 以及 y=3</p>
<button οnclick="logicalOperators()">比较运算符</button>
<p id="comparisonOperatorsdemo">(x < 10 && y > 1)</p>
<p id="comparisonOperatorsdemo1">(x==5 || y==5) </p>
<p id="comparisonOperatorsdemo2">!(x==y)</p>
<script>
function comparisonOperators() {
var x = 5;
//等于
document.getElementById("demo").innerHTML = x == 8;
document.getElementById("demo1").innerHTML = x == 5;
//绝对等于（值和类型均相等）
document.getElementById("demo2").innerHTML = x === "5";
document.getElementById("demo3").innerHTML = x === 5;
//不等于
document.getElementById("demo4").innerHTML = x != 8;
// 不绝对等于（值和类型有一个不相等，或两个都不相等）
document.getElementById("demo5").innerHTML = x !== "5";
document.getElementById("demo6").innerHTML = x!==5;
//大于
document.getElementById("demo7").innerHTML = x>8;
//小于
document.getElementById("demo8").innerHTML = x < 8;
//大于或等于
document.getElementById("demo9").innerHTML = x >= 8;
//小于或等于
document.getElementById("demo10").innerHTML = x <= 5;
}
function logicalOperators(){
var x = 6;
var y = 3;
document.getElementById("comparisonOperatorsdemo").innerHTML = (x < 10 && y > 1);
document.getElementById("comparisonOperatorsdemo1").innerHTML = (x==5 || y==5);
document.getElementById("comparisonOperatorsdemo2").innerHTML = !(x==y);
}
</script>
</body>
</html>