JavaScript

最新推荐文章于 2024-06-14 20:39:31 发布

xiabe

最新推荐文章于 2024-06-14 20:39:31 发布

阅读量374

点赞数

分类专栏： javascript 文章标签： javaScript 前端

本文链接：https://blog.csdn.net/xiabenshu/article/details/89050337

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript

使用CSS创建布局使用了许多技术和策略，理解box模型是每种策略的先决条件。掌握了框模型之后，您就可以学习如何操作web页面上的内容框了。

Mozilla开发人员网络为CSS布局提供了很好的介绍。这篇简短的阅读涵盖了CSS布局背后的基本概念，并快速介绍了文本对齐、浮动和位置等属性。

关于CSS布局的更广泛、更深入的指南可从W3C获得:CSS布局模型。本文档是专业开发人员的资源，所以如果您是CSS新手，请在阅读时花些时间。这不是一个快速阅读。但是，关于创建CSS布局，您需要知道的所有内容都包含在这个文档中。

多年来，网格布局一直是设计响应式布局的首选策略。CSS网格从零开始创建已有多年，市场上有许多不同的网格生成网站和开发框架。然而，在几年内，对网格布局的支持将成为CSS3规范的一部分。通过阅读W3C网站上的主题，您可以了解很多关于网格的知识。想要更轻松、更简短地介绍网格布局，请阅读Mozilla的这篇文章。

在几年内，CSS3柔性盒，或flexbox，有望成为设计网站布局的主导模式。flexbox规范还没有完全完成，对flexbox的支持在浏览器之间也不一致。然而，每一个初露头角的CSS开发人员都需要熟悉flexbox，并准备在不久的将来实现它。Mozilla开发人员网络是提高flexbox速度的最佳场所之一。

JavaScript简介

JavaScript 是世界上最流行的编程语言。

JavaScript：写入 HTML 输出

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

JavaScript：对事件作出反应

<button type="button" onclick="alert('Welcome!')">点击这里</button>

JavaScript：改变 HTML 内容

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

JavaScript：改变 HTML 图像

<!DOCTYPE html>
<html>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
  {
  element.src="/i/eg_bulboff.gif";
  }
else
  {
  element.src="/i/eg_bulbon.gif";
  }
}
</script>

<img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">

<p>点击灯泡来点亮或熄灭这盏灯</p>

</body>
</html>

JavaScript：改变 HTML 样式

x=document.getElementById("demo")  //找到元素
x.style.color="#ff0000";           //改变样式

JavaScript：验证输入

if isNaN(x) {alert("Not Numeric")};

<script>
alert("My First JavaScript");
</script>

中的 JavaScript

<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script>
.
.
</body>
</html>

中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的部分。

该函数会在点击按钮时被调用：
实例

<!DOCTYPE html>
<html>

<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>

<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

中的 JavaScript 函数

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>

</body>
</html>

外部的 JavaScript

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

请使用 “id” 属性来标识 HTML 元素：
例子
通过指定的 id 来访问 HTML 元素，并改变其内容：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML="我的第一段 JavaScript";
</script>

</body>
</html>

写到文档输出

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<script>
document.write("<p>我的第一段 JavaScript</p>");
</script>

</body>
</html>

例子2：

!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落。</p>

<button onclick="myFunction()">点击这里</button>

<script>
function myFunction()
{
document.write("糟糕！文档消失了。");
}
</script>

</body>
</html>

代码

document.getElementById("demo").innerHTML="Hello World";

代码块

function myFunction()
{
document.getElementById("demo").innerHTML="Hello World";
document.getElementById("myDIV").innerHTML="How are you?";
}

JavaScript 对大小写敏感。
JavaScript 会忽略多余的空格。

对代码行进行折行

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

但不能，

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

单行注释

// 输出标题：
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// 输出段落：
document.getElementById("myP").innerHTML="This is my first paragraph.";

JavaScript 多行注释

/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";

变量

var x=2;
var y=3;
var z=x+y;

名称：变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

