前端学习之JavaScript基础语法三种引入方式、三种输出方式、输入框、确认框、循环加强、arguments

最新推荐文章于 2024-08-18 20:42:40 发布

板栗妖怪

最新推荐文章于 2024-08-18 20:42:40 发布

阅读量341

点赞数 3

分类专栏：前端学习文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/banliyaoguai/article/details/137057949

版权

前端学习专栏收录该内容

32 篇文章 0 订阅

订阅专栏

三种引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 
        三种引入方式：
            1、行内 直接在标签内写代码（不建议）区别字符串双引号和外部结构双引号冲突问题
            2、内部 通过标签（script）书写代码
            3、外部 通过（.js）文件编写代码 推荐
     -->
        <script src="../js文件/1.1测试js.js"></script>
        <script>
            alert("hello js1");
        </script>
    </head>
<body>
    <!-- 1、行内 -->
    <button onclick="alert('hello js');alert('再次点击')">点击弹出提示框</button>
</body>
</html>

三种输出方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三种输出方式</title>
    <!-- script可以多次引入 -->
    <script>
        // 记得语句后面添加分号
        // 弹出框
        window.alert('hello js1.2');
        // 控制台
        console.log('username:zhangsan');//建议用它
        // 页面
        document.write("username:zhangsan");
    </script>
</head>
<body>
    <!-- 
        三种输出方式：
            1、弹出框的形式
                window.alert()
                    window表示全局对象，在js的编程过程一直都在，这个window可以省略
            2、浏览器控制台形式
                通过console.log()这个变量
            3、页面输出形式
     -->
</body>
</html>

运行结果

弹出框（警告框）

控制台

页面

变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量</title>
    <script>
        // let创建的变量，最小作用域是代码块级别的
        // var创建的变量 最小作用域函数级别
        // 无声创建的变量 最小作用域是全局
        // 建议使用let
        // 出了代码块a就不顶用了，控制台会报错
        if(true){
            let  a = 11
        }
        console.log(a)
    </script>
</head>
<body>
</body>
</html>

确认框、输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        // confirm确认框，里面内容是问题
        // 当点击取消是confirm会返回一个flase
        // 当点击确定是会返回一个true
        resule = confirm('请问你是中学生吗')
        if(resule){
            console.log('我也是')
        }
        else{
            alert('我是')
        }
        //prompt 输入框,下面代码  中逗号后面的18是一个默认值，可以写可以不写
        // 这种输入框，容易进行跨站脚本攻击
        result1 = prompt('请问你今年几岁','18')
        alert(result1)
    </script>
</body>
</html>

运行结果

确认框

输入框

循环加强

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环加强</title>
</head>
<body>
    <script>
        // for in  用来迭代数组或对象
        arr = [1,2,3,4]
        for (let i in arr){
            console.log(arr[i])
        }
        //创建一个对象
        let obj = new Object()
        obj.name = 'zhangsan'
        obj.age = 19
        obj.tel = 12312413
        // 遍历对象的时候i是属性名称
        for (let i in obj){
            console.info(i,obj[i]) 
        }
        // for of,遍历数组比较方便
        for(let element of arr){
            console.info(element)
        }
    </script>
</body>
</html>

arguments

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数</title>
</head>
<body>
    <script>
        // js的函数，对函数的形参和实参的匹配度完全没有要求
        // 可以通过对函数的调用arguments获取其他输入的值
        // 这样可以做一些拓展操作，还可以通过arguments的个数不同，做一些别操作
        function getCircleArea(r,PI=3.14){
            for (let i of arguments){
                console.log(i)
            }

            return PI*r*r
        }
        // 这样也可以调用体现了 js的函数，对函数的形参和实参的匹配度完全没有要求
        console.log(getCircleArea(3,PI=3.1415926,123,123,43123,123,45))
    </script>
</body>
</html>