javascript

javascript介绍

JavaScript 是一种客户端脚本语言。运行在客户端浏览器中，每一个浏览器都具备解析 JavaScript 的引擎。

脚本语言：不需要编译，就可以被浏览器直接解析执行了。
核心功能就是增强用户和 HTML 页面的交互过程，让页面有一些动态效果。以此来增强用户的体验！

组成部分
ECMAScript、DOM、BOM

javascript在html页面中的位置

内部方式
在<body>标签下通过<script>标签编写代码。
注意:<script>这个标签必须双标使用</script>
外部方式
定义独立的 js 文件，将代码编写在文件中，
在 HTML 文件的<body>标签下通过<script src=文件路径>来引入 js 文件。

注释

单行注释
// 注释的内容
多行注释
/*
注释的内容
*/

输入输出语句

输入输出语句
输入框
prompt(“提示内容”);
弹出警告框
alert(“提示内容”);
控制台输出
console.log(“显示内容”);
页面内容输出
document.write(“显示内容”);
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入输出语句</title>
</head>
<body>
    
</body>
<script>
    //输入弹框
    // prompt("请输入数据:");
    
    //弹出警告框
    alert("hello");//使用频率高

    //控制台输出
    console.log("hello fs");//使用频率高

    //向页面输出内容
    //document.write("hello world");//不会换行
    //document.write("<br/>");//借助br标签换行
    //document.write("hello world");

</script>
</html>

常量和变量

JavaScript 属于弱类型的语言，定义变量时不区分具体的数据类型。

定义局部变量
变量名 = 值;

定义全局变量
变量名 = 值;

定义常量
const 常量名 = 值;

<script>
    //定义一个局部变量
    let name = "张三";
    let age = 23;
    let boolean = true;
    document.write(name+","+age+","+boolean+"<br/>")

    //这是局部代码块
    {
        //定义局部变量
        let l1 = "aa";
        //1.全局变量前面可以不需要任何修饰符
        l2 = "bb"
        //2.var 全局变量
        var l3 = "cc"
    }
    // document.write(l1);//这里报错,下面的就不会执行了
    document.write(l2+"<br/>");
    document.write(l3+"<br/>");

    //定义常量
    const pi = 3.1415926;
    // pi = 3.1;// 常量不能再次赋值
    document.write(pi);
</script>

数据类型

在这里插入图片描述
typeof 方法
typeof 用于判断变量的数据类型

<script>  
    //typeof() 通过变量值返回数据类型
    let l1 = true;
    document.write(typeof(l1)+"<br/>");//boolean
    let l2 = null;
    document.write(typeof(l2)+"<br/>");//null   实际输出 是Object  是js原始的一个错误

    let l3;
    document.write(typeof(l3)+"<br/>");//undefined:代表未定义   

    let l4 = 10;
    document.write(typeof(l4)+"<br/>");//number
    
    let l5 = "hello";
    document.write(typeof(l5)+"<br/>");//string

    let l6 = 100n;
    document.write(typeof(l6)+"<br/>");//bigint

</script>

运算符

除了下面的两种区别以外,其余的运算符与java中的几乎一致
在这里插入图片描述

<script>
    let num = "10";
    document.write(num + 5 +"<br/>")//105//数字与字符串通过+号连接是拼接字符串
    document.write(num + "5" +"<br/>")//105
    document.write(num - 5 +"<br/>")//5
    document.write(num * 5 +"<br/>")//50 字符串类型数字进行除了+法运算,会自动类型转换

    let num2 = 10;
    document.write(num == num2);//true  == 只比较数据值
    document.write(num === num2);//false === 比较数据类型&&数据值
</script>

三元运算符

与java的一样

三元运算符格式
(比较表达式) ? 表达式1 : 表达式2;

执行流程
如果比较表达式为true，则取表达式1
如果比较表达式为false，则取表达式2

流程控制语句和循环语句

<script>
    //和java一模一样
    //定义变量age并赋值 用ifelse判断年龄大于18的在控制台输出

    let age = 18;
    if(age===18){
        console.log("你年龄复合要求,欢迎来到午夜时刻");
    }else{
        console.log("少年,好好学习吧!");
    }


    console.log("0-100之间的偶数为:")
    //打印偶数0-100的
    for(let i = 0;i<=100;i++){
        if(i%2===0){
            document.write(i+",")
            console.log(i+",")
        }
    }
    
    //while
    let i = 0;
    while(i<=100){
        if(i%2==0){
            console.log("while,"+i+",")
        }
        i++;
    }
</script>

数组

数组
数组的使用和 java 中的数组基本一致，但是在 JavaScript 中的数组更加灵活，数据类型和长度都没有限制。

定义格式
let 数组名 = [元素1,元素2,…];

索引范围
从 0 开始，最大到数组长度-1

数组长度
数组名.length

数组高级运算符…
数组复制
合并数组
字符串转数组

<script>
   //定义一个数租
   let arr = [10,20,30];
    
   document.write(...arr+"<br>");
   document.write("====上面是...arr打印输出====<br>")
   //在js中数组的长度是可以变化的
   arr[3] = 40;
   //遍历数组
   for(let i = 0; i<arr.length;i++){
       document.write(arr[i]+"<br/>")
   }
   document.write("=====================<br>")
   //数组的高级运算符
   //复制数组将arr复制给arr2
   let arr2 = [...arr];
   for(let i = 0; i<arr2.length;i++){
       document.write(arr2[i]+"<br/>")
   }
   document.write("=====================<br>")

   //合并数组
   let arr3 = [40,50,60];
   let arr4 = [...arr2,...arr3];
   for(let i = 0; i<arr4.length;i++){
       document.write(arr4[i]+"<br/>")
   }
   document.write("=====================<br>")

   //将字符串转成数组
   let arr5 = [..."xiaofu"];
   for(let i = 0; i<arr5.length;i++){
       document.write(arr5[i]+"<br/>")
   }
   document.write("=====================<br>")
</script>

函数(方法)

函数类似于 java 中的方法，可以将一些代码进行抽取，达到复用的效果。

定义格式
function 方法名(参数列表) {
方法体;
return 返回值;
}

可变参数
function 方法名(…参数名) {
方法体;
return 返回值;
}

匿名函数
function(参数列表) {
方法体;
}

<script>
    //定义无参无返回值函数
    function f1(){
        document.write("hello xiaofu"+"<br>");
    }

    //调用方法
    f1();

    //定义一个有参有返回值
    function getSum(num1,num2){
        return num1+num2;
    }

    //调用方法
    let sum = getSum(10,20);
    document.write(sum+"<br>")


    //定义一个方法,,可变参数对n个数字求和 这里是方法的重载
    function getSum(...params){
        let sum = 0;
        for(let i = 0;i<params.length;i++){
            sum +=params[i];
        }
        return sum;
    }

    //调用可变参数的方法
    let resout = getSum(10,20,30);
    document.write(resout+"<br>")

    //匿名函数  function也可以作为一个变量,将函数作为值赋值给变量
    let fun = function(){
        document.write("hello"+"<br>");
    }
    //调用
    fun();


    //定义一个函数来作为一个变量的值
    let a = function(){
        let sum = 0;
        for(let i = 0;i<=100;i++){
            sum+=i;
        }
        return sum;
    }
    //调用核函数并打印到页面
    document.write(a());
</script>

javascript基本语法(输入输出语句,变量常量,数据类型,运算符,流程控制语句,数组,函数)