前面讲讲解了HTML和JavaScript结合的两种方式,这里我们给出两种方式的案例:
① 页面内脚本
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" οnclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
由于HTML文件的加载是顺序加载,所以这里需要将JavaScript脚本放在元素标签的后面,才能通过脚本获取到代表元素的控件对象。
② 引用外部JavaScript文件
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" οnclick="myFunction()">Try it</button>
<script src="style.css"></script>
</body>
将下面的JavaScript脚本写入新建的style.css文件中
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
效果和上面的一样。
一、内容输出
分为两种情况:
① 操作HTML元素内容的输出
前提是HTML文档中存在包含需要得到控件的id。
document.getElementById("demo").innerHTML="我的第一段 JavaScript";
② 直接写到文档内容的输出
document.write("<p>我的第一段 JavaScript</p>");
提示:注意,document.write是向文档输出写内容,如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。
二、JavaScript拥有的数据类型(五种基本数据类型)
字符串、数字、布尔、数组、对象、Null、Undefined
变量的声明均用var关键字来声明,而且JavaScript拥有动态类型,如:
var x // x 为 undefined
var x = 6; // x 为数字
var x = "Bill"; // x 为字符串
上面也意味着相同的变量可用作不同的类型。
a)字符串
字符串可以是引号中的任意文本。您可以使用单引号或双引号
var carname="Bill Gates";
var carname='Bill Gates';
b)数字
JavaScript 只有一种数字类型。数字可以带小数点,也可以不带
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
极大或极小的数字可以通过科学(指数)计数法来书写:
var y=123e5; // 12300000
var z=123e-5; // 0.00123
c)布尔
var x=true
var y=false
d)数组
有三种方式创建数组:
var cars=["Audi","BMW","Volvo"];
var cars=new Array("Audi","BMW","Volvo");
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
e)对象
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (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"];
f)Undefined和Null
Undefined 这个值表示变量不含有值,也即是声明变量后未赋值情况。
可以通过将变量的值设置为 null 来清空变量。
三、对象
学习过Java的都知道面相对象的概念和设计思想,同样的JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。在 JavaScript 中,对象是拥有属性和方法的数据。
当您像这样声明一个 JavaScript 变量时:
var txt = "Hello";
这里实际上创建了一个 JavaScript 字符串对象。字符串对象拥有内建的属性 length。对于上面的字符串来说,length 的值是 5。字符串对象同时拥有若干个内建的方法。如:txt.length
自定义对象:
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
四、函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
function functionname()
{
这里是要执行的代码
}
和Java中常见的方法的定义类似,函数的定义可以有参数和返回值。在JavaScript中,仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的:
function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}
五、变量作用域问题
a)局部变量
在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。
只要函数运行完毕,本地变量就会被删除。
1)在 函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
2)如果您把 值赋给尚未声明的变量,该变量将被自动作为全局变量声明。
c)变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
> 局部变量会在函数运行以后被删除。
> 全局变量会在页面关闭后被删除。
六、运算符
在JavaScript中的运算符和其他编程语言中的运算符大同小异。这里需要注意的是:
== 等于(比较值)
=== 全等(比较值和类型)
支持if-else/if-else if-else/switch-case/for/for-in/while/do-while,在循环中也支持使用break和continue
七、错误处理
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错误:
可能是语法错误,通常是程序员造成的编码错误或错别字。
可能是拼写错误或语言中缺少的功能(可能由于浏览器差异)。
可能是由于来自服务器或用户的错误输出而导致的错误。
当然,也可能是由于许多其他不可预知的因素。
当错误发生时,当事情出问题时,JavaScript 引擎通常会停止,并生成一个错误消息。
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}
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 + ".";
}
}
抛出的异常可以是 JavaScript 字符串、数字、逻辑值或对象。
-------------------------------------------------------------------------------------------------------------------------
免责声明:以上内容来自互联网。
-------------2018年6月19日