技术教程 编程教程 JavaScript脚本语言基础（一） 正文

JavaScript脚本语言基础（一）

2023-03-10,,

导读：

JavaScript代码嵌入HTML文档

JavaScript代码运行方式

第一个实例

JavaScript的三种对话框

定义JavaScript变量

JavaScript运算符和操作符

JavaScript是一种属于网页脚本语言,已经被广泛用于Web应用开发。可以使用JS添加、删除、修改网页上的所有元素及属性；在HTML网页中动态写入文本、数字和插入图表；响应网页中的事件，并做出相应处理。了解JS编程后，可以轻松调用各类网络统计学库函数和在网页上统计数据处理或分析。

JavaScript是一种解释性脚本语言（代码不进行预编译）；

主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为；


可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离；


跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行。

一、JavaScript嵌入HTML文档及运行方式

1、JavaScript代码嵌入HTML文档 [返回]

#Code 101：JavaScript代码嵌入HTML文档案例

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>银河网络统计学教程</title>

<style>

  网页内部样式CSS代码

</style>

<script language="JavaScript">

  //*JavaScript脚本代码*

 </script>

</head>

<body>

  文档体HTML代码

</body>

</html>

2、JavaScript代码运行方式 [返回]

(1) 网页打开时自动调用JS代码

#Code 102：网页打开时自动调用JS代码案例

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>银河网络统计学教程</title>

<style>

  网页内部样式CSS代码

</style>

<script language="JavaScript">

  //*JavaScript脚本代码*

  function init() {

  alert("加载网页时提示我!");

  }

 </script>

</head>

<body onload="init()">

  文档体HTML代码

</body>

</html>

运行代码

注：可复制代码到WINDOWS记事本，保存为HTML文档。例如，“jsTest1.html”。鼠标双击该文件观察效果。

浏览器解析完HTML文档体代码后，触发body标签的onload网页加载事件，从而运行JS函数init()。

(2) 用页面按钮或超链接触发JS代码

#Code No.103：用页面按钮或超链接触发JS代码案例

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>银河网络统计学教程</title>

<style>

  网页内部样式CSS代码

</style>

<script language="JavaScript">

  //*JavaScript脚本代码*

  function init() {

  alert("加载网页时提示我!");

  }

 </script>

</head>

<body>

  <button onclick="init()">运行JS函数init()</button>

  <p><i>用鼠标左键点击命令按钮JS函数。</i></p><br/>

  <a href="#" onclick="init()">运行JS函数init()</a>

  <p><i>由于href="#"没有指定连接文件，用鼠标左键点击超链接时onclick事件运行运行JS函数init()。</i></p><br/>

</body>

</html>

运行代码

二、JavaScript语法

**1、第一个实例，打开网页时，浏览器中显示"Hello World!"** [返回]

#Code 104：第一个网页“Hello World!”案例

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>银河网络统计学教程</title>

<style></style>

<script language="JavaScript">

  function init() {

  document.write("Hello World!");

  }

 </script>

</head>

<body onload="init()">

</body>

</html>

运行代码

注：JavaScript脚本代码中的标点符号都必须为半角英文字符。JavaScript脚本可以插入注释语句，注释语句增加代码可读性，不被浏览器解析执行。符号"//"为单行注释，符号"/.../"为多行行注释。

例如：

<script language="JavaScript">

  //这是单行注释

  /*

  这是多行注释；

  银河网络统计学教程。

  */

  }

**2、JavaScript的三种对话框** [返回]

（1）提醒对话框，不能对脚本产生任何改变，脚本样例：

alert("提醒对话框");

在网页中的运用参见#Code 102。

（2）确认对话框，返回true或者false，可以用于if...else...判断用户的选择，脚本样例：

confirm("你确信要学习网络统计学吗？")

confirm函数返回true或者false，网页设计中运用实例，

#Code 105：JavaScript确认对话框案例

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>银河网络统计学教程</title>

<style></style>

<script language="JavaScript">

  function init() {

  document.write("Hello World!");

  firm()；

  }

  function firm() {

  //利用对话框返回的值（true或者false）

  if(confirm("你确信要学习网络统计学吗？")) {

    alert("我确信要学习网络统计学！");

  } else {

    alert("我学习网络统计学有困难！");

    }

  }

 </script>

</head>

<body onload="init()">

</body>

</html>

运行代码

（3）输入对话框，可以返回用户填入的字符串或数值，脚本样例：

var name=prompt("请输入您的名字",""); //将输入的内容赋给变量name

注：脚本中符号“//”为注释符，可在“//”符号后面加入脚本解释。

prompt函数返回返回用户填入的字符串或数值，网页设计中运用实例，

#Code 106：JavaScript输入对话框案例

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>银河网络统计学教程</title>

<style></style>

<script language="JavaScript">

  function init() {

  document.write("Hello World!");

  prom()；

  }

function prom() {

var name=prompt("请输入您的名字","张三"); //将输入的内容赋给变量name

if(name) { //如果返回的有内容

  alert("欢迎您："+ name)

  }

}

 </script>

</head>

