- JavaScript 是基于对象和事件驱动的脚本语言, 主要应用在客户端.
- JavaScript 和 Java 不同之处:
- JS 是基于对象的(即 JS 里面的内容全部是对象), Java 是面向对象的
- JS 只需解释就可以执行, Java 需要先编译成字节码文件, 再执行
- JS 是弱类型, Java 是强类型
- JS 和 html 相结合的方式:
- 将 javascript 代码封装到 <script> 标签中.
<script type="text/javascript"> </script>
- 将 javascript 代码封装到 js 文件中, 并通过 <script> 中的 src 属性进行导入
- 将 javascript 代码封装到 <script> 标签中.
// 结合方式一:
<script type="text/javascript">
alert("hello world!");
</script>
// 结合方式二:
<script type="text/javascript" src="demo.js"></script>
// 注意事项:如果 <script> 标签中使用了 src 属性导入 js 代码, 那么该标签中封装的 js 代码
// 不会被执行. 所以通常导入 js 代码都是使用单独 <script> 来完成.
<body>
<script type="text/javascript" src="demo.js">
alert("hello world!") // 该行代码不会被执行
</script>
</body>
JavaScript 基本语法
- 变量
- 运算符
- 语句
- 数组
- 函数
变量
// 定义变量
<body>
<script type="text/javascript">
// 定义变量, 关键字: var. JS 是弱类型的
var x = 3; // 赋值为整型
x = "abc"; // 赋值为字符串
x = 3.45; // 赋值为小数
x = true; // 赋值为布尔值
x = 'c'; // 赋值为字符串 c, 单引号和双引号都代表字符串
</script>
</body>
运算符
- 算术运算符
- 赋值运算符
- 比较运算符
- 逻辑运算符
- 位运算符
- 三元运算符
// 算术运算符
var a = 748;
alert("a="+a/100*100); // 结果为 748;
var a1 = 2.3, b1=4.7;
alert("a1+b1="+(a1+b1)); // 结果为 7
alert("12"+1); // 结果为 121
alert("12"-1); // 结果为 11
// 在 js 中 false 就是 0 或者 null;
// 非0 或者 非 null 就是 true, 默认用 1 表示.
alert(true+1); // 结果为 2
// 逻辑运算符: 连接两个布尔型的表达式
// 符号: ! && ||
======================================
// undefined 表示未定义, 其实它是一个常量
// 要想获取具体值的类型, 可以通过 typeof 来完成
alert(typeof("abc")); // string 类型
alert(typeof(true)); // boolean 类型
alert(typeof(5)); // number 类型
alert(typeof(2.3)); // number 类型
// 判断类型
alert(typeof("abc"=='string')); // 结果为 true
语句
- 顺序结构
- 判断结构
- 选择结构 switch
- 循环结构
- 其他语句
- break : 跳出选择结构, 或者跳出循环结构
- continue : 用于循环结构, 结束本次循环继续下次循环
// 判断结构
var x=3;
if(x=4){ // 此处不是判断, 而是赋值. 判断需要 x==4
alert("yes");
}else{
alert("no");
}
// 改进
// 判断的时候, 建议将常量放在等号的左边, 可以通过报错来修正代码
var x=3;
if(4==x){
alert("yes");
} else {
alert("no");
}
// 选择结构
var x="abc";
switch(x){
case "kk":
alert("a");
break;
case "abc":
alert("b");
break;
default:
alert("c");
break; // 最后一个选项的 break 可以省略
}
// 综合练习: 在页面中显示一个 99乘法表
document.write("<table>");
for(var x=1; x<=9; x++){
document.write("<tr>");
for(var y=1; y<=x; y++){
document.write("<td>"+y+"*"+x+"="+y*x+"</td>");
}
document.write("</tr>");
}
document.write("</table>");
数组
- 数组用于存储更多的数据,是一个容器. 长度是可变的
- 元素的类型是任意的, 建议在使用数组时, 存储同一类型的元素.
- 数组定义的两种方式:
// 第一种方式:
var arr = [2,3,5,45,756,23];
alert(typeof(arr)); // 结果为: object, 即对象类型
// 第二种方式: 使用 javascript 中的 Array 对象来完成
var arr = new Array(5); // 定义长度为 5 的数组
var arr1 = new Array(2,3,6); // 定义一个数组, 元素为: 2, 3, 6
函数
- 函数就是一个功能的封装体
- 定义功能通常需要两个明确:
- 功能的结果
- 功能实现中,参与运算的未知内容
- 分类:
- 一般函数
- 匿名函数
- 动态函数
// 定义函数的格式:
// 通常指定的关键字来定义
function 函数名(参数列表){
函数体;
return 返回值; // 如果没有具体的返回值, return 语句可以省略不写
}
// 示例: 加法运算
function add(x,y){ // 参数不需要写 var
return x + y;
}
// 函数的一些细节:
// 1. 只有使用了函数的名称就是对这个函数的调用, 不存在函数的重载.
// 建议函数中定义了几个参数, 就传递几个实参
function show(x, y){
alert(x+"..."+y);
}
show(4); // 结果为: 4...undefined
show(3, 4, 5); // 结果为: 3...4
// 2. 函数中有一个数组在对传入的参数进行存储, 这个数组就是 arguments
function show(x, y){
document.write(arguments.length);
}
show(3,4,6,8,9); // 结果为: 5
// 3. 函数赋值
function getSum(){
return 100;
}
var sum = getSum();
alert("sum="+sum); // 结果为 100
var sum1 = getSum;
alert("sum1="+sum);
// getSum 本身是一个函数名, 而函数本身在 js 中就是一个对象. getSum 就是这个函数对象的引用.
// 将 sum1 = getSum 相当于将 getSum 这个引用的地址赋值给 sum, 这时 sum 也指向了这个函数对象.
// 相当于这个函数对象有两个函数名称
// alert("sum1="+sum); 打印的时候, 因为 sum1 指向的是函数对象,那么会将该函数对象的字符串表现
// 形式打印出来, 也就是该函数的代码定义格式
// 动态函数: 使用的是 js 中内置的一个对象 Function
// 参数列表和函数体都是通过字符串动态指定的.
// 格式: var add = new Function("参数列表","方法体和返回值");
var add = new Function("x,y","var sum; sum=x+y; return sum;");
var result = add(4,8);
// 匿名函数: 没有名字的函数
// 通常都是函数的简写形式
var add2 = function(a,b){
return a+b;
}
alert(add2(2,8)); // 匿名函数调用
// 综合练习: 对数组反转
function reverseArray(arr){
for(var start=0, end=arr.length-1; start<end; start++, end--){
var temp = arr[start];
arr[start] = arr[end];
arr[end] = temp;
}
}
全局变量和局部变量
for(var x=0; x<3; x++){
document.write("x="+x); // 此处, x 是全局变量
}
document.write("x....."+x); // 此时, x 仍有值, 值为 3
// 局部变量
function show(){
var x = 9; // 此处, x 为局部变量
}
**参考资料** - [JavaSE 基础视频(毕向东)](https://www.bilibili.com/video/av3140814/#page=1)