JavaScript 数据类型

var pi=3.14;
var name="Bill Gates";
var answer='Yes I am!';

声明:

var carname; //后赋值

例子：

<p id="demo"></p>
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;

JavaScript 数据类型：字符串、数字、布尔、数组、对象、Null、Undefined

JavaScript 拥有动态类型

var x                // x 为 undefined
var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

JavaScript 字符串

var carname="Bill Gates";
var carname='Bill Gates';
var answer="Nice to meet you!";
var answer="He is called 'Bill'";
var answer='He is called "Bill"';

JavaScript 数字

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写
var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

JavaScript 布尔

var x=true
var y=false

JavaScript 数组

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
或，
var cars=new Array("Audi","BMW","Volvo");
或，
var cars=["Audi","BMW","Volvo"];

JavaScript 对象

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

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

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

Undefined 和 Null

cars=null;
person=null;

声明变量类型

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

属性和方法
属性是与对象相关的值。

方法是能够在对象上执行的动作。

举例：汽车就是现实生活中的对象。

汽车的属性：

car.name=Fiat

car.model=500

car.weight=850kg

car.color=white 

car.start()

car.drive()

car.brake()

JavaScript 中的对象

字符串对象：

var txt = "Hello";
txt.length=5
txt.indexOf()

txt.replace()

txt.search()

创建person：

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

函数

运算符

条件语句

if:

if (time<20)
  {
  x="Good day";
  }

switch :

var day=new Date().getDay();
switch (day)
{
case 0:
  x="Today it's Sunday";
  break;
case 1:
  x="Today it's Monday";
  break;
case 2:
  x="Today it's Tuesday";
  break;
case 3:
  x="Today it's Wednesday";
  break;
case 4:
  x="Today it's Thursday";
  break;
case 5:
  x="Today it's Friday";
  break;
case 6:
  x="Today it's Saturday";
  break;
default:
  x="Looking forward to the Weekend";
}

for:

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

不同类型的循环

JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数

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

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

for/in - 循环遍历对象的属性

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

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

while - 当指定的条件为 true 时循环指定的代码块

while (i<5)
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }

do/while - 同样当指定的条件为 true 时循环指定的代码块

do
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }
while (i<5);

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

异常处理

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Error description: " + err.message + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()">
</body>

</html>

抛出异常

<script>
function myFunction()
{
try
  {
  var x=document.getElementById("demo").value;
  if(x=="")    throw "empty";
  if(isNaN(x)) throw "not a number";
  if(x>10)     throw "too high";
  if(x<5)      throw "too low";
  }
catch(err)
  {
  var y=document.getElementById("mess");
  y.innerHTML="Error: " + err + ".";
  }
}
</script>

<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证
被 JavaScript 验证的这些典型的表单数据有：

用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？

必填（或必选）项目

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false}
else {return true}
}
}

下面是连同 HTML 表单的代码：

<html>
<head>
<script type="text/javascript">

function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {alert(alerttxt);return false}
  else {return true}
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
    {email.focus();return false}
  }
}
</script>
</head>

<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

验证邮箱是否正确

<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
  {email.focus();return false}
}
}
</script>
</head>

<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

HTML DOM （文档对象模型）

HTML DOM 树 在这里插入图片描述
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

通过 id 查找 HTML 元素

var x=document.getElementById("intro");

通过标签名查找 HTML 元素

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

改变 HTML 输出流

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

改变 HTML 内容

document.getElementById(id).innerHTML=new HTML

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>

</body>
</html>

改变 HTML 样式

document.getElementById(id).style.property=new style

例子1：

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

例子2：

<h1 id="id1">My Heading 1</h1>

<button type="button" onclick="document.getElementById('id1').style.color='red'">
点击这里
</button>

DOM事件

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

例子1：

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html>

分配事件

<button onclick="displayDate()">点击这里</button>

onload 和 onunload 事件

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

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

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

<body onload="checkCookies()">

onchange 事件

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

onmouseover 和 onmouseout 事件

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

