JavaScript简介
JavaScript是一门客户端脚本语言
- 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
- 脚本语言:不需要编译,直接就可以被浏览器解析执行
JavaScript能做的
- 客户端表单验证
- 动态效果
- 改变页面内容
JavaScript的发展
-
20世纪90年代中期,大部分互联网用户使用28.8kbps的调制解调器连接到网络进行网上冲浪,为解决网页功能简单的问题,当时业界已开始考虑开发一种客户端本语言,用于解决诸如表单合法性验证等简单而实用的问题。
-
1995年, Nctseape公司和Sun公司联合开发出 JavaSeript即本语言,并在 Netscape Navigator2中实现了 JavaScript本规范的第一个版本,即 JavaScript1.0版。
-
1997年,为了避免无序竞争,同时解决lavaScript几个版本中语法、特性等方面的混乱问题,JavaScript1.1作为一个草案被提交给欧洲计算机制作商协会(ECMA),经协商后推出了ECMA-262标准,其中定义了ECMAScript这种全新的脚本语言。
-
到了21世纪,网上各种广告和滚动提示条越来越多,JavaScript被很多网页制作者乱用,直到2005年年初,Google公司的网上产使Ajax快速兴起,并受到广泛好评,作为Ajax最重要元素之一的JavaScript才重新找到了自己的定位。
-
如今 JavaScript正朝着提高用户体验、增强网页友好性的方向发展,并越来越受到开发人员的关注,各种JavaScript的功能插件层出不穷网页的功能在它的基础上更是越加丰富多彩。
现如今ECMAScript(ES5)是运用最广泛的ES标准,ES6功能更为强大,是ES5的进阶版。把ES5学完后有兴趣可以继续学习ES6,这是针对前端方向的。如果是偏向后端方向,学习了ES5就可以了。本次学习就是以ES5为主。
HTML、CSS、JS分别的作用
- HTML:结构
决定网页的结构和内容(是什么) - CSS:样式
决定网页的表现样式(什么样子) - JS:行为
决定网页的行为(做什么)
JavaScript的组成
- 脚本语言规范:
语法;变量;数据类型;关键字;保留字;运算符;逻辑控制语句;对象等; - 浏览器对象模型:
通过BOM操作浏览器,如移动、缩放、关闭窗口;打开新窗口;页面跳转等; - 文档对象模型:
通过DOM操作HTML文档,如读取、修改页面内容等;
JavaScript基本使用
JavaScript的引用方式
推荐写在<body>
标签的最后
- 内嵌式
将JS代码写在<script>
标签内,<script>
标签可放置于任何位置
<script type="text/javascript">
alert(‘hello world!’) //alert()方法为弹出一个警告对话框
</script>
- 外联式
将JS代码写入外部JS文件中,通过<script>
标签内的src属性引入
<script src="./index.js" type="text/javascript" charset="utf-8"></script>
- 行内JS
直接将代码写在HTML元素内,该方法问题较多,不推荐使用
<button type="button" onclick="javascript:alert('hello world!')">click me</button>
输入/输出语句
- alert()
创建一个警告对话框,参数内容为对话框文本
输出字符串
alert('hello world')
输出表达式
alert(1+1)
输出变量
var name = 'Alice'
alert('我是' + name)
- prompt()
创建一个提示对话框,用于收集用户输入,参数一为提示框文本
内容,参数二为输入框的默认值(参数二可选)
prompt('你最喜欢的颜色是', '红色')
有返回值,可将返回值存入变量再调用
var color = prompt('你最喜欢的颜色是', '红色')
alert(color)
- document.write()
直接在页面上输出内容,参数除了可以是字符串、表达式、变量,还可以是HTML标签代码
document.write('<h1>hello world</h1>')
document.write()中可以使用转义字符,但无法使用\n换行符,如需换行,可使用<br>
标签
document.write('hello' + '<br>' + 'world')
转义字符
当JS输出字符串时,如果字符串中包含某些特殊字符,无法直接输出,需要使用转义字符进行输出。
控制台输出
var a = 1
var b = 2
var c = a + b
console.log(c) //控制台输出语句