JavaScript基础回顾(一)

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” οnsubmit=“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)"的区别
单击此处什么也不会发生

• # 包含了一个位置信息，默认的锚是#top 也就是网页的上端。
• 而javascript:void(0), 仅仅表示一个死链接。
• 在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
• 如果你要定义一个死链接请使用 javascript:void(0) 。
  Example:
  <a href=“javascript:void(0);”>点我没有反应的!
  <a href="#pos">点我定位到指定位置!
  …
  <p id=“pos”>尾部定位点