您的位置:首页 > Web前端 > JavaScript

JavaScript基础入门

2016-03-22 17:16 435 查看
在工作中,时不时的要设计去与web端的网页去进行一些交互,要想软件的功能更加强大,包括QT,Android,IOS的开发,无一列外的都会涉及到与JS的交互,所以想着手学习JavaScript,以后遇到问题,会多一些解决的思路,虽然之前在QT已经用过JS的交互,但具体的基础还是有些模糊。

JavaScript
JavaScript 使用

JavaScript 语句输出注释

JavaScript 变量数据类型对象函数运算符
变量

数据类型

JavaScript 函数

JavaScript运算符

JavaScript 条件语句和循环语句

JavaScript Break 和 Continue 语句

JavaScript 错误 - ThrowTry 和 Catch

JavaScript 表单验证

结束

JavaScript

JavaScript 是属于网络的脚本语言!

JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。

这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

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

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

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

JavaScript 很容易学习。

JavaScript 使用

JavaScript在网页中为位置一般分为俩种:

第一种:HTML 中的脚本必须位于
<script>
</script>
标签之间。脚本可被放置在 HTML 页面的
<body>
<head>
部分中。

第二种:外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

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

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

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


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

JavaScript 语句、输出、注释

JavaScript 语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

分号用于分隔 JavaScript 语句。

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

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

提示:您也可能看到不带有分号的案例。

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

JavaScript 代码块

JavaScript 语句通过代码块的形式进行组合。

块由左花括号开始,由右花括号结束。

块的作用是使语句序列一起执行。

JavaScript 函数是将语句组合在块中的典型例子。

JavaScript 代码

JavaScript 代码(或者只有 JavaScript)是 JavaScript 语句的序列。

浏览器会按照编写顺序来执行每条语句。

JavaScript 对大小写敏感。

JavaScript 对大小写是敏感的。

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

函数 getElementById 与 getElementbyID 是不同的。

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

空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性

对代码行进行折行

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

1.操作 HTML 元素

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

请使用 “id” 属性来标识 HTML 元素:

<!DOCTYPE html>
<html>
<body>
<p id="test">this is my demo</p>
<script>
document.getElementById("test").innerHTML="My First JavaScript";
</script>
</body>
</html>


2.写到文档输出

下面的例子直接把
元素写到 HTML 文档输出中:

<!DOCTYPE html>
<html>
<body>
<h1>this is my demo</h1>
<script>
document.write("<p>My First JavaScript</p>");
</script>
</body>
</html>


警告

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:

JavaScript 注释

JavaScript 不会执行注释。

我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。

单行注释以 // 开头,多行注释以 /* 开始,以 */ 结尾。

JavaScript 变量、数据类型、对象、函数、运算符

变量:

1.变量是存储信息的容器。

语法如下:

var num=1314;
var name="Little Zhang";
var answer='Yes';


2.变量必须以字母开头

变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)

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

3.声明(创建) JavaScript 变量

在 JavaScript 中创建变量通常称为“声明”变量。

我们使用 var 关键词来声明变量:

var name;

变量声明之后,该变量是空的(它没有值)。

如需向变量赋值,请使用等号:

name=”Little”;

不过,您也可以在声明变量时对其赋值:

var name=”Little”;

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

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

数据类型

JavaScript里面包含的数据类型为:字符串、数字、布尔、数组、对象、Null、Undefined

1.JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:

实例

var x                // x 为 undefined
var x = 1;           // x 为数字
var x = "Little";      // x 为字符串


2.JavaScript 字符串

字符串是存储字符(比如 “Little”)的变量。

字符串可以是引号中的任意文本。您可以使用单引号或双引号:

实例

var name="Little";
var name='Little';


您可以在字符串中使用引号,只要不匹配包围字符串的引号即可:

实例

var answer="Hello!";
var answer="He is called 'Little'";
var answer='He is called "Little"';


3.JavaScript 数字

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

实例

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


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

实例

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


4.JavaScript 布尔

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

var x=true
var y=false


5.JavaScript 数组

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

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


或者 (condensed array):

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


或者 (literal array):

