一、JavaScript基础
1.什么是JavaScript?
JavaScript是运行的客户端的解释性脚本语言。
客户端是浏览器(包括:IE、Firefox、Chrome、Safari、Opera)
编译型:将程序的源代码编译成二进制机器语言,形成编译文件
(.dll或.exe),以后在执行时可以直接调用编译的结果,
优点:一次编译,多次执行。
解释型:在每次执行时都需要进行编译、执行的过程;而且需要
编译器进行编译、执行的操作
解释性脚本是指程序语言的一种执行方式;
JavaScript与Java之间不存在任何关系;
JavaScript最早由网景公司在其Netscape浏览器中推出.
Microsoft在其IE浏览器推出JScript与其抗衡.
欧洲计算机制造商协会(ECMA)在借鉴JavaScript1.5的基础上推出
ECMAScript,从而成为所有脚本语言的标准.
ECMAScript(ES)最新的版本为ECMAScript-6(简称ES6)
2.JavaScript的语法结构
<script type="text/javascript">
...
...
</script>
e.g. 01_simple.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
<!-- 显示警示对话框 -->
<script>
window.alert('Hello World');
</script>
</head>
<body>
</body>
</html>
<script type="text/javascript" src="JS文件路径及名称">
</script>
第一步:创建JS文件并且写入相关的代码;
第二步:在网页文件内调用相关的JS文件;
e.g.
第一步:创建02_common.js
window.alert('我是外部文件的JS代码');
第二步:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
<script src="scripts/02_common.js"></script>
</head>
<body>
</body>
</html>
说明:
A.JS严格区分大小写;
B.每行JS代码必须以分号结尾;
C.JavaScript文件的扩展名为.js
课外阅读:
为什么要采用css文件合并/js文件合并?
1.减少HTTP请求次数,减轻服务器请求压力;
<link href="a.css">
<link href="b.css">
<link href="c.css">
<link href="a.css,b.css,c.css">
2.如何实现CSS文件/JS文件合并?
前端框架(如天猫的Kissy)
Window alert() 方法
定义和用法
alert() 方法用于显示带有一条指定消息和一个确认按钮的
警告框。
语法
alert(message)
3.变量(Varaible)
变量是指存储在计算机内存中有名称的信息,其值在程序运行
期间可以发生变化;
声明变量
var 变量名称;
var 变量名称 = 值;
e.g. 03_variable.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变量</title>
<script>
//声明变量
var username = 'Tom';
var password = "123456";
var age = 26;
var salary = 7961.35;
var sex = true;
var telephone = '13683136622';
//转义符
var memory = 'He said:"I\'m OK"';
//输出语句(在控制台输出)
console.log(typeof(username));
console.log(typeof(password));
console.log(typeof(age));
console.log(typeof(sex));
console.log(typeof(telephone));
console.log(typeof(memory));
</script>
</head>
<body>
</body>
</html>
变量名称的命名规范
A.变量名称必须以字母或下划线开头,包含字母、数字及下划线;
B.变量名称禁止与系统关键字相同;
C.变量名称必须遵守"驼峰标记法";
D.变量名称必须含义明确;
JavaScript关键字:
var、if、else、switch、case、break、default、for、while、function
ECMAScript关键字:
class、float、boolean、object、extends、public、protected、private、interface、abstract、implements
4.数据类型
4.1.字符型(string):必须括在双引号或单引号之间;
转义符:
\n,换行
\r,回车
\t,水平制表符
\v,垂直制表符
\f,换页(走纸)
\\,反斜线
\',单引号
\",双引号
e.g.
str1 = 'He said:"OK"';
str2 ="I'm ok";
str3 = 'He said:"I\'m ok"';
str4 = "He said:\"I'm ok\"";
4.2.数值型(number),包括整型和浮点型,可以带有符号位,可存储
八进制、十进制、十六进制的数字;
八进制的表示方法为0[0-7]+
十六进制的表示方法0[x|X][0-9a-fA-F]+
4.3 布尔型(boolean),只能存储true或false
e.g. MySQL
create database t1;
use t1;
create table users(
sex boolean not null default 0
);
desc users;
boolean是tinyint(1)的别名!
create table users(
sex tinyint(1) not null default 0
);
1是指在没有达到指定位数时添加前导零,必须为zerofill组合使用.
create table t2(
a tinyint(1) zerofill,
b tinyint(2) zerofill,
c tinyint(3) zerofill
);
insert t2(a,b,c) values(2,2,2);
select * from t2;
desc t2;
请问可以插入以下记录吗?
insert users(sex) values(-128);
insert users(sex) values(127);
4.4 未定义(undefined),值只能为undefined
以下变量的值为undefined
A.声明但没有赋值的变量;
B.声明但赋值为undefined的变量;
C.引用对象不存在的属性;
e.g. 04_unfined.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>未定义</title>
<script>
//1.声明但没有赋值的变量
var n;
console.log(typeof(n));
//2.声明但赋值为undefined
var p = undefined;
console.log(typeof(p));
//3.引用对象不存在的属性时
var obj = {}; //空对象
console.log(typeof(obj.password));
</script>
</head>
<body>
</body>
</html>
4.5 对象(object),属性与方法的集合体;
{
“属性名称”:值,
…,
方法名称:function(){
…
…
}
}
{
propert:value,
....,
method:function([parameter,...]){
...
...
}
}
e.g. 05_object.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象</title>
<script>
var obj = {
id:1,
username:'Tom',
say:function(sth){
return '他说' + sth;
}
};
console.log('用户ID' + obj.id);
console.log('用户名' + obj.username);
console.log(obj.say('大家好,中午吃了吗?'));
</script>
</head>
<body>
</body>
</html>
4.6 null(空对象),其作用是为断开继承链(原型链);
e.g. 06_null.html
4.7 function(自定义函数),可以重复执行的代码段;
e.g. 07_function.html
二、运算符
按作用划分
1.字符运算符: +
2.数学运算符:+(正号)、-(负号)、*、/、%、+、-
3.比较运算符:>、>=、(等于)、!=(不等于)、=、!==(不全等)、<=、<
全等:(1)值相同(2)数据类型相同
4.逻辑运算符:!、&&、||
短路现象:在进行&&或||运算时,只有第一个表达式的值可以
确定整个表达式结果时,后续表达式将忽略执行;
5.自增/自减运算符
i++、i–,后缀形式:先使用,后加减
++i、–i,前缀形式:先加减,后使用
e.g. 09_increment.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>运算符</title>
<script>
var i = 4;
console.log(i++); //后缀形式 4
console.log(i); //5
var m = 3;
console.log(++m); //前缀形式 4
console.log(m); //4
</script>
</head>
<body>
</body>
</html>
6.赋值运算符:=、+=、-=、*=、/=、%=
按参加运算的操作数的数量
单目运算符:只有一个操作数,如负数(-)、逻辑非(!)
双目运算符:有两个操作数,如加号(+)、大于(>)等
三目运算符:expression ? value1 : value2
运算符优先级
一、二、三、赋值
算术、比较、逻辑
案例:
var p = !true || 3 + 2 - 5 <= 7
false || 3 + 2 - 5 <= 7
false || 0 <= 7
false || true
true
e.g. 08_operator.html
三、流程控制语句
1.if语句
if(condition){
…
…
}
if(condition){
…
…
} else {
…
…
}
e.g. 10_if.html
if(condition){
…
} else if(condition){
…
} else if(condition){
…
} … else{
…
}
e.g. 11_if.html
2.switch语句
switch(expression){
case 值1:
…
break;
case 值2:
…
break;
case N
break;
default:
…
break;
}
说明:
A.if语句的条件表达式只能为布尔型(可能存在数据类型的自动转换)
switch语句的表达式可以为任意数据类型(布尔除外)
B.if语句每次执行时都将对变量进行取值操作;而switch只进行一次取值操作;
C.switch语句进行全等运算;
e.g. 12_switch.html