JavaScript基础

JavaScript是基于对象的语言，其被广泛应用于网页开发，常用来为网页添加各种样式的动态功能，为浏览者提供更为流畅美观的页面效果

一.概述

1.1JavaScript 是什么

        JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言，运行在客户端（浏览器），实现人机交互效果。

1.2.特点

• 向HTML页面中添加交互行为
• 脚本语言，语法和Java类似
• 解释性语言，边执行边解释

1.3. JavaScript的组成

ECMAScript: 规定了js基础语法核心知识。 比如：变量、分支语句、循环语句、对象等等

DOM:文档对象模型

        定义了访问HTML和XML文档的标准，独立于平台和语言的接口

        DOM是浏览器提供的一套专门用来操作网页内容的功能，实现网页交互

BOM:浏览器对象模型

        操作浏览器。JS同规格window对象来实现浏览器操作

二.JavaScript编写方式

1.行内：对于任何一个html元素来说，都有很多事件属性，以on开头

      <Button onclick="alert('点我啊--')">这是个按钮</Button>

2.内部脚本：将JS代码定义在HTML页面当中  <script></script> 可以出现多次，可以出现在任意位置

<script>
    alert('咬我啊--');
</script>

注意：浏览器是按照代码在文件中的顺序加载的，一般会将<script>放在HTML的底部附近

3.外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

1.定义一个js文件

 2.然后<script src="文件.js"></script>引入

<script src="show.js"></script>

注意：script标签中间无需写代码，会被忽略

三.JavaScript 输入输出

1.window.alert() 页面弹出警告对话框,没有返回值

alert("咬我啊--");

2.window.confirm() 有返回值，确定为true，取消false

var name=confirm("你的姓名：");

3.window.prompt() 带输入框有返回值，确定：返回输入内容，取消：null

prompt("你的姓名：");

4.document.write() 写入页面输出

document.write("咬我啊--");

5.console.log() 写入浏览器控制台

console.log("咬我啊--");

四.变量

变量可以存放不同类型的值，命名规则与Java一致

1.var关键字

特点：1.全局变量  2.可以重复定义

2.let关键字

特点：1.局部变量只在所在的代码块中有效 2.不能重复定义

3. const关键字

常量

<script>
        //全局变量,可重复定义 
        var a = 10;
        var a = "zhangsan"
        alert(a); //zhangsan
        {
            // 局部变量,只在当前代码块内有效
            let b = 12;
            alert(b);
        }
        alert(b);//不显示，浏览器控制台报错
        //常量
        const c=20;
        alert(c);
</script>

五.数据类型

通过typeof运算符可以获取数据的类型

注意：JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认

1.基本数据类型

1.1 number 数字型

即我们平常用到的数字，可以是整数、小数、正数、负数，在JS中，这些数通称为number类型

<script>
        // number
        console.log(typeof 3);//number
        console.log(typeof 3.12);//number
     
</script>

number类型还可以自动的将二进制，八进制，十六进制等自动的转换为十进制

<script>
        {
            //八进制
            let a=0o123;
            document.write(a);//83
        }
</script>

1.2 string 字符串型

