<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
* 1、前端三层
* HTML 结构层 写网页结构内容 身体
* CSS 样式层 写网页样式 衣服
* JavaScript 行为层 写网页动态特效，使页面具有交互性 行为
*
*都是由浏览器解析执行，由上往下，由左往右
*
*2、发展史
* 1）1995年
* 网景联合sun发布JavaScript
* liveScript——JavaScript
* 布兰登艾奇 js之父
*
* 2）1999年
* ES5 学
*
* 3）2006年
* ES6
*
*3、JavaScript和ECMAScript
* JavaScript的组成部分：
* 1）ECMAScript 核心js
* 规定了js的基础语法：变量、数据类型、分支结构、循环结构、运算符、数组、函数、对象等
* 2）DOM 文档对象模型
* 规定了一套管理HTML文档的机制
* 3）BOM 浏览器对象模型
*
*
*
* */
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
console.log('11111');
</script>
<script src="js/02js.js"></script>
</head>
<script>
console.log('22222');
</script>
<body>
<script type="text/javascript">
console.log('3333');
</script>
<!--
4、HTML中引入js的方式
1）内部方式
<script>
js代码
</script>
可以写在页面任何位置，推荐写在body结束标签之前
一个页面可以有多个script标签
2）外部方式
①新建.js文件
②<script src=""></script>
可以写在页面任何位置，推荐写在head中
一个页面可以有多个js文件，一个外部的js文件，可以为多个HTML文件引入
ctrl+shift+J：打开控制台
-->
<h1>
<script>
console.log('4444');
</script>
</h1>
<script src="js/02js.js"></script>
</body>
</html>
<script>
console.log('555');
</script>
3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<script>
/*
* 5、js的输出方式
* 1）输出到控制台
* console.log();
*
* 2）输出到网页
* document.write();
*
* 注意：可以解析HTML的标签
* 语法：'<开始标签></结束标签>'
*
* 3）弹出警告框
* alert();
*
* 注意：会阻止页面程序的执行
*
*
* */
</script>
<h1>
<script>
document.write('你好世界');
</script>
</h1>
<script>
//输出到控制台
console.log('hello <br/> world1');
console.log('hello world2');
//输出到网页
document.write('hello <br/> world1');
document.write('<br/>');
document.write('<h1>hello world2</h1>');
//弹出警告框
alert('hello <br/> world1');
alert('hello world2');
</script>
</body>
</html>
4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
*6、js调试
* ctrl+shift+j 打开控制台
* 报错包含三部分:
* 1）错误类型
* 2）错误原因
* 3）错误位置
*
* 多个script报错：
*其中一个script报错，对其他script没有影响
*同一个script中，错误及错误后面不显示
*
* */
</script>
<script>
console.log('1-1');
console.log('1-2');
console.log('1-3');
console.log('1-4');
</script>
<script>
console.log('2-1');
console.lo('2-2');
console.log('2-3');
console.log('2-4');
</script>
<script>
console.log('3-1');
console.log('3-2');
console.log('3-3');
console.log('3-4');
</script>
</body>
</html>
