HTML+CSS+JS（四）-阿里云开发者社区

函数初步（二）

<html>
  <head>
    <meta charset="utf-8">
    <title>函数初步</title>
  </head>
  <body>
    <script type="text/javascript">
      // 这里也可以调用sayHello()函数.
      //sayHello();
      // 函数必须手动调用才会执行!
      // 在JS当中函数声明的优先级比较高,打开网页的时候,网页中所有的函数先进行声明.
      function sayHello(){
        alert("hello world!")
      }
      // 这行代码暴露在script标签当中,在页面打开的时候遵循自上而下的顺序依次逐行执行!
      //sayHello();
      //再调用一次
      //sayHello();
    </script>
    <input type="button" value="hello" onclick="sayHello() "/>
  </body>
</html>

局部变量和全局变量

笔记

全局变量：
在函数体之外声明的变量，叫做全局变量。
全局变量在浏览器打开的时候分配空间，直到浏览器关闭的时候才会销毁。

     局部变量：
                在函数体当中声明的变量，叫做局部变量。
                局部变量在函数被调用的时候分配空间，函数执行结束之后，内存释放。
            **javascript也是遵守就近原则的。**
            变量声明了，但是没有手动赋值，系统默认赋值undefined。
            变量没有声明，直接访问，这个时候会报错。（用F12可以查看控制台的错误信息！）
            在javascript当中，如果一个变量声明的时候没有使用var关键字的话，这个变量
            不管是在哪里声明的，都是全局变量。这种全局变量在声明的时候必须手动赋值，不能
            采用系统默认值。

代码

// 全局变量
var username = "zhangsan"; 
// 定义函数
function sayHello(){
  // 局部变量
  var username = "lisi";
  alert("welcome, " + username); //就近原则(这是任何一个编程语言都具备的！)
  // 局部变量
  var i = 100;
       }

JS中的函数可以重载吗

在JS中函数是不能重载的,也不存在重载机制
JS中的函数只要出现同名函数,之前的函数就消失了
注意在JS中编写函数名的时候,谨慎一些,以防将其他函数干掉!

JS的数据类型

关于JS的数据类型？

             1、JS中声明变量不需要指定变量数据类型呀，为什么还要学习数据类型呢？
                 例如：var i = 100; var d = 3.14;
                 **在JS中学习数据类型也不是为了声明变量，是为了理解JS程序的底层原理。**
                 我们起码要知道100是什么类型，3.14是什么类型，怎么存储的....
             2、**ES6之前JS的数据类型包括6种：**
                 Undefined
                 Number
                 Null
                 Boolean
                 String
                 Object
                 其中：**Undefined、Number、String、Boolean、Null都属于原始类型（或者叫做基本数据类型）**
                 其中：**Object属于引用数据类型（或者叫做对象类型）**
             3、在ES6之后引入了其它新的类型，知道就行：
                 Symbol
                 BigInt
                 注意：ES6之后是8种类型。ES6之前是6种类型。

typeof运算符

                **typeof运算符**（非常重要*****）
                    typeof运算符可以在JS代码运行过程当中，动态的获取变量的数据类型。
                   ** typeof运算符的语法格式：typeof 变量名**
                    typeof运算符的运算结果是以下6个字符串之一：
                       ** "undefined"**

"number"

"string"

"boolean"

"object"

"function"

并且以上6个字符串都是全部小写的！

                5、在JS中判断两个字符串是否相等，应该使用“==”,JS中没有equals函数！！！
                6、关于JS的比较官方的参考文档？
                      https://developer.mozilla.org/zh-CN/docs/Web/API
                      Web API 接口参考

Undefined数据类型

Undefined类型：
1、只有一个值，它的值就是：undefined
2、当一个变量声明之后没有手动赋值，系统默认赋值undefined
3、Undefined类型属于原始类型。

Null类型

Null类型
1、Null类型也是属于原始类型。
2、Null类型只有1个值：null
3、注意: typeof null 运算结果是："object"

在控制台输出

相当于Java中的system.out.println

