JavaScript笔记（一）

好饿呀~～～

已于 2022-02-27 17:11:31 修改

阅读量265

点赞数 1

分类专栏：【前端】文章标签： js javascript

于 2021-08-10 23:14:28 首次发布

本文链接：https://blog.csdn.net/qq_51899357/article/details/119580627

版权

【前端】专栏收录该内容

13 篇文章 1 订阅

订阅专栏

JavaScript笔记（一）

1 JavaScript简介

JavaScript，就是我们通常所说的JS，是一种嵌入到HTML页面中的脚本语言，由浏览器一边解释一边执行。

我们在“HTML入门教程”中的“前端技术简介”中深入浅出地讲解了HTML、CSS和JavaScript之间的关系。

1.1 JavaScript的特点

HTML页面是静态的，而JavaScript可以弥补HTML语言的缺陷，实现Web页面客户端的动态效果。JavaScript的作用有以下几点：

动态改变页面内容
HTML页面是静态的，一旦编写，内容是无法改变的。JavaScript可以弥补这个不足，可以将内容动态地显示在网页中。
动态改变网页的外观
JavaScript通过修改网页元素的CSS样式，达到动态地改变网页的外观。
验证表单数据
我们常见的在各大网站中的注册中的验证功能，就是JavaScript实现的。
响应事件
JavaScript是基于事件的语言。例如点击一个按钮弹出一个对话框，就是鼠标点击触发的事件，例如绿叶学习网教程文章中的点赞效果：

对于JavaScript的理解，就一句话：如果没有使用JavaScript，网页就是静态的，唯一的功能就是给用户浏览。加入了JavaScript，网页变得绚丽多彩起来。

1.2 JavaScript编辑工具

常用的JavaScript编辑工具有：

（1）记事本；

（2）Dreamweaver；

（3）UltraEdit-32；

（4）Visual Studio；

（5）sublime Text

1.3 JavaScript在HTML的引用方式

JavaScript在HTML的引用方式共有4种：

（1）页头引入（head标签内）；

（2）页中引入（body标签内）；

（3）元素事件中引入（标签属性中引入）；

（4）引入外部JS文件；

1.4 JavaScript和Java的关系

JavaScript和Java只有一毛钱的关系，无他。

JavaScript和Java虽然名字相似，但是本质上是不同的。

（1）JavaScript往往都是在网页中使用，而Java却可以在软件、网页、手机App等各个领域中使用；

（2）Java是一门面向对象的语言，而从本质上讲，JavaScript更像是一门函数式编程语言；

2 JavaScript入门基础

2.1数据结构

JavaScript的数据结构包括：标识符、关键字、常量、变量等。

2.1.1 标识符

标识符，说白了，就是一个名字。在JavaScript中，变量和函数等都需要定义一个名字，这个名字就可以称为“标识符”。

JavaScript语言中标识符最重要的3点就是：

（1）第一个字符必须是字母、下划线（_）或美元符号这3种其中之一，其后的字符可以是字母、数字或下划线、美元符号；

（2）变量名不能包含空格、加号、减号等符号；

（3）标识符不能和JavaScript中用于其他目的的关键字同名；

2.1.2 关键字

JavaScript关键字是指在JavaScript语言中有特定含义，成为JavaScript语法中一部分的那些字。

2.1.3 常量

常量，顾名思义就是指不能改变的量。常量的指从定义开始就是固定的，一直到程序结束。

常量主要用于为程序提供固定和精确的值，包括数值和字符串，如数字、逻辑值真（true）、逻辑值假（false）等都是常量。

2.1.4 变量

变量，顾名思义，就是指在程序运行过程中，其值是可以改变的。

2.1.5 示例

<script>
        // 1. 定义一个变量
        var age;
        // 2. 赋值
        age = 18;
        // 3. 输出结果
        console.log(age);
        // 4. 声明 + 赋值 = 变量初始化
        var myname = '南京大学';
        console.log(myname);
        // 5. 多个变量的写法
        var age = 18,
            address = 'china',
            gz = 2000;
        console.log(age);
        console.log(address);
        console.log(gz);
        // 6. 声明变量的特殊情况
        // 6.1 只声明 不赋值
        var sex;
        console.log(sex);//undefined
        // 6.2 不声明 不赋值 直接使用
        console.log(tel);//报错
        // 6.3 不声明直接赋值使用
        qq = 110;//回升为 全局变量
        // 7 变量的命名 遵循小驼峰法 前面支持 & - 不许有空格
    </script>

2.2 JavaScript数据类型

2.2.1 基本介绍

JavaScript数据类型有2大分类：一是“基本数据类型”，二是“特殊数据类型”。

其中，基本数据类型包括以下3种：

（1）数字型（Number型）：如整型84，浮点型3.14；
（2）字符串型（String型）：如"绿叶学习网"；
（3）布尔型（Boolean型）：true或fasle；

特殊数据类型有3种：

（1）空值（null型）；（2）未定义值（undefined型）；（3）转义字符；

根据个人的开发经验中，只需要记忆\n、\'、\"这3个就已经够初学者走很远了，其他的转义字符我们完全没必要去记忆，到时候需要的时候再回来查表就行了，大家别浪费脑细胞喔。

