web复习--javascript

一念男

已于 2023-02-25 20:56:08 修改

阅读量49

点赞数

文章标签：前端 javascript html Powered by 金山文档

于 2023-02-25 20:16:01 首次发布

本文链接：https://blog.csdn.net/weixin_67916525/article/details/129219758

版权

本文介绍了JavaScript的基础知识，包括它由ECMAScript、DOM和BOM三部分组成，以及如何使用alert、console.log和prompt进行输出。还讲解了变量的作用、声明和赋值，并提供了实例展示如何通过输入框获取用户信息并显示。

摘要由CSDN通过智能技术生成

1.js由ECMAScript(js语法)、DOM(页面文档对象模型)、BOM(浏览器对象模型)三部分组成

2.alert是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>
        alert("唐伯虎");
    </script>
</head>
<body>
    
</body>
</html>

3.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>
</head>
<body>
    <input type="submit" value="唐伯虎" onclick="alert('爱秋香')">
</body>
</html>

内嵌式：写在<script></script>里

<!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>
        alert('唐伯虎爱秋香');
    </script>
</head>
<body>

</body>
</html>

外部写法

4.HTML写双引号，js写单引号

5.js输入输出语句

方法	说明	归属
alert（msg）	浏览器弹出警告框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输出框，用户可以输入	浏览器

示例一：输入框

<!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('请输入你的姓名：');
    </script>
</head>
<body>

</body>
</html>

示例二：页面看不到，控制台才能看到的

<!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>
        console.log('我是程序员看到的');
    </script>
</head>
<body>

</body>
</html>

按F12调出控制台，找到console

6.变量的作用：把我们输入的数据保存并使用

7.变量的使用步骤：

①声明变量

注：var是varible的简写，是万能的类型

②赋值

8.变量的初始化：

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 myname=prompt('你叫什么名字？');
        //输出变量信息
        alert(myname);
    </script>
</head>
<body>

</body>
</html>