<body onload="init()">

</body>

</html>

注:prompt有两个参数，前面是提示的信息，后面是当对话框出来后，在对话框里的默认值。

运行代码

3、定义JavaScript变量 [返回]

JavaScript是弱类型语言，声明变量时用var关键字（注意var要全部小写）就可以了。而很多编程语言声明变量时，需要指明变量的类型，如：int, double, string, boolean, date, array, object等；而且变量类型一旦指定，就不能改变了。但在JavaScript中不同，只需用var，且数据类型可以改变。但要请注意变量的命名规：

变量名不能以数字开头(如123a);

变量名不能使用JavaScript关键字(如var);

变量名中只能有下划线、美元符、字母和数字。不能出现’/’这种特殊字符(如My/age)。

通常使用var关键字定义变量，如:

var total=346; //定义整数变量（int）

var value=45.7865 //定义浮点型变量（double）

var notNull=true; //定义逻辑型变量（boolean）

var name="张三", gender="男"; //用逗号分隔，同行定义两个字符型变量（string）

var i=j=0; //同时定义两个变量（int）

var hobby=["听音乐","看电影"]; //定义数组变量（array）

var d = new Date(); //定义日期时间变量（date）

该种方式可以定义全局变量也可以定义局部变量，这取决于定义变量的位置。在函数（function）体中使用 var关键字定义的变量为局部变量；在函数体外使用var关键字定义的变量为全局变量。不使用var关键字，而是直接通过赋值的方式定义变量，如“myValve=100;”，使用该方式定义的变量为全局变量，与位置无关。

注：全局变量定义在函数体外，网页中所有函数或脚本都可以引用；局部变量定义在函数体内，只有在该函数内可以调用。

HTML文档中JavaScript变量实例：

#Code 107：JavaScript变量使用案例

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>银河网络统计学教程</title>

<style></style>

<script language="JavaScript">

var myName = "银河统计学"; //myName是全局变量

function init() {

var total=346;

var value=45.7865;

var notNull=true;

var name="张三", gender="男";

var i=j=0;

var hobby=["听音乐","看电影"];

hobby[2]="打篮球"; //数组赋值

stdId = 2016;  //全局变量

var d = new Date(); //定义日期时间变量（date）

document.write("变量i="+i+"<br>");

document.write("变量j="+j+"<br>");

document.write("变量name="+name+"<br>");

document.write("变量gender="+gender+"<br>");

document.write("变量notNull="+notNull+"<br>");

document.write("变量hobby="+hobby+"<br>");

document.write("变量hobby[0]="+hobby[0]+"<br>");

document.write("变量hobby[1]="+hobby[1]+"<br>");

document.write("变量hobby[2]="+hobby[2]+"<br>");

document.write("变量hobby[3]="+hobby[3]+"<br>");

document.write("变量d="+d+"<br>");

document.write("变量d.getFullYear()="+d.getFullYear()+"<br>"); //参见JS日期对象

document.write("<p/><i>下面调用函数test()，输出该函数体内的全局和局部变量。<br/>全局可以输出，局部变量局部变量total无法输出。</i><p/>");

test();

}

function test() {

document.write("全局变量myName="+myName+"<br>");

document.write("全局变量stdId="+stdId+"<br>");

document.write("局部变量total="+total+"<br>");

}

</script>

</head>

<body onload="init()">

</body>

</html>

运行代码

4、JavaScript运算符和操作符 [返回]

常见JavaScript运算符和操作符
类别 操作符
算术操作符 +（加）、–（减）、*（乘）、/（除）、%（取模）
字符串操作符 +（字符串连接）、+=（字符串连接复合）
布尔操作符 ！（非、not）、&&（且、and）、||（或、or）
一元操作符 ++（累加）、--（累减）、+（一元加）、-（一元减）
关系比较操作符 （大于）、>=（大于等于）、!=（不等于）、==（等于） 、===（类型相同） 、!==（类型不同）
按位操作符 ~（按位非）、&（按位与）、|（按位或）、^（按位异或）、>（有符号右移）、>>>（无符号右移）
赋值操作符 复合赋值（+=、-=、*=、%=）、复合按位赋值（~=、&=、|=、^=、>=、>>>=)

JavaScript操作符比较复杂，下面介绍JS运算符和常用操作符。

（1）算数操作符

除了加号（+）之外，如果操作数不是Number类型，会自动先调用Number()将其转换为Number类型再进行计算；
除号（/）和取模（%）并不会区分整数和浮点数，都会自动转化为浮点数。

（2）字符串操作符

字符串连接符号（+）相当于concat()函数，会将操作数据转化为字符串再连接。在字符串和数值型进行+号运算时，会将数值型转为字符串。

（3）布尔操作符

布尔逻辑操作符！（非、not）、&&（与、and）、||（或、or）常和if等条件函数一起判断一个变量或属性是否有定义，例如:

&&（与、and）：

—————————————

if(object && object.name && object.name = "张三"){

  //这里会首先判断object存在，不存在的话就不会解析object.name从而阻止错误的发生，同样，也只有object.name存在，才会去比较这个值。或者说只有对象object和对象object的name属性都存在，并且对象object的name属性值为张三这三个条件都满足才运行if条件体(花括弧{}内）的代码。

}

