JavaScript学习笔记（二）- 基本语法

前面讲讲解了HTML和JavaScript结合的两种方式，这里我们给出两种方式的案例：

① 页面内脚本

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

<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="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来定义函数：

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

和Java中常见的方法的定义类似，函数的定义可以有参数和返回值。在JavaScript中，仅仅希望退出函数时，也可使用 return 语句。返回值是可选的：

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

五、变量作用域问题

a）局部变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
只要函数运行完毕，本地变量就会被删除。

b）全局变量
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日

JavaScript学习笔记（二）- 基本语法

猜你喜欢