2.2.2 相关示例

  <title>变量的数据类型</title>
  <script>
    //1. js 语言是一种弱语言型
    // var num; // 这里我们不确定这是什么数据类型
    var num = 10; //num 属于数字型
    // js 的变量数据类型是只用在程序运行过程中，根据等号右面的值来判断
    var str = 'name';
   // js 是动态语言 变量的数据类型是可以变化的
   var x = 10;
   x = 'pink';
   // 2. 数据类型
    var num = 18;
    var pi = 3.14;
    // 1. 八进制 0 ~ 7 我们程序里面的数字前面加0 表示 八进制
    var num1 = 10;
    // 在数字前面加 ox 是16进制
  </script>

<--boolea数据类型-->
<script>
        var flag = true;
        var flag1 = false;
        console.log(flag + 1);//2
        console.log(flag1 + 1);//1
        // 如果一个变量未声明
        var str;
        console.log(str); // undefined;
        var variable = undefined;
        console.log( variable + 'pink');// 任何与字符串相连的都是字符串,undefinedpink
        console.log(variable  + 1);// NaN 不是一个数字
        // 空值null
        var space = null;
        console.log(space + 'pink');// nullpink
        console.log(space + 1);//  1
    </script>

2.3 运算符

JavaScript的运算符按运算符类型可以分为以下5种：

（1）算术运算符；
（2）比较运算符；
（3）赋值运算符；
（4）逻辑运算符；
（5）条件运算符；

示例：

 <title>算数运算</title>
  <script>
    console.log(1 + 1);
    console.log(1 * 2);
    console.log(1 - 1);
    console.log(1 / 1);
    // 取余
    console.log(4 % 2);
    console.log(5 % 3);
    console.log(3 % 5);
    // 浮点数 算数里面会有问题
    console.log(0.1 + 0.2); // 0.30000000000000004
    var num = 0.1 + 0.2;
    console.log(num == 0.3);// false
  </script>

 <title>自增自减</title>
    <script>
      // 1. 想要一个变量自己加1   num = num + 1 比较麻烦
      var num = 1;
      num = num + 1; // ++num
      num = num + 1;
      console.log(num); // 3
      // 2. 前置递增运算符  ++ 写在变量的前面
      var age = 10;
      ++age; // 类似于 age = age + 1
      console.log(age);
      // 3. 先加1  后返回值
      var p = 10;
      console.log(++p + 10); // 21
  </script>

    <title>后置运算符</title>
  <script>
    var num = 10;
    num++; // num = num + 1    ++num;
    console.log(num);
    // 1. 前置自增和后置自增如果单独使用 效果是一样的
    // 2. 后置自增 口诀：先返回原值 后自加1
    var age = 10;
    console.log(age++ + 10);
    console.log(age);
  </script>

    <title>逻辑运算符</title>
    <script>
        // 1. 逻辑与 &&  and 两侧都为true  结果才是 true  只要有一侧为false  结果就为false
        console.log(3 > 5 && 3 > 2); // false
        console.log(3 < 5 && 3 > 2); // true
        // 2. 逻辑或 || or  两侧都为false  结果才是假 false  只要有一侧为true  结果就是true
        console.log(3 > 5 || 3 > 2); // true
        console.log(3 > 5 || 3 < 2); // false
        // 3. 逻辑非  not  ！
        console.log(!true); // false
    </script>

<title>短路运算</title>
  <script>
    // 1. 用我们的布尔值参与的逻辑运算  true && false  == false
    // 2. 123 && 456  是值 或者是 表达式 参与逻辑运算？
    // 3. 逻辑与短路运算  如果表达式1 结果为真 则返回表达式2  如果表达式1为假 那么返回表达式1
    console.log(123 && 456); // 456 逻辑与 如果第一个为真， 就执行第二个
    console.log(0 && 456); //  0
    console.log(0 && 1 + 2 && 456 * 56789); // 0
    console.log('' && 1 + 2 && 456 * 56789); // ''
    // 如果有空的或者否定的为假， 其余是真的  0  ''  null undefined  NaN 《---- 这几个代表假
    // 4. 逻辑或短路运算  如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2
    console.log(123 || 456); // 123 如果第一个为真， 直接第一个输出
    console.log(123 || 456 || 456 + 123); // 123
    console.log(0 || 456 || 456 + 123); // 456
    // 逻辑中断很重要 它会影响我们程序运行结果思密达
    var num = 0;
    console.log(123 || num++);
    console.log(num); // 0
  </script>

 <title>运算符优先级</title>
    <script>
        // 一元运算 比 二元运算 优先
        //逻辑与 比 逻辑或 优先
        //  ++num   !num     2 + 3
        console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true)
        var num = 10;
        console.log(5 == num / 2 && (2 + 2 * num).toString() === '22');
        console.log('-------------------');
        var a = 3 > 5 && 2 < 7 && 3 == 4;
        console.log(a);

        var b = 3 <= 4 || 3 > 1 || 3 != 2;
        console.log(b);

        var c = 2 === "2";
        console.log(c);

        var d = !c || b && a;
        console.log(d);
    </script>

2.4 typeof运算符

typeof运算符用于返回它的操作数当前所容纳的数据的类型，这对于判断一个变量是否已被定义特别有用。

