[TOC]
目标
- 理解
- 理解JavaScript的基本结构
- 掌握JavaScript页面中的应用
- 掌握脚本的基本语法
- 掌握JS的三种书写位置
- 了解在JavaScript中的数据类型
- 应用
- 实现第一个JavaScript程序
- 实操训练
1.0 初始JavaScript
JavaScript语言诞生主要是完成页面的数据校验,因为他运行在客户端,需要运行浏览器来解析JavaScript代码
JS是Netscape网景公司的产品,最早名字为LiveScript后来更改为JavaScript
- JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言
- 脚本语言,不需要编译,运行过程中由JS解释器(JS引擎)逐行来进行解释并执行
- 现在也可以基于Node.js 技术进行服务器编程
特点
交互性(信息的动态交互)
安全性(不允许直接访问本地硬盘)
跨平台性(只要可以解释JS的浏览器都可以执行)
1.1 HTML / CSS / JavaScript的关系
HTML / CSS / JavaScript— 描述类语言
- HTML 决定页面结构和内容
- CSS 决定网页呈现给用户的摸样 (决定好看不好看)
JavaScript脚本语言 — 编程类语言
浏览器分成两部,渲染引擎和JS引擎
渲染引擎:解析HTML和CSS 俗称内核,比如chrome的blink
JS引擎(JS解释器):用来读取页面中的JavaScript代码,对其处理后运行。
1.3 JavaScript的组成
JavaScript 包括 ECMAScript DOM BOM
ECMAScript:
规定了JS的编程语法和基础核心知识,DOM — 文档对象模式
文档对象模型 (DocumentObject Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口,通过DOM提供的接口可以对页面上的各种元素进行操作(大小,位置,颜色等)
DOM——文档对象模型
文档对象模型(DocumentObject Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)
BOM — 浏览器对象模型
浏览器对象模型(Borwser Object Model,简称BOM),是指浏览器对象模型,它提供了独立于内的,可以与浏览器窗口进行互动的对象结构,通过BOM可以操作浏览器窗口,比如弹出框,控制浏览器跳转,获取分辨率等,
1.4 JavaScript 三种书写位置
1. 行内样式
<input type="button" src="" value="按钮" onclick="alert('hello world')"/>
- 可以将单行或少量JS代码写在HTML标签的时间属性中,(以on开头的属性),如:onclick
- 注意单双引号的使用,在HTML中单引号,JS中双引号
- 可读写差,在html中编写JS大量代码时,不方便阅读,
- 引号易错,引号多层嵌套匹配时,非常容易弄混乱
- 特殊情况下使用
2. 内嵌样式
<script type="text/javascript">
alert('hello world')
</script>
- 可以将多行JS代码写道