js基础day1

澈如冬雪^

已于 2023-03-08 09:32:51 修改

阅读量73

点赞数

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

于 2023-03-07 09:51:37 首次发布

本文链接：https://blog.csdn.net/m0_52372037/article/details/129346774

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、javascript简介和体验

在这里插入图片描述

1.javascript是什么

在这里插入图片描述
可以进入权威网站mdn查阅资料

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pink {
            background-color: pink;
        }
    </style>
</head>

<body>
    <button class="pink">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <script>
        let bts = document.querySelectorAll('button')
        for (let i = 0; i < bts.length; i++) {
            bts[i].addEventListener('click', function () {
                document.querySelector('.pink').className = ''
                this.className = 'pink'
            })
        }
    </script>
</body>

</html>

2.javascript书写位置

（1）内部javascript

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 内部js -->
    <script>
        // 页面弹出警示框
        alert('你好啊')
    </script>
</body>

</html>

（2）外部javascript

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="./js/my.js">
        // 中间不允许写内容
    </script>
</body>

</html>

alert('我是外部的js文件')

（3）内联javascript

在这里插入图片描述

练习

在这里插入图片描述

（1）外部

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="./js/lianxi.js">

    </script>
</body>

</html>

alert('努力、奋斗')

（2）内部

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        alert('努力、奋斗')
    </script>
</body>

</html>

3.javascript的注释

4.javascript的结束符

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript注释和结束符</title>
</head>

<body>
    <script>
        // 1.javascript注释
        //  1.1单行注释 ctrl + /
        // 1.2多行注释 shift + alt + a

        // 2.javascript结束符
        // alert('第一句话');
        // alert('第二句话');
        alert('第一句话')
        alert('第二句话')
    </script>
</body>

</html>

5.输入输出语法

console.log简写
在这里插入图片描述
在控制台中显示

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.文档输出内容
        // 中文一定要加引号
        document.write('我是div标签')
        // 这个输出可以识别标签 document.write可以直接往里面写字，也可以写标签
        document.write('<h1>我是标题</h1>')
        // 2.控制台打印输出 给 程序员
        console.log('看看对不对')
        // 3.输入语句
        prompt('请输入你的年龄：')
    </script>
</body>

</html>

在这里插入图片描述

练习（1）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        alert('你好 js')
    </script>
</body>

</html>

练习（2）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 页面中打印输出javascript 我来咯 -->
    <script>
        document.write('javascript 我来咯')
    </script>
</body>

</html>

练习（3）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 页面控制台输出：它会魔法吧~ -->
    <script>
        console.log('它会魔法吧~')
    </script>
</body>

</html>