JavaScript基础教程1
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在执行过以下语句后，变量 carname 的值将是 undefined： var carname;
实例1-13
var name = "[ 小明"; //合并字符串 name = name + " 20岁"; name = name + " 男生 ]"; alert (name);//[ 小明 20岁 男生
如需向变量赋值，请使用等号： carname="Volvo"; 不过，您也可以在声明变量时对其赋值： var carname="Volvo";
在下面的例子中，我们创建了名为 carname 的变量，并向其赋值 "Volvo"，然后把它 放入 id="demo" 的 HTML 段落中：
<p id="demo"></p> var carname="Volvo"; document.getElementById("demo").innerHTML=carname;
实例1-18
Biblioteka Baidu
常用的逻辑运算符：
下表显示了 js支持的所有逻辑运算符。假设变量 A 为布尔值 true，变量 B 为布尔值 false，则：
常用的逻辑运算符：
var a = true; var b = true; document.write("如果a = true,b = true <br>"); document.write("a&&b的值为"+(a&&b)+"<br>"); document.write("a||b的值为"+(a&&b)+"<p>"); a = true; b = false; document.write("如果a = true,b = false <br>"); document.write("a&&b的值为"+(a&&b)+"<br>"); document.write("a||b的值为"+(a&&b)+"<p>"); a = false; b = false; document.write("如果a = false,b = false <br>"); document.write("a&&b的值为"+(a&&b)+"<br>"); document.write("a||b的值为"+(a&&b)+"<p>"); 实例1-19
实例1-3
（2）在超链接中定义 语法： <a href="javascript:js脚本代码" >超链接</a> 示例： 效果：
实例1-4
2、一个简单的JavaScript的例子 （1）嵌入到HTML文件中
实例1-5
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。 请使用 "id" 属性来标识 HTML 元素： 通过指定的 id 来访问 HTML 元素，并改变其内容：
<script type=“text/javascript” src=“要导入的js文件.js”></script>
注意：不能这么写:
<script type="text/javascript" src="要导入的js文件.js" />
错误！必须有结束标签
实例1-2
知识扩充：除了上面两种最为常用的方式外，还可以在一下地方定义JavaScript 代码： （1）在HTML的元素事件属性中 比如，按钮的单击事件，代码： <input type="button" 示例： onclick="javascript:js脚本代码" />
X=6 Y=7 实例1-16
常用的关系运算符：
下表显示了 C# 支持的所有 关系运算符。假设变量 A 的 值为 10，变量 B 的值为 20， 则：
为bool类型的值，取值为 true 或者false
常用的关系运算符：
var a = 21; var b = 10; 为bool类型的值，其值为false if (a == b) { alert(“a 等于 b"); } else { alert (“a 不等于 b"); } if (a < b) { alert (“a 小于 b"); } else { alert (“a 不小于 b"); } if (a > b) { alert ("3 - a 大于 b"); } else { alert ("3 - a 不大于 b"); }
实例1-12
JavaScript 布尔 布尔（逻辑）只能有两个值：true 或 false。 var x=true; var y=false;
声明（创建） JavaScript 变量 在 JavaScript 中创建变量通常称为“声明”变量。
我们使用 var 关键词来声明变量：
var carname; 变量声明之后，该变量是空的（它没有值）。
实例1-13
一条语句，多个变量 您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：
var name="Gates", age=56, job="CEO"; 声明也可横跨多行： var name="Gates", age=56, job="CEO";
实例1-13
Value = undefined 在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。
实例1-12
JavaScript 数字 JavaScript 只有一种数字类型。数字可以带小数点，也可以不带： 实例 var x1=34.00; var x2=34; //使用小数点来写 //不使用小数点来写
极大或极小的数字可以通过科学（指数）计数法来书写： 实例 var y=123e5; var z=123e-5; // 12300000 // 0.00123
通过这一节课，可以使 听众对js脚本语言基本结 构和语法有一个概括性 的认识。
JavaScript是一种基于对象（内置了许多对象）和事件驱动并具有相对安全性的客户 端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网 页添加动态功能，比如响应用户的各种操作。
不同于服务器端脚本语言，例如PHP与ASP，JavaScript是客户端脚本语言，也 就是说JavaScript是在用户的浏览器上运行，不需要服务器的支持而可以独立运 行。 JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编 译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。解释语言的弱 点是安全性较差，而且在JavaScript中，如果一条运行不了，那么下面的语言也 无法运行，并且速度较慢。
示例
2mail n123 N123
是否有效
否 是 是
说明
不能以数字开头 字母开头，混合数字 大些字母N，所以和n123是不同 的标识符 下划线加字符和数字 int是关键字 $做前缀 含有非法字符
_n123 int $change room#
是 否 是 否
保留字是语言中定义具有特殊含义的标识符，保留字不能作为标识符使用。JavaScript语言中定义 了一些具有专门的意义和用途的保留字，这些保留字称为关键字，下面列出了JavaScript语言中的 关键字： break、delete、function、return、typeof、case、do、if、switch、var、catch、else、in、 this、void、continue、false、instanceof、throw、while、debugger、finally、new、true、 const、with、default、for、null和try。 还有一些保留字在未来JavaScript版本使用的，它们主要有： class、enum、export、extends、import和super。 上述保留字很多目前我们没有必要全部知道它的含义，但是要记住的是在JavaScript中关键字大小 写敏感的，因此class和Class是不同的，Class也当然不是JavaScript的保留字。
]
实例1-14
常用的算数运算符：
下表显示了 C# 支持的所有算术运算符。假设变量 A 的值为 10，变量 B 的值为 20，则：
自增和自减
x++和++x都是将x的值加1 var x = 5; ++x; alert(“x=" + x); var x = 5; x++; alert (“x=" + x); var x = 5; x=x+1; alert (“x=" + x);
（1）嵌入HTML文件中 一般放在<head></head>(事实上可以放在任何位置)中，格式： <script type="text/javascript"> //此处为JavaScript代码 </script>
实例1-1
（2） 定义专门的外部文件
将JavaScript代码写在一个独立的脚本文件（扩展名为.js)中，在页面中使用时直 接导入该脚本文件即可，导入的格式：
实例1-23
写到文档输出 下面的例子直接把 <p> 元素写到 HTML 文档输出中：
实例1-24
• 标识符是指标识某一个东西的一个名字符号 • 比如：变量名，类型名，参数名等等。
• • • • • • •
1.标识符中可以含有字母 、数字 、下划线_ 、$符号 2.标识符不能以数字开头 3.标识符不能是js中的关键字或保
当自增和自减参与运算时++x为先自增再参与运算，而x++为先参与运算再自增
var x = 5,y; y = 2+ ++x; alert("x=" + x); alert("y=" + y);
X=6 Y=8
var x = 5,y; y =2+ x ++; alert(“x=" + x); alert("y=" + y);
开发环境：
JavaScript是一种脚本语言，代码不需要变异成二进制，而是以文本的形式存在，因 此任何文本编辑器都可以作为其开发环境，比如记事本（虽然很少人使用）、 EditPlus、Ultra Edit（UE）、Dreamweaver等。
运行环境：
JavaScript依赖于浏览器，即浏览器是JavaScript的运行环境。当前主流浏览器都能 运行今后学习的JavaScript代码，若出现浏览器兼容问题，到时会请同学们注意。 不同的编辑器会对语法进行简单的错误识别，不同的浏览器也提供对 JavaScript程序的调试功能。
右表列出了 js中的 部分保留关键字 （Reserved Keywords）
下表列出了 js中的部分保留关键字（Reserved Keywords）
• • •
注释就是写在源代码中的描述信息，用来帮助开发人员阅读源代码的。 注释信息会在编译过程中自动过滤掉，不会出现在程序集中。 JS支持的注释格式：
1）单行注释。格式：// Comments 2）多行注释。格式：/* Comments... */
单行注释 //注释内容
多行注释 /*注释内容*/
•
变量（ variable ），言外之意即是可变的，用来存储程序所需的数 据。 声明一个变量的语法： 我的名字叫“翠花” var <variable_name> ；//变量名须为有效标识符 今年16岁 如： string name; int age;
声明并初始化一个变量： var <variable_name> = value; 如： var name=“翠花”; var age=16;
实例1-11
JavaScript 变量还能保存其他数据类型，比如文本值 (name="Bill Gates")。 在 JavaScript 中，类似 "Bill Gates" 这样一条文本被称为字符串。 JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。 当您向变量分配文本值时，应该用双引号或单引号包围这个值。 当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。
/* 改变 a 和 b 的值 */
a = 5; b = 20; if (a <= b) { alert ("4 - a 小于或等于 b"); } if (b >= a) { alert ("5 - b 大于或等于 a"); } 实例1-17
==和===区别（！=和！==区别相同） ==：先进行类型转换，再比较类型和值。（值相等，类型不同，则为true） ===：不进行类型转换，比较类型和值。（值相等，类型相同，才为true）
实例1-13
var name = "[ 小明"; //合并字符串 name = name + " 20岁"; name = name + " 男生 ]"; alert (name);//[ 小明 20岁 男生
如需向变量赋值，请使用等号： carname="Volvo"; 不过，您也可以在声明变量时对其赋值： var carname="Volvo";
在下面的例子中，我们创建了名为 carname 的变量，并向其赋值 "Volvo"，然后把它 放入 id="demo" 的 HTML 段落中：
<p id="demo"></p> var carname="Volvo"; document.getElementById("demo").innerHTML=carname;
实例1-18
Biblioteka Baidu
常用的逻辑运算符：
下表显示了 js支持的所有逻辑运算符。假设变量 A 为布尔值 true，变量 B 为布尔值 false，则：
常用的逻辑运算符：
var a = true; var b = true; document.write("如果a = true,b = true <br>"); document.write("a&&b的值为"+(a&&b)+"<br>"); document.write("a||b的值为"+(a&&b)+"<p>"); a = true; b = false; document.write("如果a = true,b = false <br>"); document.write("a&&b的值为"+(a&&b)+"<br>"); document.write("a||b的值为"+(a&&b)+"<p>"); a = false; b = false; document.write("如果a = false,b = false <br>"); document.write("a&&b的值为"+(a&&b)+"<br>"); document.write("a||b的值为"+(a&&b)+"<p>"); 实例1-19
实例1-3
（2）在超链接中定义 语法： <a href="javascript:js脚本代码" >超链接</a> 示例： 效果：
实例1-4
2、一个简单的JavaScript的例子 （1）嵌入到HTML文件中
实例1-5
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。 请使用 "id" 属性来标识 HTML 元素： 通过指定的 id 来访问 HTML 元素，并改变其内容：
<script type=“text/javascript” src=“要导入的js文件.js”></script>
注意：不能这么写:
<script type="text/javascript" src="要导入的js文件.js" />
错误！必须有结束标签
实例1-2
知识扩充：除了上面两种最为常用的方式外，还可以在一下地方定义JavaScript 代码： （1）在HTML的元素事件属性中 比如，按钮的单击事件，代码： <input type="button" 示例： onclick="javascript:js脚本代码" />
X=6 Y=7 实例1-16
常用的关系运算符：
下表显示了 C# 支持的所有 关系运算符。假设变量 A 的 值为 10，变量 B 的值为 20， 则：
为bool类型的值，取值为 true 或者false
常用的关系运算符：
var a = 21; var b = 10; 为bool类型的值，其值为false if (a == b) { alert(“a 等于 b"); } else { alert (“a 不等于 b"); } if (a < b) { alert (“a 小于 b"); } else { alert (“a 不小于 b"); } if (a > b) { alert ("3 - a 大于 b"); } else { alert ("3 - a 不大于 b"); }
实例1-12
JavaScript 布尔 布尔（逻辑）只能有两个值：true 或 false。 var x=true; var y=false;
声明（创建） JavaScript 变量 在 JavaScript 中创建变量通常称为“声明”变量。
我们使用 var 关键词来声明变量：
var carname; 变量声明之后，该变量是空的（它没有值）。
实例1-13
一条语句，多个变量 您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：
var name="Gates", age=56, job="CEO"; 声明也可横跨多行： var name="Gates", age=56, job="CEO";
实例1-13
Value = undefined 在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。
实例1-12
JavaScript 数字 JavaScript 只有一种数字类型。数字可以带小数点，也可以不带： 实例 var x1=34.00; var x2=34; //使用小数点来写 //不使用小数点来写
极大或极小的数字可以通过科学（指数）计数法来书写： 实例 var y=123e5; var z=123e-5; // 12300000 // 0.00123
通过这一节课，可以使 听众对js脚本语言基本结 构和语法有一个概括性 的认识。
JavaScript是一种基于对象（内置了许多对象）和事件驱动并具有相对安全性的客户 端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网 页添加动态功能，比如响应用户的各种操作。
不同于服务器端脚本语言，例如PHP与ASP，JavaScript是客户端脚本语言，也 就是说JavaScript是在用户的浏览器上运行，不需要服务器的支持而可以独立运 行。 JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编 译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。解释语言的弱 点是安全性较差，而且在JavaScript中，如果一条运行不了，那么下面的语言也 无法运行，并且速度较慢。
示例
2mail n123 N123
是否有效
否 是 是
说明
不能以数字开头 字母开头，混合数字 大些字母N，所以和n123是不同 的标识符 下划线加字符和数字 int是关键字 $做前缀 含有非法字符
_n123 int $change room#
是 否 是 否
保留字是语言中定义具有特殊含义的标识符，保留字不能作为标识符使用。JavaScript语言中定义 了一些具有专门的意义和用途的保留字，这些保留字称为关键字，下面列出了JavaScript语言中的 关键字： break、delete、function、return、typeof、case、do、if、switch、var、catch、else、in、 this、void、continue、false、instanceof、throw、while、debugger、finally、new、true、 const、with、default、for、null和try。 还有一些保留字在未来JavaScript版本使用的，它们主要有： class、enum、export、extends、import和super。 上述保留字很多目前我们没有必要全部知道它的含义，但是要记住的是在JavaScript中关键字大小 写敏感的，因此class和Class是不同的，Class也当然不是JavaScript的保留字。
]
实例1-14
常用的算数运算符：
下表显示了 C# 支持的所有算术运算符。假设变量 A 的值为 10，变量 B 的值为 20，则：
自增和自减
x++和++x都是将x的值加1 var x = 5; ++x; alert(“x=" + x); var x = 5; x++; alert (“x=" + x); var x = 5; x=x+1; alert (“x=" + x);
（1）嵌入HTML文件中 一般放在<head></head>(事实上可以放在任何位置)中，格式： <script type="text/javascript"> //此处为JavaScript代码 </script>
实例1-1
（2） 定义专门的外部文件
将JavaScript代码写在一个独立的脚本文件（扩展名为.js)中，在页面中使用时直 接导入该脚本文件即可，导入的格式：
实例1-23
写到文档输出 下面的例子直接把 <p> 元素写到 HTML 文档输出中：
实例1-24
• 标识符是指标识某一个东西的一个名字符号 • 比如：变量名，类型名，参数名等等。
• • • • • • •
1.标识符中可以含有字母 、数字 、下划线_ 、$符号 2.标识符不能以数字开头 3.标识符不能是js中的关键字或保
当自增和自减参与运算时++x为先自增再参与运算，而x++为先参与运算再自增
var x = 5,y; y = 2+ ++x; alert("x=" + x); alert("y=" + y);
X=6 Y=8
var x = 5,y; y =2+ x ++; alert(“x=" + x); alert("y=" + y);
开发环境：
JavaScript是一种脚本语言，代码不需要变异成二进制，而是以文本的形式存在，因 此任何文本编辑器都可以作为其开发环境，比如记事本（虽然很少人使用）、 EditPlus、Ultra Edit（UE）、Dreamweaver等。
运行环境：
JavaScript依赖于浏览器，即浏览器是JavaScript的运行环境。当前主流浏览器都能 运行今后学习的JavaScript代码，若出现浏览器兼容问题，到时会请同学们注意。 不同的编辑器会对语法进行简单的错误识别，不同的浏览器也提供对 JavaScript程序的调试功能。
右表列出了 js中的 部分保留关键字 （Reserved Keywords）
下表列出了 js中的部分保留关键字（Reserved Keywords）
• • •
注释就是写在源代码中的描述信息，用来帮助开发人员阅读源代码的。 注释信息会在编译过程中自动过滤掉，不会出现在程序集中。 JS支持的注释格式：
1）单行注释。格式：// Comments 2）多行注释。格式：/* Comments... */
单行注释 //注释内容
多行注释 /*注释内容*/
•
变量（ variable ），言外之意即是可变的，用来存储程序所需的数 据。 声明一个变量的语法： 我的名字叫“翠花” var <variable_name> ；//变量名须为有效标识符 今年16岁 如： string name; int age;
声明并初始化一个变量： var <variable_name> = value; 如： var name=“翠花”; var age=16;
实例1-11
JavaScript 变量还能保存其他数据类型，比如文本值 (name="Bill Gates")。 在 JavaScript 中，类似 "Bill Gates" 这样一条文本被称为字符串。 JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。 当您向变量分配文本值时，应该用双引号或单引号包围这个值。 当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。
/* 改变 a 和 b 的值 */
a = 5; b = 20; if (a <= b) { alert ("4 - a 小于或等于 b"); } if (b >= a) { alert ("5 - b 大于或等于 a"); } 实例1-17
==和===区别（！=和！==区别相同） ==：先进行类型转换，再比较类型和值。（值相等，类型不同，则为true） ===：不进行类型转换，比较类型和值。（值相等，类型相同，才为true）