js基础入门篇

news2024/10/25 8:36:00

1.输出语句，内部样式，外部样式，数组定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    

    <!-- 先执行内部js 在执行外部js -->

    <!-- 内部js -->
    <script type="text/javascript">
        // 输出语句
        document.write("Hello World<br>")
    </script>
    
    <!-- 外部js -->
    <script type="text/javascript" src="./js/js入门基础.js"></script>

</head>

<body>
    


</body>
</html>

js入门基础.js


a=10;
b=20;
document.write("A"+a+b+"<br>");
document.write(a/b+"<br>");    //自动转化为double类型

//两种定义方式
arr=["东野圭吾","刘慈欣","路遥","霍达"];
arr2=new Array("莫言","金庸","余华","麦家","山田宗树");
for( i=0;i<arr.length;i++){
    document.write(arr[i]+"<br>");
}
document.write("----------<br>")
for(i=0;i<arr2.length;i++){
    document.write(arr2[i]+"<br>")
}

mp=(1,"one");
document.write(mp);//打印value

打印的效果

2.报警框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        //报警框
        alert("报告 有问题");
        
    </script>


</head>


<body>

</body>
</html>

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>

    <script>
        // 确定框
        flag=confirm("俺是确认框");
        if(flag){
            document.write("你点击了确定按钮")
        }
        else{
            document.write("你点击了取消按钮")
        }


    </script>


</head>


<body>

</body>
</html>

假设你点击了确定框

会有如下效果

4.提示框

其实和那个确认框差不多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        // 提示框
        name=prompt("请输入你的姓名：","hover");
        if(name!=null||name!=""){
            document.write("hello"+name)
        }


    </script>


</head>


<body>

</body>
</html>

点击确定会打印，如下所示

5.小练习打印1到n的总和，利用报警框提示

代码如下

;<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        n=prompt("请输入你要计算前缀和");
        sum=0;
        for(i=1;i<=n;i++)   sum+=i;
        alert("1到"+n+"的累加和为："+sum);
    
    </script>   

</head>

<body>
  
</body>

</html>

假设输入100那么会计算出结果为5050如下图所示

6.利用超链接调用函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <script>
        function sum(a,b){
            document.write(a+b)
            // alert(a+b)
        }


    </script>
</head>
<body>
    <a href="JavaScript:sum(2,2)">累加和</a> 
</body>
</html>

点击网页累加

会显示如下结果

7.利用点击事件调用js函数，报警框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function f(a,b,c){
            s=parseInt(a.value)+parseInt(b.value)+parseInt(c.value);
            alert(s);   //报警框显示
        }

    </script>

</head>
<body>
    <form action="">
        第一个数<input type="text" name="a"> <br>
        第二个数<input type="text" name="b"> <br>
        第三个数<input type="text" name="c"> <br>
        <input type="button" onclick="f(a,b,c)" value="求和">
    </form>
</body>
</html>

在前端中输入三个数点击求和，就和计算出结果