Javascript组成：ECMAScript，DOM，BOM；
ECMAScript：核心语法
DOM：文档对象模型，操作网页内容的一套API
BOM：浏览器对象模型，操作浏览器的一套API
（一）JS书写格式
1.行内JS
写在标签中，一般配合事件使用。在实际开发中不推荐使用。
事件，和网页交互的行为。 如：鼠标点击、鼠标移动、鼠标离开、键盘按下等。
<!-- 鼠标点击按钮时，弹出数字1。-->
<button onclick="alert(1)">按钮</button>
2.内部JS
在head标签或body标签中使用script标签。
<script type="text/javascript">
js代码
</script>
标签的type属性目的告诉浏览器，该标签中是js代码。type属性在html5版本中可以省略。
优点：减少和html代码的耦合。
代码举栗：
<script>
alert(1); //弹出数字1
</script>
3.外联JS
在head标签或body标签中使用script标签。
<script src='js文件路径'>
</script>
优点：彻底和html分离，便于后期代码的维护。
HTML中代码：
<script src="base.js"> </script>
JS文件base.js中代码：
alert(1);
4.输出内容的方式
弹出警告框：alert('你好')
控制台输出：console.log('你好')
在网页中打印：document.write('你好')
接收用户输入的内容：prompt('请输入账号')
（二）变量
1.变量的使用
关键字var：
<script>
var age;
</script>
变量赋值
var age;
age = 123; //给变量赋值
变量初始化
//创建一个变量并赋值
var age = 123；
批量创建和批量赋值
var age,name,sex;
age = 17,name = '张三',sex = '男';
批量初始化
var age = 17,name = '张三', sex = '男';
重复赋值（喜新厌旧）
一个变量可以重复赋值。变量最终的结果是最后一次的赋值。
var age = 123;
console.log(age); //123;
age = 456;
console.log(age); //456;
一个变量可以赋值给另一个变量
var a = 123;
var b = a;
console.log(b); //123;
变量的使用
使用变量就直接调用变量的名字
var age = 17;
alert(age); //把变量age所代表的数据输出
2.变量的命名
规则：
变量名可以由数字、字母、下划线_、$符组成，但不能以数字开头。
不能使用关键字或保留字当做变量名。
变量名区分大小写。
规范：
驼峰命名法：变量名若由多个单词组成，第一个单词的首字母要小写，后面其他单词的首字母要大写。
var userName = 'admin';
3.数据类型
基本数据类型（简单数据类型）
有五种，分别是：
1）数字 → Number：数字、浮点数（小数）、NaN（表示Not a Number，不是一个数字。但却是Number类型。）
isNaN(数据)：检测一个数据是否是NaN，是返回true，不是返回false;
2）字符串 → String：用单引号或者双引号所包裹的字符
单引号嵌套双引号 / 双引号嵌套单引号
//此时被嵌套的双引号就是字符串中的普通字符
'程序"猿"';
//此时被嵌套的单引号就是字符串中的普通字符
"程序'媛'";
转义符：
\' 把单引号变成普通字符
\" 把双引号变成普通字符
3）布尔 → Boolean：仅有两个值，表示程序中的肯定和否定
true; //表示程序中的肯定
false; //表示程序中的否定
4）未定义 → Undefined：仅有一个值。undefined,表示未定义
//当创建好一个变量没有赋值时，变量的默认值是undefined;
var num;
console.log(num); //undefined
5）空 → Null：仅有一个值：null，表示空
检测数据的数据类型
语法：typeof(数据) 或 typeof 数据;
返回：数据的数据类型
typeof('abc'); //string
typeof(true); //boolean
typeof(1123); //number
引用数据类型（复杂数据类型）
有很多种，比如：
数组 → Array
日期 → Date
对象 → Object ……等等
（三）运算符
1.算术运算符
加 + | 减 - | 乘 * | 除 / | 取余数 %
var result1 = 1 + 2;
console.log(result1); //3
var result2 = 4 - 2;
console.log(result2); //1
var result3 = 2 * 2;
console.log(result3); //4
var result4 = 10 / 5;
console.log(result4); //2
var result5 = 3 % 2;
console.log(result5); //1
2.赋值运算符
赋值 =
var age = 18; //把数据18赋值给变量age
复合赋值 += | -= | *= | /= | %=
//针对的是变量
var num = 10;
num+=2; //num = num + 2;
console.log(num); //12
3.关系运算符
关系运算符也就是比较运算符，比较的结果始终都是布尔值
大于 > | 小于 < | 大于等于 >= | 小于等于 <= | 等于 == | 不等于 != | 全等===
| 不全等 !==
console.log(1>2); //false
console.log(3>=1); //true
console.log(1==1); //true
console.log(1!=1); //false
== 和 ===的区别
// == 比较的是值
console.log(1=='1'); //true;
// === 不仅比较值，还有比较数据类型
console.log(1==='1'); // false;
网友评论