1.1. JavaScript介绍
HTML:定义网页的结构
CSS:美化网页
JavaScript:实现用户交互;
1.1.2 JavaScript特点
n 安全性较高
n 跨平台,兼容性好
1.2 JavaScript的组成
JavaScript主要由三部分组成:ECMAScript、DOM、BOM。
ECMAScript:描述了JavaScript的基本语法(所有浏览器都支持);
DOM:文档对象模型。提供了处理网页内容的方法;
BOM:浏览器对象模型。提供了与浏览器进行交互的方法;
1.3 如何编写JavaScript代码
方式一:在HTML页面中编写JavaScript代码
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> document.write('HelloWorld') </script> </body> <script> alert('你好') </script> </html>
script标签可以放在head标签中,也可以放在body标签中。而且,在一个HTML页面中,可以存在多个script标签。
方式二:引入外部的JS文件
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript" src="js/JavaScript.js"></script> </body> </html>
注意事项:
1) 在js文件中编写js代码,不需要写<script>标签;
2) 开始的script标签和结束标签不能够写在一起;
3) 如果在HTML页面中引入了外部的js文件,那么该script标签就不能再编写js代码,而且应该在另外一个script标签中编写;
方式三:在HTML元素中编写js代码
<input type="button" value="click me" onclick="document.write('惊不惊喜');"/>
二、ECMAScript
2.1注释
HTML: <!—注释 -->
CSS: /*注释*/
JavaScript://单行注释 或 /*多行注释*/
2.2 变量
javascript是一门弱类型的语言。所以,在javascript中声明变量不需要指定类型。
语法格式:
var 变量名 [= 初始值];
<script> var aa = 10; document.write(aa); document.write(typeof(aa)) </script>
注意事项:
1) var关键字可以不写。变量的类型是根据它的值来确定的。
2) 变量名必须以字母或下划线开头;
3) js的变量是区分大小写的;
4) js变量必须要先声明后使用;
5) js变量的类型会随着它的值的改变而发生变化;
js的数据类型:
number:数值型,包含小数、整数、NaN(非数字)
string:字符串类型;
boolean:布尔类型,它的值可以是true或false;
object:对象类型;
undefined:该变量没有定义或初始化的时候,那么就是undefined
运算符
++ 自加
-- 自减
注意:前++和前--是先对变量执行++或--操作,然后再对结果进行运算。
后++和后--是先对变量执行运算,运算后再对变量执行++或--操作。
补充:+除了可以作为算术运算符以外,还可以字符串连接符。
比较运算符
=== 三个等号,全等(值和类型都相等)
三目运算符:
条件表达式 ? ‘内容1’ : ‘内容2’;
说明:如果条件成立,就返回内容1,否则返回内容2。
var gender = 1; document.write(gender == 1 ? '男': '女');
2.4.1 条件判断
- 语法格式:
if (条件表达式) { } else if (条件表达式) { } … else { } <!DOCTYPE html>
<script> var socre = '你好'; if (socre >= 60) { document.write('及格') } else if (socre < 60) { document.write('不及格') } else { document.write('输入错误') } </script>
2.4.2 条件选择
switch (变量) { case 值1: … break; //退出switch case 值2: … break; .. default: //如果上面case条件都不满足,就执行default后面的js代码。 … }
var fruit = 'orange'; switch (fruit) { case 'apple': document.write('苹果') break; case 'orange': document.write('橘子') break; default: document.write('其他') }
2.4.3 循环语句
while循环:
先判断条件是否成立。如果条件成立就重复执行大括号中的js代码。直到条件不成立为止。
while (条件) { …. } document.write('结果')
var num = 1; var total = 0; while (num<=10) { total+=num; num++ }document.write('结果为' + total)
do..while循环:
先执行大括号中的js代码,然后再判断条件是否成立。如果条件成立就继续执行大括号中的js代码。直到条件不成立为止。
do { } while (条件);
var num = 1; var total = 0; do { if (num % 2 == 1) { total += num; } num++ }while (num <= 10); document.write('结果' + total)
for循环:
先执行初始化语句,再判断条件是否成立。如果条件成立,就执行大括号中的js代码。执行完js代码后,再执行循环后的语句。接着,再判断条件是否成立,如果成立就继续执行大括号中的js代码。直到条件表达式不成立为止。
for ([初始化语句]; [初始化语句]; [初始化语句]) { }
注意:初始化语句只会执行一次。如果没有变量需要初始化,初始化语句可以没有。但是,初始化语句后面的分号一定要有。
var total = 0; for (i=1; i<=10; i++) { if (i % 2 == 0 ) { total += i; } }document.write('结果为' + total)