1、初识JavaScript
1.1 JavaScript历史
-
布莱登·艾奇(Brendan Eich,1961年~)
-
这位神奇的大哥1995年利用10天完成JavaScript的设计
-
网景公司初命名为Live Script,后来与Sun公司合作之后改名为JavaScript
1.2 JavaScript是什么
-
最流行的语言之一,是一种运行在客户端的脚本语言(Script是脚本的意思)
-
脚本语言:不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行
-
现在也可以基于Node.js技术进行服务器端编程
1.3 JavaScript的作用
-
最早用来做表单验证
-
网页特效
-
服务端开发(Node.js)
-
桌面程序(Electron)
-
App(Cordova)
-
控制硬件-物联网(Ruff)
-
游戏开发(cocos2d-js)
1.4 HTML和CSS和JS的关系
HTML/CSS标记语言——描述类语言
相当于人的身体,给人穿衣服、化妆
JS脚本语言——编程类语言
实现业务逻辑和页面控制,相当于人的各种动作
1.5 浏览器执行JS简介
浏览器分成两部分:渲染引擎和JS引擎
-
渲染引擎:用来解析HTML和CSS,俗称内核,比如谷歌浏览器的blink,老版本的webkit
-
JS引擎:也称为JS解释器,用来读取js代码(转化为机器语言),对其处理后运行,比如谷歌的V8
-
js是脚本语言,会逐行进行执行
1.6 JS的组成
-
ECMAScript js语法(js基础)
-
DOM 页面文档对象模型 (js API)
-
BOM 浏览器对象模型 (js API)
1.6.1 ECMAScript
ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实际上后两者是ECMAScript语言的实现和扩展。
ECMAScript:ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。
更多查看MDN:JavaScript | MDN
1.6.2 DOM——文档对象模型
文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展标记语言的标准编程接口。
通过DOM提供的接口可以对页面上的各种元素进行操作(大小 位置 颜色等)
1.6.3 BOM——浏览器对象模型
BOM(Browser Object Model),是指浏览器对象模型,它提供了独立于内容的,可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。
1.7 JS引入方式
-
行内式
<!-- 行内式 -->
<input type="button" value="唐伯虎" onclick="alert('秋香姐')">
-
内嵌式
<script>
alert('沙漠骆驼');
</script>
-
外部引入
<script src="./my.js"></script>
注意:HTML中推荐用双引号,JS中推荐使用单引号。
2、JavaScript注释
// 单行注释 快捷键:CTRL+/
/* 多行注释
所行注释 快捷键:shift+alt+A */ 我改成了 CTRL+shift+/
3、JavaScript输入输出语句
方法 | 说明 | 归属 |
---|---|---|
alert() | 浏览器弹出警示框 | 浏览器 |
console.log() | 浏览器控制台打印输出信息 | 浏览器 |
prompt() | 浏览器弹出输入框,用户可以输入 | 浏览器 |
<script>
// 这是一个输入框
prompt('请输入您的年龄');
// 弹出警示框 输出的 展示给用户的
alert('计算的结果是');
// 控制台输出,给程序员测试用的
console.log('我是程序员可以看到的');
</script>