通过单引号（''） 、双引号（""）或反引号( ` ) 包裹的数据都叫字符串

<script>
     
        // string
        console.log(typeof "a");
        console.log(typeof 'b');
</script>

1.3 boolean 布尔型

1.4 undefined 未定义型

只声明变量，不赋值的情况下，变量的默认值为 undefined

<script>
        let u;
        alert(u);//undefined
</script>

1.5 null 空类型

null 和 undefined 区别：undefined 表示没有赋值，null 表示赋值了，但是内容为空

2.引用数据类型

2.1 []数组:可以同时存储不同数据类型

<script>
        var arr=[1,2,"3",4];
        for(var i=0;i<arr.length;i++){
            console.log(arr[i]);
        }
</script>

数组的另一种用法：解构赋值 

<script>
        // 解构赋值 
        var[a,b,c]=[1,2,3];
        alert(a);//1
        alert(b);//2
        alert(c);//3
      
</script>

2.2 {}对象：键值对形式

如同java中的对象

<script>
       
        let obj={name:'zs',age:13,gender:null}
        alert(obj.name);//zs
        alert(obj.age);//13
        alert(obj.gender);//null

        var{a,b,c}={a:1,b:2,c:3};
        alert(a);//1
        
</script>

3.类型转换

3.1 隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换

转换规则：

1.+ 号两边只要有一个是字符串，都会把另外一个转成字符串

2.除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型

3.2显式转换

1.字符串转数字

Number(数据)        转换为数字，字符串都是字符才转换成功

parseInt(数据)      转换为整数,从第一个字符开始转换，直到遇到非数字结束

parseFloat(数据)    转换为小数

<script>
            document.write(Number("12A"));//NaN
            document.write(parseInt("12.3"));//12
            document.write(parseFloat("12.3a"));//12.3
</script>

2.其他类型转boolean

Boolean(数据)

       数字:0和NaN为false

       字符串:空字符串为false

       null和undefined:均转为false

 <script>
          document.write(Boolean(0));//false
          document.write(Boolean(null));//false
</script>

3.其他类型转字符串

                数据+""

                String(数据)

六.流程控制

1.运算符

1.1赋值运算符

对变量进行赋值的运算符

如：=或+=或*=

1.2比较运算符

比较两个数据大小、是否相等

如：>=或<=或==或===

注：==与===

==：左右两边值是否相等  ===：左右两边是否类型和值都相等

<script>
        // ==与===
        var a=10;
        console.log(a==10);/* true */
        console.log(a==="10");/* false */
        console.log(a===10);/* true */
</script>

1.3逻辑运算符

&&和||和！

2.语句

三大流程控制语句（顺序，分支，循环），与java一样不做演示

七.函数

函数是独立完成某个功能的代码段

1.系统函数

JS中自带的函数

如window.alert(数据) ：输出数据到警告框  

eval("str"):把字符串当做js代码执行

2.自定义函数

注：1.在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用

2。return函数可以没有 return，这种情况函数默认返回值为 undefined

1.使用function关键字

function 函数名(参数列表){函数体}

        add(1,3);
        function add(x,y){
            let z=x+y;
            console.log(z);//4
        }

2.匿名函数

2.1函数表达式

将匿名函数赋值给一个变量，并且通过变量名称进行调用 我们将这个称为函数表达式

let 函数名=function(参数列表){函数体}

        // 函数表达式
        let a=function(x){
            return x;
        }
        console.log(a(1));//1

2.2箭头函数

(参数列表)=>{函数体}

<script>
        //箭头函数
        let num=(x)=>{
            return x;
        }
        console.log(num(1));//1
</script>

2.3自调函数(立即执行函数)

自调函数又叫立即执行函数，无返回值

(函数)(参数列表)

<script>
        //自调函数
        (function(x,y){
            let z=x*y;
            console.log(z);//7
        })(3,4);
</script>

3.函数特性

3.1函数嵌套：函数中可以嵌套函数使用

JS可以在方法中定义方法使用，这是Java所没有的

<script>
        let o= function method1(){
            alert("method1");
            let i=function method2(){
                alert("method1中的method2");
            }
            i();
        }
        o();
    </script>

3.2函数回调：函数可作为另外函数的形参传递

JS中函数也可以作为形参传递给其他函数

// 回调函数
        function fun(callback){
            callback();
        }
        function fun1(){
            alert("hello");
        }
        fun(fun1);

应用场景：

系统函数setInterval可以当做一个计时器，表示每隔多少时间执行传来的函数

// 每隔一段时间来执行,第一个参数表示要执行的程序，第二个参数表示时间间隔
function fun1(){
    alert("hello 1");
}
// 第一个参数表示要执行的程序，第二个参数表示时间间隔(毫秒)
setInterval(fun1, 4000);

系统函数setTimeout可以当做一个延时器，表示多少时间之后再来执行传来的函数

// 3.延时器,延迟执行任务 setTimeout，返回值是该延时器的id
function fun2(){
    alert("hello 2");
}
const id=setTimeout(fun2,5000);
// 4.clearTimeout(id) 清除延时执行器

3.3场景：验证码

当我们要获取验证码时，点击发送验证码，验证码的框就会进入倒计时，这期间我们需要等待验证码传来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="bt">发送验证码</button>
    <script src="../js/定时器.js"></script>
</body>
</html>

const bt=document.querySelector('.bt');
bt.onclick=function(){
    bt.disabled=true;
    let i=5;
    let id=setInterval(() => {
        if(i>=0){
            bt.innerHTML=(i--)+'s后重新发送验证码';
        }else{
            clearInterval(id);
            bt.innerHTML='发送验证码';
            bt.disabled=false;
            return;
        }
    }, 1000);
    
}