JavaScript 语言基础

作者: 阿凡提说AI | 来源:发表于2017-02-28 16:38 被阅读63次

目前,我们一旦谈论到网页编程,就离不开 HTML、CSS 与 JavaScript 这 3 种技术。由 HTML 负责描述页面数据和信息,CSS 负责控制外观,JavaScript 则用于响应用户的操作,为网页添加动态的功能,我们也常称之为动态网页编程,即 DHTML。
JavaScript 的引入
JavaScript 可以通过<script>标记嵌入在 HTML 页面中,也可以保存为扩展名为.js 的文件后通过<script>标记引入到网页中,如下例所示:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//JavaScript 代码 </script>
<!--src 属性为 JS 文件的位置 -->
<script type="text/javascript" src="js文件"></script> 
</head>
<body>
</body>
</html>

JavaScript 中的变量

1.变量的定义
虽然 JavaScript 支持变量未经定义直接使用,但推荐进行变量定义,否则变量的生命周期难以确定。
在定义变量时,因为 JavaScript 为弱类型语言,所以不需要指定变量类型,只需要指定变量名称即可,也可以为变量赋初始值。定义变量时可以使用 var 关键字。
注意:因为JavaScript代码总是在同一网页内有效,并不能跨网页运行,所以也不需要定义类似于Java语言中的访问修饰符(public、private等)。
JavaScript 变量的命名规则与 Java 相似,只能包含数字、字母、下画线和$符号,大小写敏感,不可以使用 JavaScript 的关键字和保留字。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
     var a; //定义变量
     var b = 3; //定义变量并赋初始值
     var c = 'String', d = "String";//定义多个变量
</script>
</head>
<body>
</body>
</html>

2.变量的类型
虽然不能在定义变量时指定变量类型,但是 JavaScript 会根据变量的值自动决定类型, JavaScript 中常见的内置变量类型如下。

数字型:可以存储小数或整数。
* 布尔型:可以存储 true 或 false。
* 字符串:属于引用类型,可以存储字符串。
* 数组:属于引用类型,存储多项数据。

如果要将字符串转换为数字类型,可以使用 parseInt 或 parseFloat 方法,如果无法转换
为数字,则 JavaScript 会返回特殊值“NaN(Not a Number)”,如下所示:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var a = 3;
var b = "3";
var c = a + b;                         //结果是33
    var d = a + parseInt(b);    //结果是6
    var e = a + (b - 0);            //结果是6 
    var f = parseInt('a');         //结果是NaN
</script>
</head>
<body>
</body>
</html>