onmousedown、onmouseup 以及 onclick 事件

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

JavaScript HTML DOM 元素（节点）

创建新的 HTML 元素

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

删除HTML 元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

JavaScript 对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…

此外，JavaScript 允许自定义对象。

直接创建

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

或者

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;
}

创建对象实例

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

把方法添加到javaScript对象

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

this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}

JavaScript 数字

var pi=3.14;    // 使用小数点
var x=34;       // 不使用小数点

var y=123e5;    // 12300000
var z=123e-5;   // 0.00123

var y=0377;
var z=0xFF;

字符串对象

var txt="Hello world!"
document.write(txt.length)

var txt="Hello world!"
document.write(txt.toUpperCase())

Date对象
日期对象用于处理日期和时间

JavaScript Date（日期）对象实例
如何使用 Date() 方法获得当日的日期。

如这样

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}

function checkTime(i)
{
if (i<10) 
  {i="0" + i}
  return i
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

getTime()

getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

setFullYear()

如何使用 setFullYear() 设置具体的日期。

toUTCString()

如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。

getDay()

如何使用 getDay() 和数组来显示星期，而不仅仅是数字。
显示一个钟表
如何在网页上显示一个钟表。

日期

Date

//定义
var myDate=new Date() 

//操作
var myDate=new Date()
myDate.setFullYear(2008,7,9)

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

比较日期

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");
}

数组

定义/访问/修改

Boolean对象

var myBoolean=new Boolean()
//false
var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);

//true
var myBoolean=new Boolean(1);
var myBoolean=new Boolean(true);
var myBoolean=new Boolean("true");
var myBoolean=new Boolean("false");
var myBoolean=new Boolean("Bill Gates");

Math（算数）

Math 对象

Math（算数）对象的作用是：执行普通的算数任务。

Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。

算数值

JavaScript 提供 8 种可被 Math 对象访问的算数值：

常数
圆周率
2 的平方根
1/2 的平方根
2 的自然对数
10 的自然对数
以 2 为底的 e 的对数
以 10 为底的 e 的对数
这是在 Javascript 中使用这些值的方法：（与上面的算数值一一对应）
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

算数方法

round 方法：4舍五入
document.write(Math.round(4.7))

下面的例子使用了 Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数：

document.write(Math.random())
0.9370844220218102

返回一个0和10之间的随机数。

document.write(Math.floor(Math.random()*11)) 
3

JavaScript RegExp 对象

RegExp 对象用于规定在文本中检索的内容

什么是 RegExp？
RegExp 是正则表达式的缩写。

当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

简单的模式可以是一个单独的字符。

更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。

您可以规定字符串中的检索位置，以及要检索的字符类型，等等。

定义 RegExp

var patt1=new RegExp("e");

RegExp 对象的方法
RegExp 对象有 3 个方法：test()、exec() 以及 compile()。

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free")); 

true

exec()
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

var patt1=new RegExp("e");

document.write(patt1.exec("The best things in life are free"));

在使用 “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) 
eeeeeenull

compile()
compile() 方法用于改变 RegExp。

compile() 既可以改变检索模式，也可以添加或删除第二个参数。

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");

document.write(patt1.test("The best things in life are free"));

truefalse

JavaScript Window(浏览器对象模型)

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。

浏览器对象模型 (BOM)

浏览器对象模型（Browser Object Model）尚无正式标准。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是
BOM.

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

window.document.getElementById("header");

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

其他 Window 方法

一些其他方法：

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

JavaScript Window Screen

window.screen 对象包含有关用户屏幕的信息。

Window Screen

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

一些属性：

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

Window Screen 可用宽度/高度/URL

<script>

document.write("可用宽度：" + screen.availWidth);

</script>

<script>

document.write("可用宽度：" + screen.availWidth);

</script>

<script>

document.write(location.href);

</script>

窗口位置分配

location.assign() 方法加载新的文档。

<html>
<head>
<script>
function newDoc()
  {
  window.location.assign("http://www.w3school.com.cn")
  }
</script>
</head>
<body>

