了解JavaScript

JavaScript 是一种可以用来给网页增加交互性的编程语言

在HTML 页面上,因为脚本文本包围在<script>标签中,所以它不会显示在用户的屏幕上,而Web 浏览器知道应该运行JavaScript程序。<script>标签常常放在HTML 页面的<head>部分。

JavaScript 是一种客户端语言。也就是说,设计它的目的是在用户的机器上而不是服务器上执行任务

 JavaScript 不允许写服务器机器上的文件。

 JavaScript 不能关闭不是由它自己打开的窗口

 JavaScript 不能从来自另一个服务器的已经打开的网页中读取信息

JavaScript 是一种面向对象(object-oriented)的语言,可以将对象、属性和方法组合在一起,从而更好地描述对象或过程.

在网页上,组成页面(或文档)的对象被组织在一个树型结构中.页面的顶级包含在<html>标签中,在其中会找到<head>和<body>标签,而其他标签包含在这两个标签中,用来表示文档中对象的标准模型就称为

DOM(Document Object Model,文档对象模型),

树中的每个对象也称为树的节点(node)。可以使用JavaScript 修改树的任何方面,包括添加、访问、修改和删除树上的节点。树上的每个对象是一个节点。如果节点包含HTML 标签,那么它就称为元素节点(element

node),否则,就称为文本节点(textnode),当然,元素节点可以包含文本节点。

事件(event)是用户在访问页面时执行的操作。JavaScript 使用称为事件处理程序(event handler)的命令来处理事件。用户在页面上的操作会触发脚本中的事件处理程序。

事件处理程序 :

onabort 用户终止了页面的加载
onblur 用户离开了对象
onchange 用户修改了对象
onclick 用户单击了对象
onerror 脚本遇到了一个错误
onfocus 用户激活了对象
onload 对象完成了加载
onmouseover 鼠标指针移动到对象上
onmouseout 鼠标指针离开了对象
onselect 用户选择了对象的内容
onsubmit 用户提交了表单
onunload 用户离开了页面

x++和++x 都是给x 加1,但是它们并不相同。前者在完成赋值之后再将x 加1,而后者将x 加1 之后再赋值

比较

x == y 如果x和y相等,那么返回true
x === y 如果x和y完全相同,那么返回true
x != y 如果x和y不等,那么返回true
x !== y 如果x和y不完全相同,那么返回true
x > y 如果x大于y,那么返回true
x >= y 如果x大于等于y,那么返回true
x < y 如果x小于y,那么返回true
x <= y 如果x小于等于y,那么返回true
x && y 如果x和y都是true,那么返回true
x || y 如果x或y之一是true,那么返回true
!x 如果x是false,那么返回true

CSS 是一种用于Web 的标准布局语言,可以控制版面、颜色以及元素和图像的大小和位置。HTML文档应该利用外部样式表来定义文档中使用的样式。JavaScript 也应该放在外部文档中,这个文档应
该只包含JavaScript 代码。按照这种方式进行分离,站点将包含以下3 种文本文件。
 HTML:包含页面的内容和结构。
 CSS:控制页面的外观和表现。
 JavaScript:控制页面的行为。

HTML 有两个用来标出范围的标签:<div>和<span>。<div>是一个块级(block-level)元素,也就是说,它与前后元素之间有物理换行。但<span>不是块级的,它是行内的(inline),所以可以将它应用于句子中的一

个短语。

class和id

类(class)标识出可能会多次使用的元素。

.movieTitle {
font: bold 14px;
color: #000099;
}
应该将页面上的每个电影标题包围在一个标签中,并指定这个标题类型的class 属性,如下所示:

<p>We're currently showing <span class="movieTitle">The Aviator</span> and <span class="movieTitle">
The Outlaw</span>.</p>

id 标识出的元素对于文档是唯一的。

#theaterName {
font: bold 28px;
color: #FF0000;
}
只需在标签中添加这个id 属性:
<h1 id="theaterName">The Raven Theater Presents:</h1>