3.注释与特殊符号
JavaScript 语言中的注释与 Java 语言中的注释规则相同,支持单行注释(//)与多行注释(/.../),注意不能在 JavaScript 内部使用 HTML 语言中的“”注释。在 JavaScript 中字符串可以使用双引号或单引号引起来,在不引起冲突的情况下可以混用,也可以使用反斜杠进行转义,如下例所示:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript"> 
      //a的值为It's mine.
      var a = "It's mine.";
      //b的值为he say : "good".
      var b = 'he say : "good".'; 
      //c的值he say : "It's good".
      var c = 'he say : "It\'s good".';
</script>
</head>
<body>
</body>
</html>

4.运算符
运算符与表达式基本与 Java 相同,常用的运算符如表 7-1 所示(优先级自上而下)。

屏幕快照 2017-02-28 下午3.38.56.png

JavaScript 中的流程控制语句

JavaScript 语言中的流程控制语句与 Java 语言中几乎完全一致,分支流程可以使用 if-else 结构或 switch 结构,循环流程可以使用 for 或 while 循环,具体语法如下。
1.if 语句的语法结构
if 语句的语法结构如下:

if (条件表达式A) {
    //条件表达式 A 为 true,所执行的代码块
 } else if(条件表达式)B {
    //条件表达式 B 为 true,所执行的代码块
} else {
    // 条件表达式 A 和条件表达式 B 都为 false,所执行的代码块 
}

2.switch 语句的语法结构
switch 语句的语法结构如下:

switch (表达式) { 
    case值1 :
         //表达式与值 1 匹配时,所执行的代码块 
          break;
case值2 :
        //表达式与值 2 匹配时,所执行的代码块
        break;
  default :
         //所有 case 值都与表达式不匹配时,所执行的代码块 
}

3.for 语句的语法结构
for 语句的语法结构如下:

for (初始化语句; 循环判断条件; 循环执行语句) {
        //循环体
 }

4.while 语句的语法结构
while 语句的语法结构如下:

 while (循环判断条件) { 
    //循环体
}

5.do...while 语句的语法结构
do...while 语句的语法结构如下:

do {
    //循环体
} while (循环判断条件);

6.综合演示
下例综合使用各种流程结构通过 JavaScript 动态在页面中生成一个隔行换色的 HTML表格,其中用到了 document.write()方法,该方法用于向 HTML 页面中输出内容。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//rows 为表格的行数,cols 为表格的列数
var rows = 6;
var cols = 8;
document.write('<table width="100%" border="1">'); document.write('<caption>动态生成表格</caption>'); document.write('<tbody>');
    for (var row = 0; row < rows; row++) {
        if (row % 2 == 0) {
            document.write('<tr bgcolor="#cccccc">');
        } else {
            document.write('<tr>');
        }
        for (var col = 0; col < cols; col++) {
            document.write('<td>' + col + '</td>');
        }
        document.write('</tr>');
    }
    document.write('</tbody>');
    document.write('</table>');
</script>
</head>
<body>
</body>
</html>

请注意,本例 document.write()方法是动态地生成 HTML 代码并输出到页面中,并没有改变 HTML 源文件,只改变了浏览器内存中的 DOM(DOM 即文档对象模型,详细内容请参看第 10 章)结构。故如果通过浏览器的“查看源代码”功能查看该页面代码并不会看到输出的表格代码,但如果通过浏览器的 DOM 查看器则可以看到生成的结果.

JavaScript 中的方法

1.JavaScript 中的常用方法
JavaScript 中提供了很多常用的方法,如上例中用到的 document.write 方法,现介绍 3个用于与用户交互的方法.

屏幕快照 2017-02-28 下午4.16.53.png

请注意这 3 个方法显示的对话框都是模态对话框,即会停止当前脚本的运行直到用户关闭对话框为止,下面的例子综合使用了这 3 个方法

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
    alert("现在演示 alert、confirm 与 prompt 方法");
    var name = prompt("请输入您的姓名", "匿名"); 
    var flag = confirm("请确认您的姓名:" + name);
     if (flag) {
        alert('确认无误!'); 
    } else {
        alert('确认失败');
    }
</script>
</head>
<body>
</body>
</html>

2.自定义方法
JavaScript 语言中的自定义方法与 Java 语言有较大的不同。
第一 ,JavaScript 中没有方法修饰符,所有方法都是本页面内可以访问;
第二 ,由于 JavaScript 是弱类型语言,所以不需要声明方法的返回值类型;
第三 ,JavaScript 中的方法不支持重载,但是支持类似于 Java 中变长参数的特性。
定义一个方法的语法如下:

function 方法名 ( 参数1, 参数2, ... ) {
 //函数体
return 返回值;
}

下例演示了通过定义方法计算两个数的和:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
    function add(a, b) {
        //如果不通过 parseInt 方法转换为数字,会进行字符串的连接 
        var c = parseInt(a) + parseInt(b);
        return c;
    }
    var a = prompt("请输入第一个数", 0);
    var b = prompt("请输入第二个数", 0);
      //请注意变量的作用范围
    var c = add(a, b);
    alert("计算结果是:" + c);
</script>
</head>
<body>
</body>
</html>

如果想计算不确定数目的若干个数字的和,就可以使用 JavaScript 中的一个特殊数组, 名为 arguments,这个数组用来保存调用方法时传递的所有参数,如下例所示:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
    function add() {
        //获取 arguments 数组的长度
        var length = arguments.length;
        var c = 0;
        for (var i = 0; i < length; i++) {
            c += parseInt(arguments[i]);
         }
        return c;
        }
       document.write("<p>无参数 = " + add());
       document.write("<p>1 = " + add(1)); 
       document.write("<p>1,3 = " + add(1,3)); 
       document.write("<p>1,3,5 = " + add(1,3,5)); 
       document.write("<p>1,3,5,7,9 = " + add(1,3,5,7,9));
</script>
</head>
<body>
</body>
</html>

JavaScript 中函数的参数还有更灵活的运用方式,如下例所示:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
    function output(times, char, end) {
        var s = '';
        for (var i = 0; i < times; i++) {
            if (char) {
                s+=char;
            } else {
                  s+='*'; 
              }
        }
        document.write(s);
        if (end) {
            document.write(end);
        } else {
            document.write("<br/>");
        }
}
    output(20);
    output(20, "O");
    output(20);
    output(20, "H", "<hr/>");
    output(20, '![](07_8.png)', "<hr/>");
</script>
</head>
<body>
</body>
</html>

注意:因为JavaScript中方法的参数长度是可变的,所以JavaScript并不支持类似于Java语言的方法重载特性。

网友评论

HTML/CSS/JavaScript

本文标题：JavaScript 语言基础

本文链接：https://www.haomeiwen.com/subject/rfmxgttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

JavaScript 语言基础

JavaScript 中的变量

JavaScript 中的流程控制语句

JavaScript 中的方法

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

HTML/CSS/JavaScript