示例：

  <title>数据类型</title>
  <script>
    var num = 10;
    console.log(typeof num); // number
    var str = 'pink';
    console.log(typeof str); // string
    var flag = true;
    console.log(typeof flag); // boolean
    var vari = undefined;
    console.log(typeof vari); // undefined
    var timer  = null;
    console.log(typeof timer); // object
  </script>

2.5 表达式

表达式是一个语句的集合，计算结果是个单一值。

在JavaScript中，常见的表达式有4种：

（1）赋值表达式；

（2）算术表达式；

（3）布尔表达式；

（4）字符串表达式；

2.6 类型转换

2.6.1 转换为数值型

在JavaScript中，将字符串型数据转换为数值型数据有parseInt()和parseFloat()这2种方法。其中，parseInt()可以将字符串转换为整型数据；parseFloat()可以将字符串转换为浮点型数据。

语法：

//基本说明：
			parseInt()  //将字符串型转换为整型
			parseFloat()  //将字符串型转换为浮点型
//例子：
			var a=i%10;//提取个位数
            var b=(i/10)%10 //提取十位数
            b=parseInt(b);
            var c=i/100;//提取百位数
            c=parseInt(c);

示例：

<title>转换为数字型</title>
  <script>
    var age = prompt('亲输入：');
    // 1. parseInt(变量) 可以把 字符串型 转换为数字型 得到的是整数
    console.log(parseInt(age));
    console.log(parseInt('3.14'));// 3
    console.log(parseInt('9.14'));// 9
    console.log(parseInt('120px')); // 120 会去掉这个 px 单位
    console.log(parseInt('rem120px')); //NaN
    // 2. parseFloat(变量) 可以把 字符串型 装换为数字型 得到是小数 浮点数
    console.log(parseFloat('3.14'));
    console.log(parseFloat('120px')); // 120 会去掉单位
    console.log(parseFloat('rem212px')); // NaN
    // 3. 利用 Number(变量)
    var str = '123';
    console.log(Number(123))
    console.log(Number('12'))
    // 4. 利用算数运算 - * / 隐式转换
    console.log('12' - 0);
    console.log('123' - '121');
    console.log('123' * 1);

  </script>

2.6.2 转换为字符串型

在JavaScript中，将数值型数据（整型或浮点型）转换为字符串，都是使用toString()方法。

示例：

 <title>转换为字符串型</title>
  <script>
    // 1. 把数字型转换为字符串型  变量.toString()
    var num = 10;
    var str = num.toString();
    console.log(str);
    console.log(typeof str);
    // 2. 我们利用 String(变量)
    console.log(String(num));
    // 3. 利用 + 拼接字符串的方法实现装换效果(最常见， 隐式转换)
    console.log(num + '')
  </script>

2.6.3 转换为Boolean类型

示例：

<title>转换为Boolean类型</title>
  <script>
    console.log(Boolean('')); // false
    console.log(Boolean(0)); // false
    console.log(Boolean(NaN)); // false
    console.log(Boolean(null)); // false
    console.log(Boolean(undefined)); // false
    console.log('------------------------------');
    console.log(Boolean('123'));true
    console.log(Boolean('你好吗'));true
    console.log(Boolean('我很好'));true
  </script>

2.7 JavaScript基本语法

2.7.1 执行顺序

JavaScript程序按照在HTML文档中出现的顺序逐行执行。如果需要在整个HTML文件中执行，最好将其放在HTML文件的标签中。某些代码，如函数体内的代码，不会被立即执行，只有当所在的函数被其他程序调用时，该代码才会被执行。

2.7.2 区分大小写

JavaScript是严格区分大小写的。例如str和Str这是两个完全不同的变量。

2.7.3 分号和空格

在JavaScript中，语句的分号“;”是可有可无的。但是我们强烈要求大家在每一句语句后面加一个分号“;”，这是一个非常重要的代码编写习惯。

另外，JavaScript会忽略多余的空格，用户可以向脚本添加空格，来提高代码的可读性，说白了就是让代码“漂亮点”，读得舒服一点。

例如：

var str="JavaScript教程";

var str = "JavaScript教程";  //这一行代码读起来舒服一点

2.8 JavaScript注释

在编写JavaScript代码时，我们经常要在一些关键代码旁做一下注释，这样做的好处很多。

语法：

//单行注释内容

/*多行注释内容*/

“//”是单行注释方式，如果你的注释内容只占一行就应该使用这种注释方式。“/**/”是多行注释方式，如果你的注释内容占多行建议使用这种注释方式。

2.9 JavaScript输入与输出

<script>
    // prompt：这是一个输入框
    prompt('请输入你的年龄：');
    //alert 弹出警示框 给用户
    alert('快点去学习');
    // console 控制台输出 给程序员测试用的
    console.log('程序员可以看到的');
</script>

效果展示：
在这里插入图片描述

3 流程控制

JavaScript对程序流程的控制跟其他编程语言是一样的，主要有3种：

（1）顺序结构；（2）选择结构；（3）循环结构；

3.1 选择结构

在JavaScript中，选择结构共有5种：

（1）if语句;

（2）if……else语句;

（3）if……else if……语句;

（4）if语句的嵌套;

（5）switch语句;

3.2 循环结构

在JavaScript中，循环结构总有3种：

（1）while语句；

（2）do……while语句；

（3）for语句；