console.log(typeof i) // "object"

Number类型

Number类型
1、Number类型属于原始类型。

2、Number类型都有哪些值？
-1
0
1
2
3
3.14
2.0
NaN
Infinity
....
3、NaN？
Not a Number，表示不是一个数字。

但NaN一个值，它属于Number类型。

                4、什么情况下结果是一个NaN？
                    当一个数学表达式的运算结果本应该返回一个数字，但是最终无法返回一个数字的时候，结果是NaN。
                5、**Infinity是无穷大，当除数是0的时候，最终计算结果是无穷大。**
                6、强调：
                    JavaScript当中的Number类型代表了java中的：
                        byte short int long float double 
                7、在Number类型这一块，有一个函数叫做：**isNaN()函数**，这个函数
                **最终返回布尔类型，返回true表示不是一个数字，返回false表示是一个**

数字。

isNaN : is Not a Number
true: 表示不是一个数字
false:表示是一个数字

                   ** isNaN(数据)**：这个函数有一个特点，它会首先尝试将“数据”转换成
                    数字，如果转换失败了，则结果就是true。转换为数字成功了，那么
                    结果就是false。
                    isNaN这个函数是干啥的？
                      **  就是用来判断“数据”是否是一个数字！！！！！**
                8、**在Number类型这一块还有一个函数叫做：Number()函数，这个函数的作用可以将不是数字类型的数据转换成数字类型的数据。**
                9、**parseInt()函数，将字符串数字转换成数字，并且取整。向下取整。**
                10、**Math.ceil()，这是一个Math工具类中的一个函数，向上取整。**

向上取整：只要后面有小数前面的整数就加1
向下取整：下取整，不管四舍五入的规则，只要后面有小数忽略小数给定。比如：4． 9，调用用向下取整函数，得到的是4。调用用向上取整函数，得到的是5

Boolean类型

Boolean类型：
1、Boolean类型属于原始类型。
2、Boolean类型只有两个值：true,false，没有其他值。

3、Boolean类型中有一个函数：Boolean()函数

这个函数的作用是？
将不是布尔类型的转换成布尔类型。

                      转换规律是什么？
                        **"只要有东西"结果就是true。**
                        有数据就是true，无数据就是false

console.log(Boolean(1)); // true
      console.log(Boolean(0)); // false
      console.log(Boolean("abc")); // true
      console.log(Boolean("中国")); // true
      console.log(Boolean("")); // false
      console.log(Boolean(NaN)); // false
      console.log(Boolean(Infinity)); // true
      console.log(Boolean(null)); // false
      console.log(Boolean(new Object())); // true
      console.log(Boolean(undefined)); // false
      var i = 0;
      if(i){ // 这里的代码实际上是这样的:if(Boolean(i))
        console.log("不是0");
      }else{
        console.log("是0");
      }
      var i = 10;
      while(i) { // 这里也会自动调用Boolean()函数进行转换.
        alert(i);
        i--;
      }

Boolean()函数在JS中会被隐式调用![程序员是不需要手动调用的]

这里不是说if后面小括号可以跟字符串,if后面小括号中永远只能是true或者false，如果不是true,也不是false,那么JS会自动隐式调用Boolean()函数进行类型转换.

    //var username = "zhangsan";
      varusername = "";
      if(Boolean(username)) {
          console.log("welcome, " + username)
      }else{
          console.log("对不起用户名不能为空！")
      }

String 类型

String类型
1、String类型属于原始类型（基本数据类型）

                2、在JS中怎么定义字符串，包括两种方式：
                    var s = "字符串";
                    var s = '字符串';
                    var s = new String("字符串");
                3、在JS当中提供了创建字符串的两种方式：
                    如果采用这种方式创建的字符串就属于原始类型！
                          var s = "hello";
                    如果采用这种方式创建的字符串就属于Object类型，这里使用了Object类的子类String，String类是JS内置的，可以直接使用：
                        var s = new String("hello");
                4、**在JS中不管是原始类型的字符串，还是Object类型的字符串，他们的方法和属性都是通用的。**