在给定的页面上,一个id 只能出现一次。“1”是一个数字,而
井号(#)也称为数字符,所以这个符号用于id。

脚本可以放在HTML 页面上的两个位置:<head>和</head>标签之间(称为头脚本,header script),或者<body>和</body>标签之间(体脚本,body script),签以<script>开头,以</script>结束

函数由单词function 加上函数名组成。函数名后面是圆括号,再后面是左花括号。组成函数内容
的语句出现在后面的行上,然后用右花括号结束这个函数。函数的形式如下所示:
function saySomething() {
alert("Four score and seven years ago");
}

在script 标签中添加src 属性会使浏览器寻找引用的文件。

<script src="script02.js"></script>

alert("Welcome to my JavaScript page!");

警告对话框帮助你与用户进行通信

if (confirm("Are you sure you want to do that?")) {
confirm()方法有一个参数(向用户询问的问题),并根据用户的响应返回true 或false

prompt()方法用于显示一个带有提示信息,并且用户可以输入的对话框。prompt(text,defaultText);

基于链接对用户进行重定向

<a href="script04.html" id="redirect"> Welcome to our site... c'mon in!</a>

返回指定 ID 的元素:

document.getElementById("demo");
 

<!DOCTYPE html>
<html>
<head>
<title>Switch/Case handling</title>
<script src="script09.js"></script>
</head>
<body>
<h2>Famous Presidential Quotes</h2>
<form action="#">
<input type="button" id="Lincoln" value="Lincoln">
<input type="button" id="Kennedy" value="Kennedy">
<input type="button" id="Nixon" value="Nixon">
</form>
</body>
</html>

window.onload = initAll;
function initAll() {
document.getElementById("Lincoln").onclick = saySomething;
document.getElementById("Kennedy").onclick = saySomething;
document.getElementById("Nixon").onclick = saySomething;
}
function saySomething() {

switch(this.id) {
case "Lincoln":
alert("Four score and seven years ago...");
break;
case "Kennedy":
alert("Ask not what your country can do for you...");
break;
case "Nixon":
alert("I am not a crook!");
break;
default:
}
}

window.onload = initAll;
当加载页面时,调用initAll()函数。

何使用JavaScript 的try/throw/catch 命令产生友好、有用的错误消息。

var ans = prompt("Enter a number","");

try {
if (!ans || isNaN(ans) || ans<0) {
throw new Error("Not a valid number");
}
alert("The square root of " + ans + " is " + Math.sqrt(ans));
}
catch (errMsg) {
alert(errMsg.message);
}

table 在网页上显示表格数据
tr 在表格中开始一行
th 表格中列的标题单元格
td 包含表格中的每个单元格

innerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容

<div id="temp">内容</div>

 document.getElementById('temp').innerHTML 获取对象内容

document.getElementById('temp').innerHTML='new 内容'; 设置内容

方法是对要寻找的对象进行条件测试,如下所示:
if (document.getElementById) {

.......}

else 

{.....  }

JavaScript 支持不同类型的循环:

  • for - 循环代码块一定的次数
  • for/in - 循环遍历对象的属性
  • while - 当指定的条件为 true 时循环指定的代码块
  • do/while - 同样当指定的条件为 true 时循环指定的代码块,该循环至少会执行一次

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person){
txt=txt +" "+ person[x];
}

while (i<5)

{

x=x + "The number is " + i + "<br>";

i++;

}

do {

x=x + "The number is " + i + "<br>";

i++;

} while (i<5);

break 语句用于跳出循环。

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

 

为了产生动画的效果,需要确保替换图像立刻出现,而不能有从服务器获得图像所造成的延迟。为此,使用JavaScript 预先将所有图像加载到浏览器的缓存中(这样,当需要它们时,它们已经在用户的硬盘上了),并且将图像放进脚本使用的变量中。

 

原文地址:https://www.cnblogs.com/playforever/p/12510961.html