JS学习日记

编写js程序在script中编辑

js输出

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

js语法

常量

数字：1~n

字符串：'string'

数组：[40, 100, 1, 5, 25, 10]

对象：{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数：function myFunction(a, b) { return a * b;}

变量

JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值

var x, length

x = 5

length = 6

运算符

赋值，算术和位运算符	=  +  -  *  /	在 JS 运算符中描述
条件，比较及逻辑运算符	==  != <  >	在 JS 比较运算符中描述

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 通过对象字面量赋值

JavaScript 语句

JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "你好 Dolly" 

document.getElementById("demo").innerHTML = "你好 Dolly";

JavaScript 语句标识符

变量的数据类型可以使用 typeof 操作符来查看。

break	用于跳出循环。
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do ... while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if ... else	用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误 。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。

JavaScript 数组

下面的代码创建名为 cars 的数组：

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

或者 (condensed array):

var cars=new Array("Saab","Volvo","BMW");

或者 (literal array):

JavaScript 对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"John", lastname:"Doe", id:5566};

上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。

空格和折行无关紧要。声明可横跨多行：

var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

对象属性有两种寻址方式：

name=person.lastname;
name=person["lastname"];

Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

实例

cars=null;
person=null;

Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

cars=null;
person=null;

声明变量类型

当您声明新变量时，可以使用关键词 "new" 来声明其类型：

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

访问对象方法

你可以使用以下语法创建对象方法：

methodName : function() {
    // 代码 
}

你可以使用以下语法访问对象方法：

objectName.methodName()

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

• HTML 页面完成加载
• HTML input 字段改变时
• HTML 按钮被点击

通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

单引号:

<some-HTML-element some-event='JavaScript 代码'>

双引号:

<some-HTML-element some-event="JavaScript 代码">

在以下实例中，按钮元素中添加了 onclick 属性 (并加上代码):

<button οnclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

以上实例中，JavaScript 代码将修改 id="demo" 元素的内容。

在下一个实例中，代码将修改自身元素的内容 (使用 this.innerHTML):

<button οnclick="this.innerHTML=Date()">现在的时间是?</button>

也可以通过函数来调：

<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>

常见的HTML事件

下面是一些常见的HTML事件的列表:

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

字符串方法

更多方法实例可以参见：JavaScript String 对象。

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

if...else if...else 语句

使用 if....else if...else 语句来选择多个代码块之一来执行。

语法

if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

如果时间小于 10:00，则生成问候 "Good morning"，如果时间大于 10:00 小于 20:00，则生成问候 "Good day"，否则生成问候 "Good evening"：

if (time<10)
{
    document.write("<b>早上好</b>");
}
else if (time>=10 && time<20)
{
    document.write("<b>今天好</b>");
}
else
{
    document.write("<b>晚上好!</b>");
}

if (time<10) { document.write("<b>早上好</b>"); } else if (time>=10 && time<20) { document.write("<b>今天好</b>"); } else { document.write("<b>晚上好!</b>"); }

x 的结果是：

今天好

JavaScript 循环

如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。

我们可以这样输出数组的值：

一般写法：

document.write(cars[0] + "<br>"); 
document.write(cars[1] + "<br>"); 
document.write(cars[2] + "<br>"); 
document.write(cars[3] + "<br>"); 
document.write(cars[4] + "<br>"); 
document.write(cars[5] + "<br>");

使用for循环

for (var i=0;i<cars.length;i++) { document.write(cars[i] + "<br>"); }

JavaScript try 和 catch

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

语法

try { ... //异常的抛出 } catch(e) { ... //异常的捕获与处理 } finally { ... //结束处理 }

在下面的例子中，我们故意在 try 块的代码中写了一个错字。

catch 块会捕捉到 try 块中的错误，并执行代码来处理它。

var txt=""; 
function message() 
{ 
    try { 
        adddlert("Welcome guest!"); 
    } catch(err) { 
        txt="本页有一个错误。\n\n"; 
        txt+="错误描述：" + err.message + "\n\n"; 
        txt+="点击确定继续。\n\n"; 
        alert(txt); 
    } 
}

JSON 格式化后为 JavaScript 对象

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。

由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

---

JSON 语法规则

• 数据为 键/值 对。
• 数据由逗号分隔。
• 大括号保存对象
• 方括号保存数组

---

JSON 数据 - 一个名称对应一个值

JSON 数据格式为 键/值 对，就像 JavaScript 对象属性。

键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：

"name":"Runoob"

---

JSON 对象

JSON 对象保存在大括号内。

就像在 JavaScript 中, 对象可以保存多个 键/值 对：

{"name":"Runoob", "url":"www.runoob.com"}

---

JSON 数组

JSON 数组保存在中括号内。

就像在 JavaScript 中, 数组可以包含对象：

"sites":[ {"name":"Runoob", "url":"www.runoob.com"}, {"name":"Google", "url":"www.google.com"}, {"name":"Taobao", "url":"www.taobao.com"} ]

函数	描述
JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

POST请求：

　　发送的参数格式不同，请求头设置不同，具体参照 Http请求中请求头Content-Type讲解

　　发送的参数格式不同，后台获取方式也不相同 php请看 php获取POST数据的三种方法

一、使用XMLHttpRequest

　　主要分三步：

　　　　第一步：创建需要的对象，这里主要用到的是XMLHttpRequest，注意需要考虑早期的IE；

　　　　第二步：连接和发送；

　　　　第三步：接收；

　　

　　GET请求：

1 2 3 4 5 6 7 8 9 10 11 12

var httpRequest = new XMLHttpRequest();//第一步：建立所需的对象         httpRequest.open('GET', 'url', true);//第二步：打开连接  将请求参数写在url中  ps:"./Ptest.php?name=test&nameone=testone"         httpRequest.send();//第三步：发送请求  将请求参数写在URL中         /**          * 获取数据后的处理程序          */         httpRequest.onreadystatechange = function () {             if (httpRequest.readyState == 4 && httpRequest.status == 200) {                 var json = httpRequest.responseText;//获取到json字符串，还需解析                 console.log(json);             }         };

　　

　　POST请求：

1 2 3 4 5 6 7 8 9 10 11 12 13

var httpRequest = new XMLHttpRequest();//第一步：创建需要的对象 httpRequest.open('POST', 'url', true); //第二步：打开连接 httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头） httpRequest.send('name=teswe&ee=ef');//发送请求 将情头体写在send中 /**  * 获取数据后的处理程序  */ httpRequest.onreadystatechange = function () {//请求后的回调接口，可将请求成功后要执行的程序写在其中     if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功         var json = httpRequest.responseText;//获取到服务端返回的数据         console.log(json);     } };

　　

　　post方式发送json

1 2 3 4 5 6 7 8 9 10 11 12 13

var httpRequest = new XMLHttpRequest();//第一步：创建需要的对象 httpRequest.open('POST', 'url', true); //第二步：打开连接/***发送json格式文件必须设置请求头 ；如下 - */ httpRequest.setRequestHeader("Content-type","application/json");//设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）var obj = { name: 'zhansgan', age: 18 }; httpRequest.send(JSON.stringify(obj));//发送请求 将json写入send中 /**  * 获取数据后的处理程序  */ httpRequest.onreadystatechange = function () {//请求后的回调接口，可将请求成功后要执行的程序写在其中     if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功         var json = httpRequest.responseText;//获取到服务端返回的数据         console.log(json);     } };

以下是接触到的几个情景处理。

第一：如果后端程序返回json格式，是乱码（其实就是unicode 格式），我们可以利用

strobj = eval(str);    #利用eval方法先进行转换即可正常显示。