常用属性和方法

学习方法：熟练掌握，没必要记忆，开发的时候去查文档
String当中的常用属性和方法：
常用属性：
length属性，获取字符串长度

                    常用方法：
                        charAt 方法         获取指定下标位置的字符
                        concat 方法         连接字符串
                        indexOf 方法        获取某个字符串在当前字符串中第一次出现处的索引
                        lastIndexOf 方法    获取某个字符串在当前字符串中最后一次出现处的索引
                        replace 方法        替换
                        split 方法            拆分字符串
                        substr 方法           截取字符串
                        substring 方法          截取字符串
                        toLowerCase 方法           转小写
                        toUpperCase 方法           转大写

var s1 = "abc";
      console.log(typeof s1) // "string"
      var s2 = new String("hello");
      console.log(typeof s2) //"object"
      console.log("abcdef".length) //6
      console.log("http://www.baidu.com".charAt(3)) //p
      console.log("abc".concat("def")) //abcdef
      console.log("username=zhangsan&password=123".indexOf("=")) // 8
      console.log("username=zhangsan&password=123".lastIndexOf("=")) //26
      console.log("1980-10-11".replace("-",",")) //1980,10-11 (替换所有需要使用正则表达式)
      // 拆分字符串返回一个数组.
      var arr = "1980-11-12".split("-"); // var[] arr; 这是错误的,没有这种语法在JS当中.
      // 遍历数组
      for(var i = 0; i < arr.length; i++){ // arr.length是数组中元素的个数!
        console.log(arr[i]) // 还是使用中括号的方式加下标的方式访问数组中的元素.
      }
      // 对于substr和substring来说,只有1个参数的话没有区别.
      console.log("abcdef".substr(2)) //cdef
      console.log("abcdef".substring(2)) //cdef
      // 对于substr和substring来说,都有两个参数会有什么区别？
      // substr(startIndex, length)
      // substring(startIndex, endIndex),需要注意,不包括endIndex
      console.log("abcdef".substr(2,3)) //cde
      console.log("abcdef".substring(2,3)) //c
      console.log("ABCdef".toLowerCase()) //abcdef
      console.log("ABCdef".toUpperCase()) //ABCDEF

object类型

Object类型：
1、在JS当中内置了一个类型Object，可以将Object类型看做是所有对象的超类/基类

                2、**在JS当中默认定义的类型，没有特殊说明的话，默认继承Object**
                3、Object类型中有哪些通用属性和方法呢？
                    属性：
                        **prototype 属性** | constructor 属性
                    方法：
                        toLocaleString 方法 | toString 方法 | valueOf 方法
                    重点掌握：
                       ** prototype属性（**prototype翻译为原型）

这个属性可以给对象动态扩展属性和方法。

语法：
类型.prototype.名称（属性名或者函数名）= function（这里如果是值的话表示动态的给对象扩展属性）

JS中怎么定义类对象

1、在JS中怎么定义类？包括两种方式

                第一种方式：
                    function 类名(形式参数列表){
                        this.属性名 = 参数;
                        this.属性名 = 参数;
                        this.方法名 = function(){
                        }
                    }
                第二种方式：
                    类名 = function(形式参数列表){
                        this.属性名 = 参数;
                        this.属性名 = 参数;
                        this.方法名 = function(){
                        }
                    }

既是一个函数,同时又是一个类的定义.

函数名是:sayHello,类名是:sayHello
function sayHello(){

        } 
        sayHello = function(){
        }

调用

关键看你怎么调用,如果没有使用new运算符调用,表示普通函数调用.不会在堆中new对象.

      sayHello();

使用new运算符去调用这个函数,显然是把它当做一个类来看待,这个会导致浏览器的堆当中开辟一个新对象!

var obj = new sayHello(); // obj是一个引用,保存内存地址指向对象!

案例：

function Emp(x, y, z){
        // 属性
        this.empno = x;
        this.ename = y;
        this.sal = z;
        // 方法
        this.work = function(){
          console.log(this.ename + " is working!!!")
        }
      }