3.3 跳转语句

JavaScript支持的跳转语句主要有2种：

（1）break语句；

（2）continue语句；

break语句与continue语句的主要区别是：break是彻底结束循环，而continue是结束本次循环。在这一点跟其他编程语言（如C和Java）相同。

四、训练题
（1）题目：计算100以内所有奇数的和比较简单，使用for语句就可以实现。

代码实现如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var sum=0;
        for(var i=1;i<100;i+=2)
        {
            sum+=i;
        }
        document.write("100以内所有奇数和为："+sum);
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下：
分析：
“i+=2”等价于“i=i+2”，“sum+=i”等价于“sum=sum+i”。这些基础的东西可别忘了。

（2）
题目：输出所有的“水仙花数”。所谓“水仙花数”是指一个3位数，其各位数字立方和等于该数的本身。例如，153就是一个水仙花数，因为153=13+53+33。
代码实现如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        document.write("水仙花数有：");
        for(var i=100;i<1000;i++)
        {
            var a=i%10;//提取个位数
            var b=(i/10)%10 //提取十位数
            b=parseInt(b);
            var c=i/100;//提取百位数
            c=parseInt(c);
            if(i==(a*a*a+b*b*b+c*c*c))
            {
                document.write(i+",");
            }
        }
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下：

分析：
parseInt()函数是将一个数转换为整型数据，我们在“JavaScript类型转换”这一节中已经详细给大家讲解了。
（3）

题目：找出字符串中“how are you doing？”中所有小于字母“s”的字符，并在页面输出。

代码实现如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var str="how are you doing？";
        var result="";
        for(var i=0;i<str.length;i++)
        {
            if(str.charAt(i)<"s")
            {
                result+=str.charAt(i)+",";
            }
        }
        document.write(result);
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下：
分析：

这些是字符串的内容，如果大家不懂没关系，现在只是让大家接触一下。因为例子要是太过于简单，大家学得也没有激情。这些在“JavaScript字符串对象”这一章中，我们会详细讲解到。

4 函数

4.1 函数是什么

函数，就是一个一系列JavaScript语句的集合，这是为了完成某一个会重复使用的特定功能。在需要该功能的时候，直接调用函数即可，而不必每次都编写一大堆重复的代码。并且在需要修改该功能的时候，也只要修改和维护这一个函数即可。

总之，将语句集合成函数，好处就是方便代码重用。并且，一个好的函数名，可以让人一眼就知道这个函数实现的是什么功能，方便维护。

函数的使用只需要2步：

（1）定义函数；

（2）调用函数；

4.2 函数的定义

在JavaScript中，使用函数前，必须用function关键字来定义函数。

函数常用方式有2种：

（1）不指定函数名的函数；

（2）指定函数名的函数；

1、不指定函数名的函数

语法：

function(参数1,参数2,….,参数n)
{
    //函数体语句
}

说明：

定义函数必须使用function关键字。

2、指定函数名的函数
“指定函数名的函数”是JavaScript中使用最广泛的方法，反而“不指定函数名的函数”用得比较少。
语法：

function 函数名(参数1,参数2,….,参数n)
{
    //函数体语句
    return 表达式;
}

说明：

定义函数必须使用function关键字来定义。

函数名必须是唯一的，尽量通俗易懂，并且跟你定义的代码有关。

函数可以使用return语句将某个值返回，也可以没有返回值。

参数是可选的，可以不带参数，也可以带多个参数。如果是多个参数的话，参数之间要用英文逗号隔开。

4.3 函数的调用

常用的函数调用方式有4种：

（1）简单调用；

（2）在表达式中调用；

（3）在事件响应中调用；

（4）通过链接调用；

4.4 特殊函数

JavaScript特殊函数有3种：

（1）嵌套函数；
（2）递归函数；
（3）内置函数；
下面详细给大家讲解一下这3中函数调用方式。

1、嵌套函数

嵌套函数，顾名思义，就是在一个函数的内部定义另外一个函数。不过在内部定义的函数只能在内部调用，如果在外部调用，就会出错。

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        //定义阶乘函数
         function fun(a)
         {
             //嵌套函数定义，计算平方值的函数
             function multi (x)
             {
                 return x*x;
             }
             var m=1;
             for(var i=1;i<=multi(a);i++)
             {
                 m=m*i;
             }
             return m;
         }
         var sum =fun(2)+fun(3);
         document.write(sum);
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下：

分析：

上面定义的multi函数只能在fun函数内部使用，如果在fun函数外部调用就会出错，大家可以在“在线测试”中自己修改代码测试一下。

2、递归函数

递归函数是一种非常重要的编程技术，当年我在学习其他编程技术（如C、C++、Java等）都经常用到。

递归函数用于让一个函数从其内部调用其本身。不过需要注意的是，如果递归函数处理不当，就会使程序陷入“死循环”。为了防止“死循环”的出现，可以设计一个做自加运算的变量，用于记录函数自身调用的次数，如果次数太多就让它自动退出循环。

语法：

function 递归函数名(参数1)

{

    递归函数名(参数2)

}

说明：

在定义递归函数时，需要2个必要条件：

（1）首先包括一个结束递归的条件；

