JS 入门学习

• console.log() 在哪输出？

基本grammar

1. 值类型（var 声明 动态类型）：

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

2. 对象类型：Object(字典)，数组(Array)，函数(Function)

var cars=new Array("Saab","Volvo","BMW");
var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};
name=person.lastname;	// 调用
name=person["lastname"];

3. window全局属性(未声明变量赋值)可以delete

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性

console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2

delete var1; // false 无法删除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义

4. event

<button onclick="displayDate()">现在的时间是?</button>

事件记录

DOM

DOM = Document Object Model，每个对象都是节点
属性与方法

JS HTML DOM

<script>document.getElementById("myBtn").onclick=function(){displayDate()};
	</script>

5. this & let

• object中的this

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

• 显式函数绑定

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
person1.fullName.call(person2);  // 返回 "John Doe"

• event中的this

<button onclick="this.style.display='none'">
点我后我就消失了
</button>

Browser related

• Navigator：包含有关访问者浏览器的信息

<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.language + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

• window对象与尺寸

window.document.getElementById("header"); // HTML DOM 的 document 也是 window 对象的属性之一：
document.getElementById("header");
var w=window.innerWidth;	//浏览器窗口的内部高度(包括滚动条)

• browser screen

<script>
document.write("可用宽度: " + screen.availWidth);
document.write("可用高度: " + screen.availHeight);
</script>

XML JavaScript

link

• Js与服务器交互还有别的方法吗