访问一个对象的属性还能这样，语法格式：引用["属性名"]

     **console.log("e4.empno = " + e4["empno"])**

null NaN undefined的区别

1、和=有什么区别？

== 等同运算符：只比较值是否相等。
=== 全等运算符：既比较值是否相等，同时又比较数据类型是否相同。
== 有点类似于Java语言中的equals方法

2、null undefined NaN的区别？

类型都是不一样的
null和undefined是等同关系。
null的类型属于原始类型,typeof运算符的结果是:object

JS的常用事件

load事件：

这个是卸载body当中的
1、load事件不是在页面加载过程中触发的。

        2、**load事件是在页面中所有的元素全部加载完毕之后才发生的。**

JS的常用事件：

学习方法：需要背会，这里列举的是常用事件，具体的可以看开发文

      （1）blur【布勒】       失去焦点
      （5）focus【佛肯死】       获得焦点
      （3）click        鼠标单击
      （4）dblclick     鼠标双击
      （6）keydown        键盘按下
      （7）keyup        键盘弹起
      （9）mousedown      鼠标按下
      （10）mouseover     鼠标经过
      （11）mousemove     鼠标移动
      （12）mouseout      鼠标离开
      （13）mouseup     鼠标弹起
      （16）submit        表单提交
      （14）reset       表单重置
      （15）select        文本被选定
      （2）change       下拉列表选中项改变，或文本框内容改变
      （8）load       页面加载完毕  
    **提醒：任何一个事件都有对应的事件句柄。事件句柄是在事件名称前添加on就行。**

事件的测试

失去焦点的作用：就是开发过程中，注册账号是账号名重复的话，就会失去焦点，提示账号名重复

测试失去焦点事件：<input type="text" onblur="console.log('失去焦点了')"/>
    <br>
测试获取焦点事件：<input type="text" onfocus="console.log('获取焦点了')"/>
    <br>

测试click事件：<input type="button" value="click事件" onclick="console.log('单击')"/>
    <br>
测试dblclick事件：<input type="button" value="dblclick事件" ondblclick="console.log('双击')"/>
    <br>

测试keydown事件：<input type="text" onkeydown="console.log('keydown....')" onkeyup="console.log('keyup....')"/>
    <br>
测试keyup事件：<input type="text" onkeyup="console.log('keyup....')" />

测试mouse相关的事件：【测试时，需要在css里面，构造一个区域】

      <div id="mouseDiv" onmouseover="console.log('鼠标经过了')"
                 onmousedown="console.log('鼠标按下了')"
                 onmouseout="console.log('鼠标离开了')"
                 onmouseup="console.log('鼠标弹起了')"
                 onmousemove="console.log('鼠标移动了')"></div>
      <br>

<body onload="console.log('页面加载完毕了!')">
    <script type="text/javascript">
    </script>
    测试选中文本事件：
    <textarea rows="10" cols="30" onselect="console.log('文本被选中了')"></textarea>
    <br>
    <input type="text" onselect="console.log('文本被选中了')"/>
    <br>
    <br>
    测试change事件：
    <select onchange="console.log('选项被修改!')">
      <option value ="">--请选择您的学历--</option>
      <option value ="gz">高中</option>
      <option value ="zk">专科</option>
    </select>
    <br>
    <br>
    测试表单的提交和重置事件：
    <form action="" onsubmit="alert('表单提交了')" onreset="console.log('表单重置了')">
      <input type="submit" value="提交"/>
      <input type="reset" value="重置"/>
    </form>
    <br>
    测试mouse相关的时间：
      <div id="mouseDiv" onmouseover="console.log('鼠标经过了')"
                 onmousedown="console.log('鼠标按下了')"
                 onmouseout="console.log('鼠标离开了')"
                 onmouseup="console.log('鼠标弹起了')"
                 onmousemove="console.log('鼠标移动了')"></div>
      <br>
  </body>

HTML+CSS+JS（四）