JavaScript 数据类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型。
数字、字符串、布尔、数组、对象
let和var
let作用于块内,var变量作用于整个函数
Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
声明新变量时,可以使用关键词 "new" 来声明其类型:
(注意:var声明了变量但是不赋值,其类型为undfined)
对象
对象定义
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
对象访问
person.lastName;
person["lastName"];
访问对象方法
- 创建对象方法:
methodName : function() { code lines }- 访问对象方法:
objectName.methodName()
JavaScript 函数
function myFunction()
{
var x=5;
return x;
}
var myVar=myFunction();
JavaScript 作用域
- 变量在函数内声明,变量为局部作用域。局部变量:只能在函数内部访问。局部变量在函数执行完毕后销毁。
- 变量在函数外定义,即为全局变量。全局变量有全局作用域: 网页中所有脚本和函数均可使用。全局变量在页面关闭后销毁。
- 如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。(在全局变量是 window 对象: 所有数据变量都属于 window 对象。函数外的未用var声明的为window变量可删除,用var声明的不可删除)
JavaScript 事件
常见的HTML事件的列表:
JavaScript 字符串
- 可以使用索引位置来访问字符串中的每个字符:
var carname = "Volvo XC60";
var character = carname[7];- 使用内置属性 length 来计算字符串的长度:
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;- 使用反斜杠 () 来转义
- 通常, JavaScript 字符串是原始值,可以使用字符创建: var firstName = "John"
但我们也可以使用 new 关键字将字符串定义为一个对象: var firstName = new String("John")
Example:
var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object常见字符串方法
运算符
- 条件运算符
voteable=(age<18)?"年龄太小":"年龄已达到";
循环
- For/In 循环
var person={fname:"John",lname:"Doe",age:25};
for (x in person) // x 为属性名
{
txt=txt + person[x];
}- do/while 循环
do{
x=x + "The number is " + i + "
";
i++;
}
while (i<5);
break和continue
- break 和 continue 语句仅仅是能够跳出代码块的语句。
- continue 语句(带有或不带标签引用)只能用在循环中。
- break 语句(不带标签引用),只能用在循环或 switch 中。但是通过标签引用,break 语句可用于跳出任何 JavaScript 代码块:
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0]);
document.write(cars[1]);
document.write(cars[2]);
break list;//带标签引用
document.write(cars[3]);
document.write(cars[4]);
document.write(cars[5]);
}
JavaScript typeof, null, 和 undefined
- 使用 typeof 操作符来检测变量的数据类型。
- JavaScript 中 null 表示 "什么都没有"
- JavaScript 中, undefined 是一个没有设置值的变量。
var person = null; // 值为 null(空), 但类型为对象
var person = undefined; // 值为 undefined, 类型为 undefined- null 和 undefined 的值相等,但类型不等:
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
JavaScript 数据类型
- 在 JavaScript 中有 5 种不同的数据类型:
string
number
boolean
object
function- 3 种对象类型:
Object
Date
Array- 2 个不包含任何值的数据类型:
null
undefined- 注意的数据类型
NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined- constructor 属性:返回所有 JavaScript 变量的构造函数。
"John".constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函数 Array() { [native code] }
{name:'John', age:34}.constructor // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function () {}.constructor // 返回函数 Function(){ [native code] }
JavaScript 类型转换
- 自动转换类型
当 JavaScript 尝试操作一个 "错误" 的数据类型时,会自动转换为 "正确" 的数据类型。
以下输出结果不是你所期望的:
5 + null // 返回 5 null 转换为 0
"5" + null // 返回"5null" null 转换为 "null"
"5" + 1 // 返回 "51" 1 转换为 "1"
"5" - 1 // 返回 4 "5" 转换为 5
(+号放在前面,可以让+号后的类型变得和前面一样;-号放在后面,可以让-号前面的类型变得和后面一样)- 一元运算符 +
Operator + 可用于将变量转换为数字:
实例
var y = "5"; // y 是一个字符串
var x = + y; // x 是一个数字- 将字符串转换为数字
全局方法 Number() 可以将字符串转换为数字。
字符串包含数字(如 "3.14") 转换为数字 (如 3.14).
空字符串转换为 0。
其他的字符串会转换为 NaN (不是个数字)。
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
- search() 方法查找
var str = "Visit Runoob!";
var n = str.search("Runoob");- replace() 方法替换
var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/microsoft/i,"Runoob");
JavaScript 严格模式(use strict)
JavaScript 严格模式(strict mode)即在严格的条件下运行。
不允许使用未声明的变量。
不允许删除变量或对象。
不允许删除函数。
不允许变量重名。
不允许使用八进制。
不允许使用转义字符。
不允许对只读属性赋值。
不允许对一个使用getter方法读取的属性进行赋值。
不允许删除一个不允许删除的属性。
变量名不能使用 "eval" 字符串。
变量名不能使用 "arguments" 字符串。
禁止this关键字指向全局对象。
使用构造函数时,如果忘了加new,this不再指向全局对象,而是报错。
保留关键字
为了向将来Javascript的新版本过渡,严格模式新增了一些保留关键字:
implements
interface
let
package
private
protected
public
static
yield
常见错误
- 在常规的比较中,数据类型是被忽略的,以下 if 条件语句返回 true:
var x = 10;
var y = "10";
if (x == y)- switch 语句会使用恒等计算符(===)进行比较:
以下实例由于类型不一致不会执行 alert 弹窗:
var x = 10;
switch(x) {
case "10": alert("Hello");
}- 所有的编程语言,包括 JavaScript,对浮点型数据的精确度都很难确定:
var x = 0.1;
var y = 0.2;
var z = x + y // z 的结果为 0.3
if (z == 0.3) // 返回 false- 字符串中直接使用回车换行是会报错的。需要用\符号
- JavaScript 默认是在代码的最后一行自动结束。
- 使用名字来作为索引的数组称为关联数组(或哈希)。JavaScript 不支持使用名字来索引数组,只允许使用数字索引。
//*****************使用数字做索引**************************
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length; // person.length 返回 3
var y = person[0]; // person[0] 返回 "John"
//**************不用数字做索引,产生错误代码**************
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length 返回 0
var y = person[0]; // person[0] 返回 undefined- 定义数组元素,最后不能添加逗号
var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4。- Undefined 不是 Null。在 JavaScript 中, null 用于对象, undefined 用于变量,属性和方法。对象只有被定义才有可能为 null,否则为 undefined。
- 程序块作用域
在每个代码块中 JavaScript 不会创建一个新的作用域,一般各个代码块的作用域都是全局的。
for (var i = 0; i < 10; i++) {
// some code
}
return i;
JavaScript 表单验证
HTML 约束验证
HTML5 新增了 HTML 表单的验证方式:约束验证(constraint validation)。约束验证是表单被提交时浏览器用来实现验证的一种算法。HTML 约束验证基于:
HTML 输入属性
CSS 伪类选择器
DOM 属性和方法
- HTML 表单自动验证
HTML 表单验证也可以通过浏览器来自动完成。如果表单字段 (fname) 的值为空, required 属性会阻止表单提交:
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>- 必填(或必选)项目
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("姓必须填写");
return false;
}
}- E-mail 验证
输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:
function validateForm(){
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
alert("不是一个有效的 e-mail 地址");
return false;
}
}
//************************以下是表单代码*****************************
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
JavaScript JSON
JSON 是用于存储和传输数据的格式。JSON 通常用于服务端向网页传递数据 。JSON 使用 JavaScript 语法,但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。
什么是 JSON?
- JSON 英文全称 JavaScript Object Notation
- JSON 是一种轻量级的数据交换格式。
- JSON 易于理解。
以下 JSON 语法定义了 sites 对象: 3 条网站信息(对象)的数组:
{"sites":[
{"name":"Runoob", "url":"www.runoob.com"},
{"name":"Google", "url":"www.google.com"},
{"name":"Taobao", "url":"www.taobao.com"}
]}
JSON 语法规则- 数据为 键/值 对。
- 数据由逗号分隔。
- 大括号保存对象
- 方括号保存数组
JSON 字符串转换为 JavaScript 对象- 首先,创建 JavaScript 字符串,字符串为 JSON 格式的数据:
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';- 然后,使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
var obj = JSON.parse(text);- 实例
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
javascript:void(0) 含义
void 是 JavaScript的关键字,该操作符指定要计算一个表达式但是不返回值。
语法格式如下:
<head>
<script type="text/javascript">
void func()
javascript:void func()
//**************************或者****************************
void(func())
javascript:void(func())
</script>
</head>
href="#"与href="javascript:void(0)"的区别
<a href="javascript:void(0)">单击此处什么也不会发生</a>
- # 包含了一个位置信息,默认的锚是#top 也就是网页的上端。
- 而javascript:void(0), 仅仅表示一个死链接。
- 在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id。
- 如果你要定义一个死链接请使用 javascript:void(0) 。
Example:
<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
...
<p id="pos">尾部定位点</p>