（2）其次包括一个递归调用的语句；

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
         var msg="\n函数的递归调用：\n\n";
         //响应按钮的点击事件
         function Test()
         {
             var result;
             msg+="调用语句：\n";
             msg+="    result=sum(20);\n";
             msg+="调用步骤：\n";
             result=sum(20);
             msg+="计算结果：\n";
             msg+="    result="+result+"\n";
             alert(msg);
         }
         //计算当前步骤加和值
         function sum(m)
         {
             if(m==0)
             {
                 return 0;
             }
             else
             {
                 msg+="    result="+m+"+sum("+(m-2)+ ");\n";
                 result=m+sum(m-2);
             }
             return result;
         }
    </script>
</head>
<body>
    <input type="button" value="测试" onclick="Test()"/>
</body>
</html>

在浏览器预览效果如下：

分析：

在上述代码中，为了求取20以内的偶数和，定义了递归函数sum(m)，而函数Test()对其进行调用，并使用alert()方法弹出相应的提示信息。

递归函数对于初学者来说可能比较难以理解，如果实在不会，可以直接忽略它。因为在JavaScript中是比较少用到递归函数的，递归函数往往都是在其他编程语言中用得比较多。到时候需要的时候我们回来翻翻就OK了。

3、内置函数

JavaScript中有2种函数：一种是用户自定义函数，另外一种是JavaScript语言内部已经定义好了，可以直接供我们调用的函数（也就是内置函数）。

内置函数由于已经在JavaScript语言内部定义好了的，也就是我们不需要自己定义就能用了。这样极大方便了我们的编程。

4.5 JavaScript函数中的参数（arguments）

4.5.1 arguments

argument是JavaScript中的一个关键字，用于指向调用者传入的所有参数。

function example(x){
    alert(x); //1
    alert(arguments.length); //3
    for(var i=0; i<arguments.length; i++){
        alert(arguments[i]);  //1,2,3   
    }      
}
example(1,2,3);

即使不定义参数，也可以取到调用者的参数。

function abs() {
    if (arguments.length === 0) {
        return 0;
    }
    var x = arguments[0];
    return x >= 0 ? x : -x;
}
 
abs(); // 0
abs(10); // 10
abs(-9); // 9

由于JavaScript函数允许接收任意个参数，所以不得不用arguments来获取函数定义a以外的参数。

function exm(a) {
    var rest = [];
    if (arguments.length > 1) {
        for (var i = 1; i<arguments.length; i++) {
            rest.push(arguments[i]);
        }
    }
}

4.5.2 REST

其实ES6给了新的rest参数，用在函数最后，多余的参数以数组的形式交给变量rest，如果传入的参数未填满函数定义的参数，rest会是一个空数组。

function exm(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}
 
