JS学习笔记

JavaScript：写入 HTML 输出

实例

document.write("<h1>This is a heading</h1>");

提示：您只能在 HTML 输出中使用 document.write。若是您在文档加载后使用该方法，会覆盖整个文档。

 

x=document.getElementById("demo")  //查找元素x.innerHTML="Hello JavaScript";    //改变内容

对代码行进行折行

您能够在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：

document.write("Hello \
World!");

不过，您不能像这样折行：

document.write \
("Hello World!");

JavaScript 变量

• 变量必须以字母开头

• 变量也能以 $ 和 _ 符号开头（不过咱们不推荐这么作）

• 变量名称对大小写敏感（y 和 Y 是不一样的变量）

提示：JavaScript 语句和 JavaScript 变量都对大小写敏感

Value = undefined

在计算机程序中，常常会声明无值的变量。未使用值来声明的变量，其值其实是 undefined。

在执行过如下语句后，变量 carname 的值将是 undefined：

var carname;

从新声明 JavaScript 变量

若是从新声明 JavaScript 变量，该变量的值不会丢失：

在如下两条语句执行后，变量 carname 的值依然是 "Volvo"：

var carname="Volvo";
var carname;

JavaScript 对象

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

var person={firstname:"Bill", lastname:"Gates", id:5566};

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

实例

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

声明变量类型

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

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

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

原来js里也有异常的处理,能够trycatch,也能够throw

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

实例

<input type="text" id="fname" onchange="upperCase()">

亲自试一试

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的全部部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

建立 JavaScript 对象

经过 JavaScript，您可以定义并建立本身的对象。

建立新对象有两种不一样的方法：

1. 定义并建立对象的实例

2. 使用函数来定义对象，而后建立新的对象实例

建立直接的实例

这个例子建立了对象的一个新实例，并向其添加了四个属性：

实例

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

亲自试一试

替代语法（使用对象 literals）：

实例

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

亲自试一试

使用对象构造器

本例使用函数来构造对象：

实例

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

亲自试一试

建立 JavaScript 对象实例

一旦您有了对象构造器，就能够建立新的对象实例，就像这样：

var myFather=new person("Bill","Gates",56,"blue");
var myMother=new person("Steve","Jobs",48,"green");

极大或极小的数字可经过科学（指数）计数法来写：

实例

var y=123e5;    var z=123e-5;

全部 JavaScript 数字均为 64 位

setTimeout(code,millisec)

var t = setTimeout("javascript语句", 毫秒)

在下面的例子中，咱们为日期对象设置了一个特定的日期 (2008 年 8 月 9 日)：

var myDate=new Date()
myDate.(2008,7,9)

注意：表示月份的参数介于 0 到 11 之间。也就是说，若是但愿把月设置为 8 月，则参数应该是 7。

在下面的例子中，咱们将日期对象设置为 5 天后的日期：

var myDate=new Date()
myDate.(myDate.getDate()+5)

注意：若是增长天数会改变月份或者年份，那么日期对象会自动完成这种转换。

比较日期

日期对象也可用于比较两个日期。

下面的代码将当前日期与 2008 年 8 月 9 日作了比较：

var myDate=new Date();
myDate.setFullYear(2008,8,9);

var today = new Date();

if (myDate>today)
{
alert("Today is before 9th August 2008");
}
else
{
alert("Today is after 9th August 2008");
}

若是逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false。不然，其值为 true（即便当自变量为字符串 "false" 时）！

您能够向 RegExp 对象添加第二个参数，以设定检索。例如，若是须要找到全部某个字符的全部存在，则可使用 "g" 参数 ("global")。

如需关于如何修改搜索模式的完整信息，请访问咱们的 RegExp 对象参考手册。

在使用 "g" 参数时，exec() 的工做原理以下：

• 找到第一个 "e"，并存储其位置

• 若是再次运行 exec()，则从存储的位置开始检索，并找到下一个 "e"，并存储其位置

var patt1=new RegExp("e","g");
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)

因为这个字符串中 6 个 "e" 字母，代码的输出将是：

eeeeeenull

上面也是一个很好地do-while应用

window.location 对象用于得到当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location应该是一个颇有用的功能

一些方法：

• history.back() - 与在浏览器点击后退按钮相同

• history.forward() - 与在浏览器中点击按钮向前相同

Window Navigator

window.navigator 对象在编写时可不使用 window 这个前缀。

实例

<div id="example"></div>

<script>

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

document.getElementById("example").innerHTML=txt;

</script>

亲自试一试

警告：来自 navigator 对象的信息具备误导性，不该该被用于检测浏览器版本，这是由于：

• navigator 数据可被浏览器使用者更改

• 浏览器没法报告晚于浏览器发布的新操做系统

浏览器检测

因为 navigator 可误导浏览器检测，使用对象检测可用来嗅探不一样的浏览器。

因为不一样的浏览器支持不一样的对象，您可使用对象来检测浏览器。例如，因为只有 Opera 支持属性 "window.opera"，您能够据此识别出 Opera。

例子：if (window.opera) {...some action...}

真麻烦!!!!!!!!!!!!!!

建立和存储 cookie

在这个例子中咱们要建立一个存储访问者名字的 cookie。当访问者首次访问网站时，他们会被要求填写姓名。名字会存储于 cookie 中。当访问者再次访问网站时，他们就会收到欢迎词。

首先，咱们会建立一个可在 cookie 变量中存储访问者姓名的函数：

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

上面这个函数中的参数存有 cookie 的名称、值以及过时天数。

在上面的函数中，咱们首先将天数转换为有效的日期，而后，咱们将 cookie 名称、值及其过时日期存入 document.cookie 对象。

以后，咱们要建立另外一个函数来检查是否已设置 cookie：

function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}

上面的函数首先会检查 document.cookie 对象中是否存有 cookie。假如 document.cookie 对象存有某些 cookie，那么会继续检查咱们指定的 cookie 是否已储存。若是找到了咱们要的 cookie，就返回值，不然返回空字符串。

最后，咱们要建立一个函数，这个函数的做用是：若是 cookie 已设置，则显示欢迎词，不然显示提示框来要求用户输入名字。

function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
  {alert('Welcome again '+username+'!')}
else 
  {
  username=prompt('Please enter your name:',"")
  if (username!=null && username!="")
    {
    setCookie('username',username,365)
    }
  }
}

CDN - 内容分发网络

您老是但愿网页能够尽量地快。您但愿页面的容量尽量地小，同时您但愿浏览器尽量多地进行缓存。

若是许多不一样的网站使用相同的 JavaScript 框架，那么把框架库存放在一个通用的位置供每一个网页分享就变得颇有意义了。

CDN (Content Delivery Network) 解决了这个问题。CDN 是包含可分享代码库的服务器网络。

Google 为一系列 JavaScript 库提供了免费的 CDN，包括：

• jQuery

• Prototype

• MooTools

• Dojo

• Yahoo! YUI

如需在您的网页中使用 JavaScript 框架库，只需在 <script> 标签中引用该库便可：

引用 jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>

jQuery 返回 jQuery 对象，与已传递的 DOM 对象不一样。jQuery 对象拥有的属性和方法，与 DOM 对象的不一样。您不能在 jQuery 对象上使用 HTML DOM 的属性和方法。