JavaScript学习总结:
JavaScript字母大小写是敏感的,使用 Unicode 字符集。
一、JavaScript 输出:
使用 window.alert() 弹出警告框。---alert("浏览器8弹窗显示!");
使用 document.write() 方法将内容写到 HTML 文档中。---document.write("向body中输出文本!");
使用 innerHTML 写入到 HTML 元素。
---<p id="e1">段落原内容!</p>---document.getElementById("e1").innerHTML = [40,'新内容',5*9,5+2];
使用 console.log() 写入到浏览器的控制台。---console.log("控制台输出!");
二、JavaScript 数据类型:
var length = 16; // Number 通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
三、JavaScript 函数:
<Button onclick="my()">点击显示当前时间</Button>
<script>
function my(){
alert(Date());
}
</script>
四、JavaScript 变量:
局部变量:在 JavaScript 函数内部声明的变量,只能在函数内部访问它。
全局变量:在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
作为参数的的变量称为*形参*,带入的参数称为*实参*。
function myFunction(a,b){ return a*b;} // 形参
document.getElementById("demo").innerHTML=myFunction(4,3); // 实参
声明新变量时,可以使用关键词 “new” 来声明其类型:
var carname = new String;
var x = new Number;
var y = new Boolean;
var cars = new Array;
var person = new Object;
<button onclick="myFunction()">点击创建变量</button>
<p id="demo"></p>
<script>
function myFunction(){
var carname="显示内容";
document.getElementById("demo").innerHTML=carname;
}
</script>
一条语句,多个变量:var name=“学习”, age=18, job=“Java程序猿”。
如果重新声明 JavaScript 变量,该变量的值不会丢失:var carname=“学习”; var carname; 语句执行后,变量 carname 的值依然是 “学”。
如果重复声明 JavaScript 变量,后声明的覆盖之前的:var a = 1; var a = ‘x’; console.log(a); 语句执行后,变量 a 的值为 ‘x’。
五、JavaScript 数组:
创建数组:
var arr1 = new Array('a', 'b', 'c'); //这是一个预定义的数组,在创建时初始化
var arr2 = ['a', 'b', 'c' ]; //同样是在创建时初始化,但是这种创建更为简洁直观
六、JavaScript 对象:
-
字符串可以是对象,var x = “John”; x 是字符串 var y = new String(“John”); y 是对象
-
对象的属性以名称和值对的形式 (name : value) 来定义。
var person=
{
firstname : "John",
lastname : "Doe",
id : 5566
};
- 对象的创建:
直接创建:var people = {name : 'Tom', age : 21, eat : function(){ } }
先创建对象再追加属性:
var people = new Object();
people.name = 'Tom';
people.age = 21;
people.eat = function(){ }
- 对象属性有两种寻址方式:
name = person.name;
name = person["name"];
七、JavaScript 函数:
函数就是包裹在花括号中的代码块,前面使用了关键词 function:
function functionname()
{
// 执行代码
}
当调用该函数时,会执行函数内的代码。
- 带参数的函数:
function myFunction(var1,var2)
{
// 执行代码
}
或:<button onclick="myFunction('Hello','World!')">点击这里</button>
- 带有返回值的函数:
function myFunction()
{
var x=5;
return x;
}
- 函数的调用:在使用 return 语句时,函数会停止执行,并返回指定的值。
var myVar=myFunction();
或
document.getElementById("demo").innerHTML=myFunction();
函数实例:
1. javascript CheckBox 全选与取消全选:
HTML:
看书:<input type="checkbox" name="checkbox" value=1><br>
写字:<input type="checkbox" name="checkbox"value=2><br>
打飞机:<input type="checkbox" name="checkbox"value=3><br>
玩游戏:<input type="checkbox" name="checkbox"value=4><br>
<button onclick="allcheck()">全选/取消</button>
JavaScript:
var checkAll = false;
function allcheck(){
checkAll = !checkAll;
let inputs = document.getElementsByName('checkbox')
for(var i =0;i<inputs.length;i++){inputs[i].checked = checkAll}
}
2.javascript 简单计算器:
HTML:
<p>简单计算器:</p>
<table border="1" style="position:center;">
<tr>
<td>第一个数:</td>
<td><input type="text" id="first"/></td>
</tr>
<tr>
<td>第二个数:</td>
<td>