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>
![](https://i-blog.csdnimg.cn/blog_migrate/99bd671b6e9d9b4113f5a8f9c3bb5975.png)
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>
![](https://i-blog.csdnimg.cn/blog_migrate/08ee1f1c0e4cae10b269f4aae4503950.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7f9c4010e86da06280a413fc0ed863dc.png)
内嵌式:写在<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>
![](https://i-blog.csdnimg.cn/blog_migrate/5e04c187a0981be127571b184737938a.png)
外部写法
![](https://i-blog.csdnimg.cn/blog_migrate/ce76c4d8c5479234ce8b1bc1b11a8fbd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c60265a1c6e886820f4e985cc6d0e338.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f5d1d93c18529e84ce08ae58eb34394b.png)
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>
![](https://i-blog.csdnimg.cn/blog_migrate/5e4862e5a274a072219857da6048417c.png)
示例二:页面看不到,控制台才能看到的
<!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>
![](https://i-blog.csdnimg.cn/blog_migrate/1bd194c92493429fcb1e6bfa5932822a.png)
按F12调出控制台,找到console
![](https://i-blog.csdnimg.cn/blog_migrate/58b6c66a7667e61dc7244b85875272a4.png)
6.变量的作用:把我们输入的数据保存并使用
7.变量的使用步骤:
①声明变量
![](https://i-blog.csdnimg.cn/blog_migrate/017a54f955812004b39819c9bb1ffde6.png)
注:var是varible的简写,是万能的类型
②赋值
![](https://i-blog.csdnimg.cn/blog_migrate/5c7511f49feffe573c1c20a268f0e899.png)
8.变量的初始化:
![](https://i-blog.csdnimg.cn/blog_migrate/4fe612bd140af1282e3ffe3ef0b15ce1.png)
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>
![](https://i-blog.csdnimg.cn/blog_migrate/d7c1d37b9680571f7c54f58dc3d012ce.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1395f442ca2fbac8dc181a60fc04f0ff.png)