目录
1 JavaScript简介
1.1 JavaScript是什么
JavaScript是web开发领域中功能强大的编程语言（脚本语言），在浏览器上运行的解释性语言，不要需环境。
1.2 HTML5 CSS3 JavaScript关系*
HTML5 称为结构： 从语义化的角度来描述页面
css3 称为表现或者样式： 从审美的角度来美化页
JavaScript 称为行为： 从交互的角度来提升用户体验
1.3 JavaScript的由来
1995年，NetScape(网景)公司布兰度.艾奇，用不到两周的时间设计出了能在网页上实现动态效果的编程语言，起初名为liveScript。
随后网景公司与Sun公司合作(Sun以Java出名)，为蹭热度将其改名为JavaScript。
也就是说，JavaScript和Java没有任何关系。*
1.4 JavaScript与ECMAScrit的关系
1996年，NetScape(网景)把JavaScript内置于Navigator2.0浏览器中。同年，微软公司开发JScript并将其内置于IE3.0中发布。NetScape(网景)公司面临失去主导权，将JavaScript提交到ECMA国际（欧洲计算协会），希望JavaScript成为国际标准。
ECMA 规定了浏览器脚本的标准——ECMAScript（JavaScript和JScript的扩展）---es5
2015年6月，ECMA开发新的标准——ECMAScript ---es6
1.5 JavaScript有哪三大部分组成*
ECMAScript 或叫 JavaScript 核心语法
DOM(Document Object Model) 文档对象模型
BOM(Browser Object Model) 浏览器对象模型
1.5.1 ECMAScript
ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。
ECMAScript：ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
1.5.2 DOM ——文档对象模型
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
1.5.3 BOM ——浏览器对象模型
BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
2 了解JavScript的内核和引擎
浏览器分成两部分：渲染引擎和 JS 引擎。
- 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit。
- JS 引擎：也称为 JS 解释器。 用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8。
浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。
JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。
渲染引擎---用来解析HTML与CSS，俗称内核
比如： Google (开发商)---chrome(浏览器)---webkit blink
微软公司 IE浏览器 Trident内核
Mozilla公司 Firefox浏览器 Gecko内核
JS 引擎-----内置 JavaScript 引擎(解释器)
比如： chrome 浏览器的 V8引擎
Mozilla公司的js引擎 SpiderMonkey
Edge Chakra(查克拉)
3 JavScript的第一句代码
语法规则
1.对空格，缩进，换行不敏感
2.区分大小写
3.每一条语句结束，最好有结束符 (分号;)
4.符号一定是半角英文
注释 ： 行// 快捷键：ctrl+/
块注释： /* */ 快捷键：shift+alt+A
<script>
alert('hello world~~~'); //弹出一个警告框
Alert('good~~~'); //Uncaught ReferenceError: Alert is not defined
//JavaScript对大小写敏感，上述Alert应为alert
</script>4 JavaScript引入的方法
CSS 与 JavaScript的区别
css 引入
1.行内式
2.内嵌式 （头部）
<style>
</style>3.外链式
<link rel="stylesheet" href="">JavaScript引入
1. 行内式
2. 内嵌式 （在页面任何位置都可以）
3. 外链式
<script src="./js/04.js"></script> <button onclick="alert('Hello World!')">点击</button>
<!-- href="javasrcipt:;" 阻止默认跳转动作 (相当于# 空链接)-->
<a href="javasrcipt:;" onclick="alert('good job!')">单击</a>
<a href="javascript:alert('gg')">点击</a>
<script src="js/04.js"></script>
<script>
alert('Hello World~~~');
</script>5 输入输出语句
5.1 输出语句
三个输出语句
1.alert('');
<script>
alert('Hello World!');
</script>会在网页中弹出警告框，在网页中的效果如图所示。
该方法没有返回值。如果再输出函数的调用，结果为undefined。
<script>
alert('hello~~'); //网页中会出现警告框
alert(alert('hello~~\nworld'));//先后弹出'hello world'和undefined
</script>2. console.log();
<script>
console.log();
</script>多使用该语句输出，报错信息可以直接在控制台中查看。
<script>
console.log('very good~~~');
console.log('very good~~~');
console.log('very good~~~');
console.log('nice');
console.log('123+56');
console.log(123 + 56);
console.log("very'good'");
console.log('very"good"')l
console.log("very\"good\"");
console.log('very\\goo\\\\d');
console.log('very\ngood');
console.log(alert('good'));
</script>在控制台中显示的结果如图所示。
3. document.write();
<script>
document.write();
</script>该方法可在文档页面输出，可以解析html标签。
<script>
document.write('very');
// document.write(very); very is not defined
document.write('<h2>我是<br>段落</h2>');
</script>在页面中的效果如图所示。
5.2 输入语句
1. prompt('');
<script>
prompt('请输入一个数字');
</script>该语句效果如图所示。
prompt()不同于alert()，存在返回值。
<script>
var num = prompt("请输入一个数字");
alert(num);
console.log(num);
document.write(num);
</script>在定义设置变量num存储prompt()语句的返回值，并让其分别在警告框，控制台和网页中输出。在这里输入数字10，效果如图所示。
注意，若prompt()语句采用下述方式，则弹出的输入框中默认值为100。
<script>
prompt("请输入一个数字", 100);
</script>
6 小练习
分别打开百度与知乎，在控制台中可以看到如下画面。尝试自己在控制台中输出该画面。
6.1 某度
<script>
console.log("这是一个最好的时代，\n科技的发展给予了每个人创造价值的可能性；\n这也是一个最充满想象的时代，\n每一位心怀梦想的人，终会奔向星辰大海。\n百度与你们一起仰望星辰大海，携手共筑未来！");
console.log("%c%s", "color: red;", "百度2023校园招聘简历投递：https://talent.baidu.com/jobs/list");
</script>也可以通过使用反引号输出。
<script>
console.log(`这是一个最好的时代，
科技的发展给予了每个人创造价值的可能性；
这也是一个最充满想象的时代，
每一位心怀梦想的人，终会奔向星辰大海。
百度与你们一起仰望星辰大海，携手共筑未来！`);
console.log(`%c百度2023%c校园招聘简历投递：https://talent.baidu.com/jobs/list`, `color: red`, `color: orange`);
</script>6.2 某乎
<script>
console.log('\n _____ _____ _____ _____ \n /\\ \\ /\\ \\ /\\ \\ /\\ \\ \n /::\\____\\ /::\\ \\ /::\\ \\ /::\\ \\ \n /:::/ / \\:::\\ \\ /::::\\ \\ /::::\\ \\ \n /:::/ / \\:::\\ \\ /::::::\\ \\ /::::::\\ \\ \n /:::/ / \\:::\\ \\ /:::/\\:::\\ \\ /:::/\\:::\\ \\ \n /:::/____/ \\:::\\ \\ /:::/__\\:::\\ \\ /:::/__\\:::\\ \\ \n /::::\\ \\ /::::\\ \\ /::::\\ \\:::\\ \\ /::::\\ \\:::\\ \\ \n /::::::\\ \\ _____ ____ /::::::\\ \\ /::::::\\ \\:::\\ \\ /::::::\\ \\:::\\ \\ \n /:::/\\:::\\ \\ /\\ \\ /\\ \\ /:::/\\:::\\ \\ /:::/\\:::\\ \\:::\\____\\ /:::/\\:::\\ \\:::\\ \\ \n/:::/ \\:::\\ /::\\____\\/::\\ \\/:::/ \\:::\\____\\/:::/ \\:::\\ \\:::| |/:::/__\\:::\\ \\:::\\____\\\n\\::/ \\:::\\ /:::/ /\\:::\\ /:::/ \\::/ /\\::/ |::::\\ /:::|____|\\:::\\ \\:::\\ \\::/ /\n \\/____/ \\:::\\/:::/ / \\:::\\/:::/ / \\/____/ \\/____|:::::\\/:::/ / \\:::\\ \\:::\\ \\/____/ \n \\::::::/ / \\::::::/ / |:::::::::/ / \\:::\\ \\:::\\ \\ \n \\::::/ / \\::::/____/ |::|\\::::/ / \\:::\\ \\:::\\____\\ \n /:::/ / \\:::\\ \\ |::| \\::/____/ \\:::\\ \\::/ / \n /:::/ / \\:::\\ \\ |::| ~| \\:::\\ \\/____/ \n /:::/ / \\:::\\ \\ |::| | \\:::\\ \\ \n /:::/ / \\:::\\____\\ \\::| | \\:::\\____\\ \n \\::/ / \\::/ / \\:| | \\::/ / \n \\/____/ \\/____/ \\|___| \\/____/ \n');
</script>同样可以通过使用反引号输出。
<script>
console.log(`
_____ _____ _____ _____
/\\ \\ /\\ \\ /\\ \\ /\\ \\
/::\\____\\ /::\\ \\ /::\\ \\ /::\\ \\
/:::/ / \\:::\\ \\ /::::\\ \\ /::::\\ \\
/:::/ / \\:::\\ \\ /::::::\\ \\ /::::::\\ \\
/:::/ / \\:::\\ \\ /:::/\\:::\\ \\ /:::/\\:::\\ \\
/:::/____/ \\:::\\ \\ /:::/__\\:::\\ \\ /:::/__\\:::\\ \\
/::::\\ \\ /::::\\ \\ /::::\\ \\:::\\ \\ /::::\\ \\:::\\ \\
/::::::\\ \\ _____ ____ /::::::\\ \\ /::::::\\ \\:::\\ \\ /::::::\\ \\:::\\ \\
/:::/\\:::\\ \\ /\\ \\ /\\ \\ /:::/\\:::\\ \\ /:::/\\:::\\ \\:::\\____\\ /:::/\\:::\\ \\:::\\ \\
/:::/ \\:::\\ /::\\____\\/::\\ \\/:::/ \\:::\\____\\/:::/ \\:::\\ \\:::| |/:::/__\\:::\\ \\:::\\____\\
\\::/ \\:::\\ /:::/ /\\:::\\ /:::/ \\::/ /\\::/ |::::\\ /:::|____|\\:::\\ \\:::\\ \\::/ /
\\/____/ \\:::\\/:::/ / \\:::\\/:::/ / \\/____/ \\/____|:::::\\/:::/ / \\:::\\ \\:::\\ \\/____/
\\::::::/ / \\::::::/ / |:::::::::/ / \\:::\\ \\:::\\ \\
\\::::/ / \\::::/____/ |::|\\::::/ / \\:::\\ \\:::\\____\\
/:::/ / \\:::\\ \\ |::| \\::/____/ \\:::\\ \\::/ /
/:::/ / \\:::\\ \\ |::| ~| \\:::\\ \\/____/
/:::/ / \\:::\\ \\ |::| | \\:::\\ \\
/:::/ / \\:::\\____\\ \\::| | \\:::\\____\\
\\::/ / \\::/ / \\:| | \\::/ /
\\/____/ \\/____/ \\|___| \\/____/ `);
</script>
515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
