概念
一门客户端脚本语言
-
运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
-
脚本语言：不需要编译，直接就可以被浏览器解析执行了
-
功能：可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
JavaScript发展史
- 1992年，
Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ：C--，后来更名为：ScriptEase - 1995年，
Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript - 1996年，微软抄袭
JavaScript开发出JScript语言 - 1997年，
ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，统一了所有客户端脚本语言的编码方式。
-
JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
-
ECMAScript：客户端脚本语言的标准
语法
内部JS： 定义<script>，标签体内容就是js代码
外部JS：定义<script>，通过src属性引入外部的js文件
注意
-
<script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。 -
<script>可以定义多个。
特殊语法
- 语句以
;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
<script>
var a = 3
alert(a)
</script>
-
变量的定义使用
var关键字，也可以不使用用： 定义的变量是局部变量
不用：定义的变量是全局变量(不建议)
<script>
/* b = 4;
alert(b);*/
var b ;
function fun(){
b = 4;
}
fun();
alert(b);
</script>
注释
- 单行注释：
//注释内容 - 多行注释：
/*注释内容*/
<!--HTML注释-->/*CSS注释*/
数据类型
分为原始数据类型和引用数据类型
原始数据类型【基本数据类型】
number、string、boolean、null、undefined
number：数字。 整数/小数/NaN
NaN：not a number 一个不是数字的数字类型
string：字符串。"abc" "a" 'abc'
JS没有字符概念
-
boolean: true和false -
null：一个对象为空的占位符 -
undefined：未定义。 如果一个变量没有给初始化值，则会被默认赋值为undefined
引用数据类型：对象
变量：一小块存储数据的内存空间
Java语言是强类型语言，而JavaScript是弱类型语言。
- 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
- 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
语法
var 变量名 = 初始化值;
- 获取变量的类型：
typeof(变量名);
null运算后得到的是object（null算对象的占位符，也说得通）
代码：
<script>
// 定义number类型
var num = 1;
var num2 = 1.2;
var num3 = NaN;
document.write(num + "<br>" + num2 +"<br>" + num3 + typeof(num3) + "<br>"); // number
// string
var str = "abc";
var str2 = 'eee';
document.write(str + "<br>" + +str2 + typeof(str2)+"<br>"); // string
// [重要]
var obj = null;
var obj2 = undefined;
var obj3;
document.write(obj + typeof(obj)+"<br>"); // gbject
document.write(obj2 + typeof(obj2)+"<br>"); // undefined
document.write(obj3 + typeof(obj3)+"<br>"); // undefined
</script>
运算符
一元运算符
只有一个运算数的运算符
++，-- ， +(正号)
自增/自减：（++、–）
- ++(–) 在前，先自增(自减)，再运算
- ++(–) 在后，先运算，再自增(自减)
正负号：（+、-） 【重要】
在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
其他类型转number 【重要】
- 若字符串中的是纯数字，则直接返回该数值
- 若字符串中不是纯数字，则返回NaN
- 若字符串为空（null），则返回0
- 转换布尔型，则true返回1，false返回0
- 转换undefined，则返回NaN
代码：
<script >
var num = 3;
var a = num++ ;
document.write(num);// 4
document.write(a); // 3
var b = "123abc";
var c = +b;
document.write(typeof (b)); // string
document.write(b + 1); //123abc1
document.write(typeof (c)); // number
document.write(c + 1); // NaN
var flag = + true;
var f2 = + false;
document.write(typeof (flag) + "<br>");//number
document.write(flag + "<br>");// 1
document.write(f2 + "<br>");// 0
var obj = null;
var obj2 = undefined;
var obj3;
document.write(+obj+"<br>"); //0
document.write(+obj2+"<br>"); // NaN
document.write(+obj3+"<br>"); // NaN
</script>
算数运算符
+ - * / % ...
赋值运算符
= += -+ ....
比较运算符
> < >= <= == ===(全等于)
比较方式
-
类型相同：直接比较
字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
-
类型不同：先进行类型转换，再比较
===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
代码：
<script>
document.write((3 > 4) +"<br>"); //false
document.write(("abc" < "acd") +"<br>"); //true
document.write(("123" == 123) +"<br>"); //true
document.write(("123" === 123) +"<br>"); //false
</script>
逻辑运算符
&& || !
其他类型转boolean 【重要】
- number：
0或NaN为假，其他为真 - string：除了空字符串("")，其他都是true
- null&undefined:都是false
- 对象：所有对象都为true
代码：
演示number：
//number
var num = 3;
var num2 = 0;
var num3 = NaN;
document.write(!!num+"<br>"); // true
document.write(!!num2+"<br>"); // false
document.write(!!num3+"<br>"); // false
演示string：
//string
var str1 = "abc";
var str2 = "";
document.write(!!str1+"<br>"); // true
document.write(!!str2+"<br>"); // false
演示null、undefined：
// null & undefined
var obj = null;
var obj2;
document.write(!!obj+"<br>"); // false
document.write(!!obj2+"<br>"); // false
演示对象：
// 对象
var date = new Date();
document.write(!!date+"<br>"); // true
var obj = "123";
alert(obj);
// 按照java方式书写
if(obj != null && obj.length > 0) {
alert("HaHa");
}
// JS可以简化书写
if(obj) {
alert("HeiHei");
}
三元运算符
判断表达式的值，如果是true则取值1，如果是false则取值2
表达式 ? 值1 : 值2;
代码：
var a = 3;
var b = 4;
var c = a > b ? 1:0;
流程控制语句
if...else...、switch
在java中，switch语句可以接受的数据类型：byte int shor char,枚举(1.5) ,String(1.7)
在JS中,switch语句可以接受任意的原始数据类型。
代码：
<script>
var a;
switch (a){
case 1:
alert("number");
break;
case "abc":
alert("string");
break;
case true:
alert("true");
break;
case null:
alert("null");
break;
case undefined:
alert("undefined");
break;
}
</script>
while
<script>
//1 ~ 100 求和 5050
var sum = 0;
var num = 1;
while(num <= 100){
sum += num;
num ++;
}
alert(sum);
</script>
do...while、for
<script>
//1 ~ 100 求和 5050
var sum = 0;
for (var i = 1; i <= 100; i++){
sum += i;
}
alert(sum);
</script>
案例_99乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
td{
border: 1px solid;
}
</style>
<script>
document.write("<table border='0' align='center'>");
for (var i = 1; i < 10; i++) {
document.write("<tr>");
for (var j = 1; j <= i; j++) {
document.write("<td>");
document.write(i + " * " + j + " = " + i * j + " ");
document.write("</td>");
}
document.write("<br>");
document.write("</tr>");
}
document.write("<table>");
</script>
</head>
<body></body>
</html>
扫一扫
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