<input type="button" value="加载新文档" onclick="newDoc()">

</body>
</html>

JavaScript Window History

window.history 对象包含浏览器的历史。

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

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

一些方法：

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

Window History Back

后退按钮

<html>
<head>
<script>
function goBack()
  {
  window.history.back()
  }
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()">

</body>
</html>

向前的按钮

<html>
<head>
<script>
function goForward()
  {
  window.history.forward()
  }
</script>
</head>
<body>

<input type="button" value="Forward" onclick="goForward()">

</body>
</html>

JavaScript Window Navigator

window.navigator 对象包含有关访问者浏览器的信息。

<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>

消息框

警告框

alert("文本")

确认框

confirm("文本")

提示框

prompt("文本","默认值")

JavaScript 计时

setTimeout()
未来的某时执行代码
clearTimeout()
取消setTimeout()

<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}

function stopCount()
{
c=0;
setTimeout("document.getElementById('txt').value=0",0);
clearTimeout(t);
}
</script>
</head>

<body>

<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时！" onClick="stopCount()">
</form>

<p>请点击上面的“开始计时”按钮来启动计时器。输入框会一直进行计时，从 0 开始。点击“停止计时”按钮可以终止计时，并将计数重置为 0。</p>

</body>

</html>

setTimeout()

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

JavaScript Cookies

cookie 用来识别用户。

什么是cookie?

cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。
有关cookie的例子：

名字 cookie
当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 “Welcome John Doe!” 的欢迎词。而名字则是从 cookie 中取回的。
密码 cookie
当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。
日期 cookie
当访问者首次访问你的网站时，当前的日期可存储于 cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息：“Your last visit was on Tuesday August 11, 2005!”。日期也是从 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 名称、值及其过期日期存入 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)
    }
  }
}

html代码:

<html>
<head>
<script type="text/javascript">
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 ""
}

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())
}

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)
    }
  }
}
</script>
</head>

<body onLoad="checkCookie()">
</body>
</html>

JavaScript 框架（库）

JavaScript 高级程序设计（特别是对浏览器差异的复杂处理），通常很困难也很耗时。

为了应对这些调整，许多的 JavaScript (helper) 库应运而生。

这些 JavaScript 库常被称为 JavaScript 框架。

在本教程中，我们将了解到一些广受欢迎的 JavaScript 框架：

jQuery
Prototype
MooTools
所有这些框架都提供针对常见 JavaScript 任务的函数，包括动画、DOM 操作以及 Ajax 处理。

在本教程中，您将学习到如何开始使用它们，来使得 JavaScript 编程更容易、更安全且更有乐趣。

jQuery

为了引用某个库，请使用

引用 jQuery

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
</head>
<body>
</body>
</html>

JavaScript 方式：

function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;

jQuery 方式：

function myFunction()
{
$("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);

上面代码的最后一行，HTML DOM 文档对象被传递到 jQuery ：$(document)。

当您向 jQuery 传递 DOM 对象时，jQuery 会返回以 HTML DOM 对象包装的 jQuery 对象。

jQuery 函数会返回新的 jQuery 对象，其中的 ready() 是一个方法。

由于在 JavaScript 中函数就是变量，因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法。

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

例子

例子1:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
function myFunction()
{
$("#h01").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>

<body>
<h1 id="h01"></h1>
</body>
</html>

例子 2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
function myFunction()
{
$("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>

<body>
<h1 id="h01"></h1>
</body>
</html>

xiabe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

JavaScript使用CSS创建布局使用了许多技术和策略，理解box模型是每种策略的先决条件。掌握了框模型之后，您就可以学习如何操作web页面上的内容框了。Mozilla开发人员网络为CSS布局提供了很好的介绍。这篇简短的阅读涵盖了CSS布局背后的基本概念，并快速介绍了文本对齐、浮动和位置等属性。关于CSS布局的更广泛、更深入的指南可从W3C获得:CSS布局模型。本文档是专业开发人员的资源...
复制链接

扫一扫

专栏目录