||（或、or）：

————————————

if(object.age || object.name){

  //如果object.age和object.name只要有一个存在或同时存在（不要求同时存在），则运行if条件体(花括弧{}内）的代码。

}

！（非、not）：

————————————

if(！object){

  //如果object不存在，则运行if条件体(花括弧{}内）的代码。

}

更多JavaScript运算符和操作符使用参见下面HTML文档：

#Code 108：JavaScript运算符和操作符案例

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>银河网络统计学教程</title>

<style></style>

<script language="JavaScript">

document.write("<p><b>//算术操作符</b></p>");

var x = 11;

var y = 5;

with (document) { //注意with关键字用法，其用于简化代码

    write("x = 11, y = 5");

    write("<br/>x + y 是 ", x + y);

    write("<br/>x - y 是 ", x - y);

    write("<br/>x * y 是 ", x * y);

    write("<br/>x / y 是 ", x / y);

    write("<br/>x % y 是 ", x % y);

    write("<br/>++ x 是 ", ++ x);

    write("<br/>-- y 是 ", -- y);

    write("<br/>x 是 ", x);

    write("<br/>y 是 ", y);

    write("<br/>x-- 是 ", x--);

    write("<br/>y-- 是 ", y--);

}  

document.write("<p><b>//++运算练习</b></p>");

var x = y = 3;

with (document) {

    write("y++=",(y++),"<br/>");

    write("++y=",(++y),"<br/>");

    write("x = 3, y = 5 <br/>");

    write("若x = y++ 运算之后：");

    x = y++;//y→x，y+1→y

    write("x 是 ", x, "; y 是 ", y, "<br/>");

    write("再作x = ++y 运算：");

    x = ++y;//y+1→x，y+1→y

    write("x 是 ", x, "; y 是 ", y);

}

document.write("<p><b>//++运算练习</b></p>");

var t = true;

var f = false;

with(document) {

    write("true && true 的结果是 ", t && t);

    write("<br/>true && false 的结果是 ", t && f);

    write("<br/>false && true 的结果是 ", f && t);

    write("<br/>false && false 的结果是 ", f && f);

    write("<br/>true && (1==1) 的结果是 ", t && (1==1));

    write("<br/>false && 'A' 的结果是 ", f && 'A');

    write("<br/>'A' && false 的结果是 ", 'A' && f);

    write("<br/>true && 'A' 的结果是 ", t && 'A');

    write("<br/>'A' && true 的结果是 ", 'A' && t);

    write("<br/>'A' && 'B' 的结果是 ", 'A' && 'B');

    write("<br/>1 && 1 的结果是 ", 1 && 1);

    write("<br/>1 && 0 的结果是 ", 1 && 0);

    write("<br/>true && 0 的结果是 ", true && 0);

    write("<br/>true && 1 的结果是 ", true && 1);

    write("<br/>true && '0' 的结果是 ", true && '0');

}  

document.write('<p><b>//逻辑运算符"||"</b></p>');

var t = true;

var f = false;

with(document) {

    write("true || true 的结果是 ", t || t);

    write("<br/>true || false 的结果是 ", t || f);

    write("<br/>false || true 的结果是 ", f || t);

    write("<br/>false || false 的结果是 ", f || f);

    write("<br/>true || (1==1) 的结果是 ", t || (1==1));

    write("<br/>false || 'A' 的结果是 ", f || 'A');

    write("<br/>'A' || false 的结果是 ", 'A' || f);

    write("<br/>true || 'A' 的结果是 ", t || 'A');

    write("<br/>'A' || true 的结果是 ", 'A' || t);

    write("<br/>'A' || 'B' 的结果是 ", 'A' || 'B');

    write("<br/>1 || 1 的结果是 ", 1 || 1);

    write("<br/>1 || 0 的结果是 ", 1 || 0);

    write("<br/>true || 0 的结果是 ", true || 0);

    write("<br/>true || 1 的结果是 ", true || 1);

    write("<br/>true || '0' 的结果是 ", true || '0');

}  

document.write('<p><b>////辑运算符"!"</b></p>');

with(document) {

    write("!true 的结果是 ", !true);

    write("<br/>!false 的结果是 ", !false);

    write("<br/>!'A' 的结果是 ", !'A');

    write("<br/>!0 的结果是 ", !0);

    write("<br/>!1 的结果是 ", !1);

    write("<br/>!2 的结果是 ", !2);

    write("<br/>!'0' 的结果是 ", !'0');

    write("<br/>!'1' 的结果是 ", !'1');

    write("<br/>!-1 的结果是 ", !-1);

}  

</script>

</head>

<body>

</body>

</html>

运行代码

三、JavaScript语法练习

JavaScript语法练习参见本站提供的银河统计JavaScript脚本测试工具和W3School JavaScript在线教程。

JavaScript脚本语言基础（一）的相关教程结束。

《JavaScript脚本语言基础（一）.doc》

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!