再探JS-基础

JavaScript如今也算的上是如日中天,学好js还是很有必要的。

JS教程

认识JavaScript

JavaScript 是脚本语言。

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

JavaScript 很容易学习。

特别提示

JavaScript 与 Java 是两种完全不同的语言,无论在概念还是设计上。

Java(由 Sun 发明)是更复杂的编程语言。

ECMA-262 是 JavaScript 标准的官方名称。

JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中(该浏览器已停止更新),并于 1997 年被 ECMA(一个标准协会)采纳。

使用

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

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

JavaScript 文件的文件扩展名是 .js。

如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件。

外部脚本不能包含 <script> 标签。

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

JavaScript 输出

操作HTML元素

document.getElementById(id)

document.getElementById("demo").innerHTML="My First JavaScript";

写到文档输出

document.write("<p>My First JavaScript</p>");

警告使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。

JavaScript 语句

分号

分号用于分隔 JavaScript 语句。

通常我们在每条可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句。

在 JavaScript 中,用分号来结束语句是可选的。

JavaScript 对大小写敏感。

当编写 JavaScript 语句时,请留意是否关闭大小写切换键。

函数 getElementById 与 getElementbyID 是不同的。

同样,变量 myVariable 与 MyVariable 也是不同的。

对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行。

下面的例子会正确地显示:

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

不过,您不能像这样折行:

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

JavaScript 变量

变量以字母、$ 和 _ 符号开头(不推荐$_开头)。

变量名称对大小写敏感(y 和 Y 是不同的变量)。

声明(创建) JavaScript 变量

var 关键词来声明变量:var carname;

向变量赋值使用等号:carname="Volvo";

在声明变量时对其赋值:var carname="Volvo";

一条语句,多个变量

var name="Gates", age=56, job="CEO";

var name="Gates",
age=56,
job="CEO";

Value = undefined

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

在执行过以下语句后,变量 carname 的值将是 undefined:var carname;

重新声明 JavaScript 变量

如果重新声明 JavaScript 变量,该变量的值不会丢失:

在以下两条语句执行后,变量 carname 的值依然是 "Volvo":

var carname="Volvo";
var carname;

JavaScript 数据类型

JavaScript 拥有动态类型

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

JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写

极大或极小的数字可以通过科学(指数)计数法来书写:

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

JavaScript 布尔

布尔(逻辑)只能有两个值:true 或 false。

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

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

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

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

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

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

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

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;

JavaScript 对象

JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。
在 JavaScript 中,对象是拥有属性和方法的数据。

属性和方法

属性是与对象相关的值。

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

JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript 函数语法

function functionname()
{
这里是要执行的代码
}

调用带参数的函数

myFunction(argument1,argument2)

当您声明函数时,请把参数作为变量来声明:

function myFunction(var1,var2)
{
这里是要执行的代码
}

带有返回值的函数

function myFunction()
{
var x=5;
return x;
}

在您仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的:

function myFunction(a,b)
{
if (a>b)
  {
  return;
  }
x=a+b
}

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。
您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕,本地变量就会被删除。

全局 JavaScript 变量

在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量来分配值

如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。
这条语句:

carname="Volvo";

将声明一个全局变量 carname,即使它在函数内执行。

JavaScript 运算符

用于字符串的 + 运算符

+ 运算符用于把文本值或字符串变量加起来(连接起来)。

如果把数字与字符串相加,结果将成为字符串。

JavaScript 比较和逻辑运算符

=== 全等(值和类型)

Switch

switch(n)
{
case 1:
  执行代码块 1
  break;
case 2:
  执行代码块 2
  break;
default:
  n 与 case 1 和 case 2 不同时执行的代码
}

For

JavaScript for/in 语句循环遍历对象的属性:

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

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

While

do/while 循环

do/while 循环是 while 循环的变体。该循环会执行一次代码块,在检查条件是否为真之前,然后如果条件为真的话,就会重复这个循环。

do
  {
  需要执行的代码
  }
while (条件);

JavaScript Break 和 Continue 语句

break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。

JavaScript 错误 - Throw、Try 和 Catch

try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。

try
  {
  //在这里运行代码
  }
catch(err)
  {
  //在这里处理错误
  }

实例:

<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表单验证

必填(或必选)项目

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

E-mail 验证

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

JS HTML DOM

HTML DOM (文档对象模型):当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。

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

简介

查找 HTML 元素

  • 通过 id 找到 HTML 元素 var x=document.getElementById("intro");
  • 通过标签名找到 HTML 元素

查找 id="main" 的元素,然后查找 "main" 中的所有 <p> 元素:

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
  • 通过name找到 HTML 元素 getElementsByName()

DOM HTML

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

改变 HTML 输出流

document.write() 

可用于直接向 HTML 输出流写内容

示例:

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

绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

document.getElementById(id).innerHTML=new HTML

示例:

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

改变 HTML 属性

document.getElementById(id).attribute=new value

示例:

<script>
document.getElementById("image").src="landscape.jpg";
</script>

DOM CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

改变 HTML 样式

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

示例:

document.getElementById("p2").style.color="blue";

DOM 事件

onload 和 onunload 事件

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

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

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

示例:

<body onload="checkCookies()">

onchange 事件

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

onmouseover 和 onmouseout 事件

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

onmousedown、onmouseup 以及 onclick 事件

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

DOM 元素(节点)

创建新的 <p> 元素:

var para=document.createElement("p");

创建文本节点:

var node=document.createTextNode("这是新段落。");

<p> 元素追加这个文本节点:

para.appendChild(node);

从父元素中删除子元素:

parent.removeChild(child);

常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:

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

JavaScript对象

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...
此外,JavaScript 允许自定义对象。

JavaScript 提供多个内建对象,比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。

访问对象的属性

objectName.propertyName

示例:

var message="Hello World!";
var x=message.length;

访问对象的方法

objectName.methodName()

示例:

var message="Hello world!";
var x=message.toUpperCase();

Number 对象

JavaScript 数字

JavaScript 数字可以使用也可以不使用小数点来书写:

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

极大或极小的数字可通过科学(指数)计数法来写:

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

八进制和十六进制

如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 "x",则解释为十六进制数。

var y=0377;
var z=0xFF;

提示:绝不要在数字前面写零,除非您需要进行八进制转换。

JS Window

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

Window 对象

Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容