2023百度前端实战训练营04DAY

最新推荐文章于 2024-07-19 11:00:40 发布

小许在线摸鱼

最新推荐文章于 2024-07-19 11:00:40 发布

阅读量327

点赞数

分类专栏：前端文章标签： html5 css javascript Powered by 金山文档

本文链接：https://blog.csdn.net/WingDriver/article/details/128592619

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一.正文：js基础

本文代码微瑕欢迎大家指正

1 js三种书写位置

<!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>
    
    <!-- 2.内嵌式的js -->
    <!-- <script>
        alert('test2')
    </script> -->


    <!-- 3.外部js scripe 双标签 -->
    <script src="my.js"></script>
</head>
<body>
    <!-- 1.行内式的js 直接写在元素的内部 -->
    <!-- <input type="button" value="test" onclick="alert('test')">
     -->
</body>
</html>

2 js注释

<!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>
    <script>
        // 1.单行注释
        /* 2.多行注释 shift+alt+a
        2.
        2. */
    </script>
</head>
<body>
    
</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>
    <script>
        // 输入框
        prompt('请输入年龄');
        //警示框
        alert('计算的结果是');
        //控制台输出
        console.log('hello');
    </script>

     
</head>
<body>
    
</body>
</html>

4 变量初始化

<!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>
    <script>
        var myname = 'xxb';
        console.log(myname);
    </script>
</head>
<body>
    
</body>
</html>

5 变量例子

<!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>
    <script>
        var myname = prompt('请输入姓名');
        alert('欢迎'+myname);
    </script>


</head>
<body>
    
</body>
</html>

6 变量语法

<!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>
    <script>
        // 1.更新变量
        var myname = 'pink';
        console.log(myname);
        myname = '111';
        console.log(myname);

        // 2.声明多个变量
        var a=1,b=2,c=3;

        // 3.只声明不赋值 输出为undefined
        

    </script>
</head>
<body>
    
</body>
</html>

7 转义字符

<!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>
    <script>
        //字符串转义字符
        var str = '一个"秃头的\n"程序员';
        console.log(str);
    </script>

</head>
<body>
    
</body>
</html>

8 字符串长度与拼接

<!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>

    <script>
        //1.字符串长度
        var str = 'my name is xxb';
        console.log(str.length);
        //2。字符擦拼接
        console.log('你是个'+'好人')
    </script>

</head>
<body>
    
</body>
</html>

9 字符串拼接

<!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>
    <script>
        var age = 20;
        console.log('xxb'+age+'岁');
    </script>
</head>
<body>
    
</body>
</html>

10 显示年龄

<!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>
    <script>
        var age = prompt('请输入年龄');
        var str = '您今年'+age+'岁了';
        alert(str);
    </script>
</head>
<body>
    
</body>
</html>