实例

var cars=["Audi","BMW","Volvo"];


6.JavaScript 对象

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

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


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

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

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


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

实例

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


7.Undefined 和 Null

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

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

实例

cars=null;
person=null;


8.声明变量类型

当您声明新变量时,可以使用关键词 “new” 来声明其类型:

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


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

9.局部 JavaScript 变量

在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。

您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕,本地变量就会被删除。

全局 JavaScript 变量

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

JavaScript 变量的生存期

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

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

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

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

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

这条语句:

name=”Little”;

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

JavaScript 函数

JavaScript 函数语法

函数就是包裹在花括号中的代码块,前面使用了关键词 function:

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


当调用该函数时,会执行函数内的代码。

可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。

提示:JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。

调用带参数的函数

在调用函数时,您可以向其传递值,这些值被称为参数。

这些参数可以在函数中使用。

您可以发送任意多的参数,由逗号 (,) 分隔:

myFunction(argument1,argument2)
当您声明函数时,请把参数作为变量来声明:
function myFunction(var1,var2)
{
这里是要执行的代码
}


变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。

带有返回值的函数

有时,我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时,函数会停止执行,并返回指定的值。

语法

function myFunction()

{

var x=5;

return x;

}

上面的函数会返回值 5。

注释:整个 JavaScript 并不会停止执行,仅仅是函数。JavaScript 将继续执行代码,从调用函数的地方。

JavaScript运算符

运算符 = 用于赋值。

运算符 + 用于加值。

运算符 = 用于给 JavaScript 变量赋值。

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

JS中特有的运算符:

x=1

=== 全等(值和类型) x===1 为 true;x===”1” 为 false

JavaScript 条件语句和循环语句

1.条件语句用于基于不同的条件来执行不同的动作。

条件语句

通常在写代码时,您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

在 JavaScript 中,我们可使用以下条件语句:

if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码

if…else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码

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

switch 语句 - 使用该语句来选择多个代码块之一来执行

2.JavaScript 支持不同类型的循环:

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

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

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

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

需要特别说明下for/in语句

var person={fname:"Blue",lname:"Little",age:21};

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


JavaScript Break 和 Continue 语句

break 语句用于跳出循环。

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

Break 语句

我们已经在本教程稍早的章节中见到过 break 语句。它用于跳出 switch() 语句。

break 语句可用于跳出循环。

break 语句跳出循环后,会继续执行该循环之后的代码(如果有的话):

Continue 语句

continue 语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。

JavaScript 标签

正如您在 switch 语句那一章中看到的,可以对 JavaScript 语句进行标记。

如需标记 JavaScript 语句,请在语句之前加上冒号:

label:

语句

break 和 continue 语句仅仅是能够跳出代码块的语句。

语法

break labelname;

continue labelname;

continue 语句(带有或不带标签引用)只能用在循环中。

break 语句(不带标签引用),只能用在循环或 switch 中。

通过标签引用,break 语句可用于跳出任何 JavaScript 代码块:

实例

cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}


JavaScript 错误 - Throw、Try 和 Catch

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

1.JavaScript 测试和捕捉

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

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

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

语法

try

{

//在这里运行代码

}

catch(err)

{

//在这里处理错误

}

2.Throw 语句

throw 语句允许我们创建自定义错误。

正确的技术术语是:创建或抛出异常(exception)。

如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。

语法

throw exception

异常可以是 JavaScript 字符串、数字、逻辑值或对象。

实例

本例检测输入变量的值。如果值是错误的,会抛出一个异常(错误)。catch 会捕捉到这个错误,并显示一段自定义的错误消息:

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


请注意,如果 getElementById 函数出错,上面的例子也会抛出一个错误。

JavaScript 表单验证

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

JavaScript 表单验证

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

被 JavaScript 验证的这些典型的表单数据有:

用户是否已填写表单中的必填项目?

用户输入的邮件地址是否合法?

用户是否已输入合法的日期?

用户是否在数据域 (numeric field) 中输入了文本?

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:

下面是连同 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>


结束

以上的内容来自于http://www.w3school.com.cn/js/index.asp
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javascript