JavaScript入门

最近学习js,因为有java的基础所以学起来还是比较简单的，看了基础的语法部分，整理了一些与java有些不太一样的知识点。

简介

JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都使用 JavaScript。

输出

• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台。

语法

• 数组：[40, 100, 1, 5, 25, 10]
• 对象：{firstName:”John”, lastName:”Doe”, age:50, eyeColor:”blue”}
• 函数：function myFunction(a, b) { return a * b;}

变量

var carname;

声明carname值是undefined;

重复声明值不会丢失

数据类型

在 JavaScript 中有 5 种不同的数据类型：
- string
- number
- boolean
- object
- function

3 种对象类型：
- Object
- Date
- Array

2 个不包含任何值的数据类型：
- null
- undefined

创建数组

//第一种
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
//第二种
var cars=new Array("Saab","Volvo","BMW");
//第三种
var cars=["Saab","Volvo","BMW"];

创建对象

var perple = {
    name : 'Tom', 
    age : 21 ,
    eat : function(){  } 
}

//对象寻址
name=person.name;
name=person["name"];

Undefined和Null

Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。

声明变量类型

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

对象

在js中，几乎所有的事物都是对象

对象的方法: 通过添加 () 调用 (作为一个函数)

//访问fullName()方法
name = person.fullName();

//访问 person 对象的 fullName 属性，它将作为一个定义函数的字符串返回
name = person.fullName;

函数

带有返回值的函数

//与java的不同在于不用指定返回类型，return也可以用来退出函数
function myFunction()
{
    var x=5;
    return x;
}

js变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

HTML中的全局变量

在HTML中，全局变量是window对象：所有数据变量都属于window对象。

//此处可使用 window.carName

function myFunction() {
    carName = "Volvo";
}

事件

HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML事件实例：
- HTML页面完成加载
- HTML input字段改变时
- HTML按钮被点击

常见的HTML事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

字符串

字符串可以存储一系列字符，如 “John Doe”。字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号：

字符串可以是对象（不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用）

var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object
(x === y) // === 为绝对相等，即数据类型与值都必须相等。
结果为 false，因为 x 是字符串，y 是对象

字符串属性和方法

原始值字符串，如 “John”, 没有属性和方法(因为他们不是对象)。

对字符串和数字进行加法运算

两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串

x=5+5;
y="5"+5;
z="Hello"+5;

//结果
10
55
Hello5

JavaScript == 与 === 区别

1. 对于 string、number 等基础类型，== 和 === 是有区别的
   
   • 不同类型间比较，== 之比较 “转化成同一类型后的值” 看 “值” 是否相等，=== 如果类型不同，其结果就是不等。
   • 同类型比较，直接进行 “值” 比较，两者结果一样。
2. 对于 Array,Object 等高级类型，== 和 === 是没有区别的
   进行 “指针地址” 比较
3. 基础类型与高级类型，== 和 === 是有区别的
   
   • 对于 == ，将高级转化为基础类型，进行 “值” 比较
   • 因为类型不同，=== 结果为 false
4. != 为 == 的非运算，!== 为 === 的非运算

var num=1；

var str="1"；

var test=1；

test == num   //true　相同类型　相同值 

test === num  //true　相同类型　相同值 

test !== num  //false test与num类型相同，其值也相同,　非运算肯定是false 

num == str   //true 　把str转换为数字，检查其是否相等。 

num != str   //false  == 的 非运算 

num === str  //false  类型不同，直接返回false 

num !== str  //true   num 与 str类型不同 意味着其两者不等　非运算自然是true啦

条件语句

for/in循环

var person={fname:"John",lname:"Doe",age:25}; 

for (x in person)
{
    txt=txt + person[x];
}

break和continue语句

break 和 continue 语句可以和标签一起使用

• continue 语句（带有或不带标签引用）只能用在循环中。
• break 语句（不带标签引用），只能用在循环或 switch 中。
• 通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：

cars=["BMW","Volvo","Saab","Ford"];
list: 
{
    document.write(cars[0] + "<br>"); 
    document.write(cars[1] + "<br>"); 
    document.write(cars[2] + "<br>"); 
    break list;
    document.write(cars[3] + "<br>"); 
    document.write(cars[4] + "<br>"); 
    document.write(cars[5] + "<br>"); 
}

typeof, null, 和 undefined

typeof "John"                // 返回 string 
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

在JavaScript中，数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。

null是一个只有一个值的特殊类型。表示一个空对象引用。

用 typeof 检测 null 返回是object。

//清空对象
var person = null;           // 值为 null(空), 但类型为对象

var person = undefined;      // 值为 undefined(空), 类型是undefined

//null 和 undefined 的值相等，但类型不等
typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

变量提升

函数声明和变量声明总是会被解释器悄悄地被”提升”到方法体的最顶部。

//第一种
x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x

//第二种
var x; // 声明 x
x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     // 在元素中显示 x

//第一种和第二种结果相同

严格模式

“use strict” 的目的是指定代码在严格条件下执行。
严格模式下你不能使用未声明的变量。

"use strict";
x = 3.14;       // 报错 (x 未定义)