exm(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
 
exm(1);
// 结果:
// a = 1
// b = undefined
// Array []
<script>
		function say() {
	
			console.log('Hello' + arguments[0] + arguments[1]);
	
			console.log(arguments.length);
	
		}
	
		say('World！', 'ByeBye！');
	</script>

4.6 练习题

（1）

题目：在页面中添加两个单行文本框，在两个文本框中输入两个数字，使用JavaScript函数比较这两个函数大小，并使用对话框输出最大数。

实现代码如下：

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function maxNum()
        {
            //获取两个文本框的值
            var x = document.getElementById("num1").value;
            var y = document.getElementById("num2").value;
            //强制转换为数值型
            x = parseFloat(x);
            y = parseFloat(y);
            if(x<y)
            {
                alert("最大数是："+y);
            }
            else
            {
                alert("最大数是："+x);
            }
        }
    </script>
</head>
<body>
    第一个数是：<input type="text" id="num1"/><br/>
    第二个数是：<input type="text" id="num2"/><br/>
    <input type="button" onclick="maxNum()" value="计算"/>
</body>
</html>

在浏览器预览效果如下：

我们随便输入两个数字如“50和100”，然后点击“计算”按钮即可输出最大数，效果如下：

分析：

这一个程序非常简单，但是包含的信息量不少。

document.getElementById()类似于CSS中的id选择器，而document.getElementById(“num1”).value表示选取id为num1的元素并获取它的值。这个方法经常用到，大家要记一下。我们在后续课程会给大家详细讲解。

这里用到了函数调用的其中一个方式“在事件中调用函数”。<input type=“button” οnclick=“maxNum()”/>表示在按钮点击的时候执行函数maxNum()。

此外，还有一点要注意的是：有些同学呀，在定义这个函数的时候定义的函数名是max，然后发现出错了！oh~，其实那是你忽略了很基础的一点，那就是自己定义的函数名是不能与JavaScript内部定义的函数名相同。

（2）

题目：写一个函数，输入一个4位数字，要求使用对话框输出这4个数字字符，但每两个数字之间留一个空格，如输入1992，应输出“1 9 9 2”。

代码实现如下：

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function strNum()
        {
            //获取输入文本框中的值，这里获取的值是一个字符串
            var s = document.getElementById("num").value;
            var s1="";
            for(var i=0;i<4;i++)
            {
                //如果获取的不是最后一个字符
                if(i!=3)
                {
                    s1+=s.charAt(i)+ " ";
                }
                //如果获取的是最后一个字符
                else
                {
                    s1+=s.charAt(i);
                }
            }
            alert(s1);
        }
    </script>
</head>
<body>
    输入数字是：<input type="text" id="num"/><br/>
    <input type="button" onclick="strNum()" value="提交"/>
</body>
</html>

在浏览器预览效果如下：

在文本框输入2015，然后点击“提交”按钮，效果如下：

分析：

这里再一次用到了document.getElementById()，而字符串操作的charAt()方法我们在上一章的练习中也接触了，详细内容我们在字符串对象这一章会讲解。程序还是比较简单的，大家琢磨一下。

5 内置函数

在JavaScript中，常用的内置函数有7个：

（1）eval()函数

（2）isFinite()函数

（3）isNaN()函数

（4）parseInt()函数

（5）parseFloat()函数

（6）escape()函数

（7）unescape()函数

5.1 eval()函数

在JavaScript中，eval()函数可以把一个字符串当做一个JavaScript表达式一样去执行它。例如：

eval("document.write('<strong>JavaScript入门教程</strong> ')");

上面语句说白了就是执行“document.write('JavaScript入门教程 ')”,eval()函数用了等于没用一样。这是这种“多此一举”的做法，在实际开发很少用到eval()函数。

5.2 isFinite()函数

在JavaScript中，isFinite()函数用来确定某一个数是否是一个有限数值。
语法：

isFinite(number)

说明：

number参数是必选的，可以是任意的数值，例如整型、浮点型数据。

如果该参数为非数字、正无穷数和负无穷数，则返回false；否则的话，返回true。如果是字符串类型的数字，就会自动转化为数字型。

5.3 isNaN()函数

语法：

isNaN(参数)

说明：

这里的参数可以是任何类型的数据，例如数字型、字符串型、日期时间型等。不过得注意一点，当参数是“字符串类型的数字”，就会自动转换为数字型。

例如：

<title>isNaN</title>
    <script>
        // isNaN() 这个方法用来判断非数字 如果是，返回false  不是， 返回true
        console.log(isNaN(10));
        console.log(isNaN('pink'));
    </script>

运行结果：

//浏览器控制台结果：
false
true

5.4 parseInt()函数和parseFloat()函数

在JavaScript中，将字符串型数据转换为数值型数据有parseInt()和parseFloat()这2种方法。其中，parseInt()可以将字符串转换为整型数据；parseFloat()可以将字符串转换为浮点型数据。
语法：

parseInt()  //将字符串型转换为整型
parseFloat()  //将字符串型转换为浮点型

说明：
将字符串型转换为整型，前提是字符串一定要是数值字符串。那什么叫数值字符串呢？“123”、“3.1415”这些只有数字的字符串就是数值字符串，而“hao123”、“360cn”等就不是数值字符串。

5.5 escape函数和unescape函数

escape()函数主要作用就是对字符串进行编码，以便它们能在所有计算机上可读。

unescape()函数和escape()函数是刚好反过来的，escape()函数是编码，unescape()函数是解码。

5.2.1 escape函数

escape()函数主要作用就是对字符串进行编码，以便它们能在所有计算机上可读。

语法：

escape(charString)

说明：

charString是必选参数，表示要进行编码的字符串或文字。escape()函数返回一个包含charString内容的字符串值（Unicode格式）。除了个别如“*@”之类的符号外，其余所有空格、标点符号以及其他非ASCII字符均可用“%xx”这种形式的编码代替，其中xx等于表示该字符的十六进制数。

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        document.write(escape("hello lvye!"))
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下：
分析：
空格符对应的编码是“%20”，感叹号对应的编码是“%21”，因此执行escape(“hello lvye!”)后结果为“hello%20lvye%21”。

5.2.2 unescape()函数

escape()函数和unescape()函数是刚好反过来的，前者是编码，后者是解码。
语法：

unescape(charString)

说明：
charString是必选参数，表示要进行解码的字符串。unescape()函数返回指定值的ASCII字符串。与escape()函数相反，unescape()函数返回一个包含charString内容的字符串值，所有以“%xx”十六进制形式编码的字符都用ASCII字符集中等价的字符代替。
举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
       document.write(unescape("hello%20lvye%21"))
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下：

分析：

空格符对应的编码是“%20”，感叹号对应的编码是“%21”，因此执行unescape(“hello%20lvye%21”)后结果为“hello lvye!”。

六、训练题
在线escape加解密工具制作

代码实现如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
    //定义基本样式
    <style type="text/css">
        #txt-input,#txt-output
        {
            height:60px;
        }
    </style>
    <script type="text/javascript">
        //定义加密函数
        function encrypt()
        {
            //获取输入框的值
            var str = document.getElementById("txt-input").value;
            //将输入框的值加密，并赋给输出框
            document.getElementById("txt-ouput").value = escape(str);
        }
        //定义解密函数
        function decrypt()
        {
            //获取输入框的值
            var str = document.getElementById("txt-input").value;
            //将输入框的值加密，并赋给输出框
            document.getElementById("txt-ouput").value = unescape(str);
        }
    </script>
</head>
<body>
    <form>
        <textarea id="txt-input" cols="20"></textarea><br />
        <input id="btn-encrypt" type="button" value="加密" onclick="encrypt()"/>
        <input id="btn-decrypt" type="button" value="解密" onclick="decrypt()"/>
        <input id="Reset1" type="reset" value="清空" /><br />
        <textarea id="txt-ouput" cols="20"></textarea>
    </form>
</body>
</html>

在浏览器预览效果如下（IE浏览器）：

分析：
（1）重置按钮的作用域是同一个form标签内部的文本框，这一点请参考“HTML入门教程”中的“按钮button”这一节；
（2）这里再次用到了document.getElementById()这一JavaScript的id选择器，这次大家打死都要记住这一个语句了，在之前都讲解了3次以上了；
（3）这个在线工具逻辑已经实现，界面还比较粗糙，剩下的就交给大家润色了。

5.6 字符串对象

5.6.1 JavaScript字符串对象简介

字符串，是程序设计中经常使用的一种数据类型，在每一种编程语言中都非常非常的重要。

5.6.2 length属性简介

在JavaScript中，对于字符串来说，要掌握的属性就只有一个，那就是length属性。我们可以通过length属性来获取字符串的长度。

语法：

字符串名.length

说明：

length属性很简单，但是在字符串操作中经常要用到，这个大家一定要记住。

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var str="I love lvye!";
        document.write("字符串长度是："+str.length);
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下：

5.6.3 match()方法简介

在JavaScript中，使用match()方法可以从字符串内索引指定的值，或者找到一个或多个正则表达式的匹配。
语法：

stringObject.match(字符串)    //匹配字符串;
stringObject.match(正则表达式)  //匹配正则表达式

说明：
stringObject指的是字符串对象。match()方法类似于indexOf()方法，但是它返回的是指定的值，而不是字符串的位置。

下面来看一个例子，大家就懂了。

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var str="Hello World!";
        document.write(str.match("world")+"<br/>");
        document.write(str.match("World")+"<br/>");
        document.write(str.match("worlld")+"<br/>");
        document.write(str.match("world!"));
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下：
分析：
说白了，match()方法就是用来检索一个字符串是否存在。如果存在的话，返回要检索的字符串；如果不存在的话，返回null。

5.6.4 search()方法简介

在JavaScript中，search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。

语法：

stringObject.search(字符串)      //检索字符串;
stringObject.search(正则表达式)  //检索正则表达式

说明：
stringObject指的是字符串对象。search()方法返回的是子字符串的起始位置，如果没有找到任何匹配的子串，则返回-1。

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var str = "I love lvyestudy!";
        document.write(str.search("lvye")+"<br/>");
        document.write(str.search("html"));
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下：

分析：

str.search(“lvye”)表示检索字符串"I love lvyestudy!“是否存在子字符串"lvye”，由于存在，所以返回"lvye"在字符串"I love lvyestudy!"中的起始位置7（字符串索引从0开始）。

str.search(“html”)表示检索字符串"I love lvyestudy!“是否存在子字符串"html”，由于不存在，因此返回-1。

5.6.5 indexOf()方法简介

在JavaScript中，可以使用indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

语法：

stringObject.indexOf(字符串)

说明：
stringObject表示字符串对象。indexOf()方法跟search()方法差不多，跟match()方法类似，不同的是indexOf()方法返回的是字符串的位置，而match()方法返回的是指定的字符串。
举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var str="Hello World!";
        document.write(str. indexOf ("world")+"<br/>");
        document.write(str. indexOf ("World")+"<br/>");
        document.write(str. indexOf ("worlld")+"<br/>");
        document.write(str. indexOf ("world!"));
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下：

5.6.6 replace()方法简介

在JavaScript中，replace()方法常常用于在字符串中用一些字符替换另一些字符，或者替换一个与正则表达式匹配的子串。

语法：

stringObject.replace(原字符,替换字符)   
stringObject.replace(正则表达式,替换字符)  //匹配正则表达式

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var str ="I love javascript!";
        var str_new=str.replace("javascript","lvyestudy");
        document.write(str_new);
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下：

分析：

str.replace(“javascript”,“lvyestudy”)表示用"lvyestudy"替换str中的"javascript"。

5.6.7 charAt()方法简介

在JavaScript中，可以使用charAt()方法来获取字符串中的某一个字符。这个方法我们在之前的教程中已经多次接触了。这个方法非常好用，在实际开发中也经常用到。
语法：

stringObject.charAt(n)

说明：
string.Object表示字符串对象。n是数字，表示字符串中第几个字符。注意，字符串中第一个字符的下标是0，第二个字符的下标是1，以此类推。
举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var str = "Hello lvye!";
        document.write(str.charAt(0)+"<br/>");
        document.write(str.charAt(4));
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下：

八、字符串英文大小写转化
在JavaScript中，使用toLowerCase()和toUpperCase()这两种方法来转化字符串的大小写。其中，toLowerCase()方法将大写字符串转换为小写字符串；toUpperCase()将小写字符串转换为大写字符串。

语法：

字符串名. toLowerCase()    //将大写字符串转换为小写字符串
字符串名. toUpperCase()    //将小写字符串转换为大写字符串

说明：
此外，还有2种大小写转化方法：toLocaleLowerCase()和toLocaleUpperCase()。这两个方法我们有可能一辈子都用不到，大家要是别的书籍中看到，可以直接忽略。

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var str="Hello Wordl!";
        document.write("以正常方式显示为："+str+"<br/>");
        document.write("以小写方式显示为："+str. toLowerCase()+"<br/>");
        document.write("以大写方式显示为："+str. toUpperCase());
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下：

5.6.8 连接字符串

在JavaScript中，可以使用concat()方法来连接2个或多个字符串。

语法：

字符串1.concat(字符串2,字符串3,…,字符串n);

说明：
concat()方法将“字符串2,字符串3,…,字符串n”按照顺序连接到字符串1的尾部，并返回连接后的字符串。
举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var str1="毛扇指千阵，";
        var str2="铁马踏冰河，";
        var str3="黄沙破楼兰。";
        var str4=str1+str2+str3;
        var str5=str1.concat(str2,str3);
        document.write(str4+"<br/>");
        document.write(str5);
    </script>
</head>
<body>
</body>
</html>

效果如下：

毛扇指千阵，铁马踏冰河，黄沙破楼兰。
毛扇指千阵，铁马踏冰河，黄沙破楼兰。

字符串拼接有两种方式：

concat();
利用“+”运算符实现。

5.6.9 比较字符串

在javascript中，可以使用localeCompare()方法用本地特定的顺序来比较两个字符串。

语法：

字符串1.localeCompare(字符串2)

说明：
比较完成后，返回值是一个数字。

（1）如果字符串1小于字符串2，则返回小于0的数字；

（2）如果字符串1大于字符串2，则返回数字1；

（3）如果字符串1等于字符串2，则返回数字0；

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var str1= "JavaScript";
        var str2 = "javascript";
        var str3 = str1.localeCompare(str2);
        document.write(str3);
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下：

5.6.10 split()方法

在javascript中，可以使用split()方法把一个字符串分割成字符串数组。
语法：

字符串.split(分割符)

说明：
分割符可以是一个字符、多个字符或一个正则表达式。分割符并不作为返回数组元素的一部分。
举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var str ="I love lvyestudy!";
        var arr=new Array();
        arr=str.split(" ");
        document.write(arr);
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下：
分析：
str.split(" ")表示字符串以空格作为分割符，而arr其实就是一个数组。。split()方法虽然简单，但是在实际开发中经常会用到，大家一定要记住喔。
对于数组，我们会在数组对象那一章详细讲解。

5.6.11 从字符串提取字符串

在JavaScript中，可以使用substring()方法来提取字符串中的某一部分字符串。

语法：

字符串.substring(开始位置,结束位置)

说明：
开始位置是一个非负的整数，表示从哪个位置开始截取。结束位置也是一个非负的整数，表示在哪里结束截取。
举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var str1="绿叶学习网JavaScript教程";
        var str2=str1.substring(5,15);
        document.write(str2);
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下：

5.7 日期对象

一、创建日期对象
在JavaScript中，创建日期对象必须使用“new语句”。使用关键字new新建日期对象时，常用的有2种：

方法一：

var 日期对象名 = new Date();

方法二：

var 日期对象名 = new Date(日期字符串);

方法一用于获取当前系统的时间，输出格式为如下：

方法二的日期字符串可以是以下几种形式：
（1）“2015-5-3”
（2）“May 3,2015”
（3）“2015/5/3”
其实创建日期对象不止这2种形式，不过根据个人经验，其他的创建方式大家可以直接忽略，没必要增加记忆负担。
举例：

var dt1 = new Date("2015-5-3");
var dt2 = new Date("May 3,2015");
var dt3 = new Date("2015/5/3");

二、日期对象方法
这一章学习了很多日期对象的方法。日期对象Date的方法主要分为三大组：setXxx、getXxx和toXxx。

setXxx用于设置时间和日期值；getXxx用于获取时间和日期值；toXxxx主要是将日期转换为指定格式。

表1 用于获日期时间的getXxx
方法	说明
getFullYear()	返回一个表示年份的4位数字
getMonth()	返回值是0（一月）到11（十二月）之间的一个整数
getDate()	返回值是1~31之间的一个整数
getHours()	返回值是0~23之间的一个整数，来表示小时数
getMinutes()	返回值是0~59之间的一个整数，来表示分钟数
getSeconds()	返回值是0~59之间的一个整数，来表示秒数

表2 用于设置日期时间的setXxx
方法	说明
setFullYear()	可以设置年、月、日
setMonth()	可以设置月、日
setDate()	可以设置日数
setHours()	可以设置时、分、秒、毫秒
setMinutes()	可以设置分、秒、毫秒
setSeconds()	可以设置秒、毫秒

表3 将日期时间转换为字符串的toXxx
方法	说明
toString()	将日期时间转换为普通字符串
toUTCString()	将日期时间转换为世界时间（UTC）格式的字符串
toLocaleString()	将日期时间转换为本地时间格式的字符串

好饿呀~～～

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript笔记（一）

JavaScript笔记（一）1 JavaScript简介JavaScript，就是我们通常所说的JS，是一种嵌入到HTML页面中的脚本语言，由浏览器一边解释一边执行。我们在“HTML入门教程”中的“前端技术简介”中深入浅出地讲解了HTML、CSS和JavaScript之间的关系。1.1 JavaScript的特点HTML页面是静态的，而JavaScript可以弥补HTML语言的缺陷，实现Web页面客户端的动态效果。JavaScript的作用有以下几点：动态改变页面内容HTML页面是静态的
复制链接

扫一扫