网页开发三剑客：HTML、CSS与JavaScript详解-优快云博客

本文链接：https://blog.youkuaiyun.com/liaozhixiangjava/article/details/129784580

1.1 网页组成标准

HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。
CSS是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。
javascript是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。

1.2 javascript概述

JavaScript主要用于HTML页面当中，写在HTML源码中
JavaScript是因特网上最流行的脚本语言，它存在于全世界所有的Web浏览器中，能够增强用户与Web站点和Web应用程序之间的交互。
JS是弱类型语言，没有类型声明，它的变量不必具有一个明确的类型。
JS是脚本语言。换句话说，能够用来编程的并且直接执行源代码的语言，就是脚本语言。
JS也是解释性的语言。何为解释性语言？是在运行的时候将程序直接翻译成机器语言。

1.3 javascript能干什么？

1. 常见的网页效果【表单验证，轮播图......】
2. 与H5配合实现游戏【水果忍者： http://www.jq22.com/demo/html5-fruit-ninja/】
3. 实现应用级别的程序【http://naotu.baidu.com】
4. 实现统计效果【http://echarts.baidu.com/examples/】
5. 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】
6. 在线学编程【https://codecombat.163.com/play/】
7. js可以实现人工智能【面部识别】
8. ......

1.5 javscript的组成

组成部分	作用
ECMAScript	构成了JS的核心语法
BOM	Browser Object Model【浏览器对象模型】，用来操作浏览器上的对象
DOM	Document Object Model【文档对象模型】，用来操作网页中的元素

ECMAScript: 定义了javascript的语法规范,描述了语言的基本语法和数据类型
BOM (Browser Object Model): 浏览器对象模型
- 有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。
- 比如：弹出框、浏览器跳转、获取分辨率等
DOM (Document Object Model): 文档对象模型
- 有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。
- 比如：增加个 div，减少个 div，给div 换个位置等

总结： JS 就是通过固定的语法去操作浏览器和标签结构来实现网页上的各种效果

javascript基本使用

2.1 JS 嵌入方式

在 HTML 中使用 JS 可以用以下几种方式实现：

行内式
内嵌式
外部引用 js 文件

行内式，可以在 html 元素中直接用使用 js 语句，但是一般都是调用函数或简短的语句。

<input type="button" value="Click Me!" onclick="alert('Hellow World')">

内嵌式，一般用于实现比较小的功能，代码不长的情况

<script>
    alert('Hello World');
</script>

外部JS文件，最常见的方式

<script src="my.js"></script>

2.2 JS 注释

// 单行注释    
/*  多行注释 */

2.3 JS 输入输出语句

alter/prompt/confirm来源于window对象

alert(msg)  // 浏览器弹出框
console.log(msg)  // 浏览器控制台打印输出信息
prompt(info)  // 浏览器弹出输入框，用户可以输入
confirm()

2.4 JS事件

标签的事件属性

<button onclick = "alert('123')">点我</button>

<button onclick = "a();">点我</button>

a()====>函数
function a(){

}


onclick         // 鼠标点击左键
ondbclick       // 鼠标双击
oncontextmenu   // 鼠标点击右键
mousedown       // 鼠标按键被按下
mouseup         // 松开鼠标按键
onselect        // 文本被选中
oncopy          // 元素内容被复制
onmouseenter    // 鼠标移动到事件监听的元素内（不区分子元素）
onmouseover     // 鼠标移动到有事件监听的元素或它的子元素内
onmouseleave    // 鼠标离开元素外（不区分子元素）
onmouseout      // 鼠标离开元素，或它的子元素外
onfocus         // 获得鼠标焦点(点击input输入框)
onblur          // 失去鼠标焦点（进入其他input输入框）
onmousemove     // 鼠标移动
onmouseup       // 鼠标弹起
onmousedown     // 鼠标按下