准备工作
- 编写js需要准备一个编译器和游览器，js必须通过HTML/XHTML文档编写
js的编写位置
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
...
</script>
</head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外部引入js -->
<script src="./index.js"></script>
</head>
<body>
// 更为推荐的编写位置，这样能使浏览器更快地加载页面
<script src="./index.js"></script>
</body>
编程语言
- 程序设计语言分为解释型和编译型两大类
- 编译型语言需要一个编译器把语言编写出来的源代码翻译为直接在计算机上执行的文件。
- 解释型语言需要一个解释器，对于js而言游览器中的JavaScript解释器将直接读入源代码并执行
- 用编译型语言编写的代码有错误，这些错误在代码编译阶段就能被发现。而解释型语言代码中的错误只能等到解释器执行到有关代码时才能被发现。
- 与解释型语言相比，编译型语言往往速度更快，可移植性更好，但它们的学习曲线也往往相当陡峭。
语法
语句
- 只有按照正确的语法编写出来的语句才能得到正确的解释。
first statement; // 语句最后最好加上;号
注解
- 注解不会被JavaScript解释器去解释并执行，注解是给程序员看的
// // 单行注解，快捷键ctrl+/
/* */ // 多行注解，快捷键alt+shift+a
变量
a=10; // 默认为var a=10
b=20; // var b=20
// 方式一
var a;
var b;
// 方式二
var a，var b;
// 方式一
var a=10;
var b=20;
// 方式二
var a=10，b=20;
// 方式三
var a;
var b;
a=10;
b=20;
- 变量区分大小写，必须由下划线和数字(不能再开头)，字母组成，尽量遵循小驼峰命名法(首个字母小写后面大写)，变量不能和关键字重名
数据类型
- 必须声明数据类型的语言叫做强类型语言，不用声明的叫弱类型语言(js)
- 弱类型语言意味着程序员可以在任意时刻改变变量的类型
var str="123"; // 字符串类型
str=33 // 数值类型
1. 字符串
- 字符串可以用双引号和单引号声明
- 如果字符串中要用引号遵循外双内单，外单内双
var str1="aaa";
var str2='bbb';
2. 数值
var a=10;
var b=-10;
var c=10.3;
3. 布尔值
var flag1=true;
var flag2=false;
4. 数组
- js的数组能够存储多个不同类型的数据
- 数组就是有序集合一般用数字表示索引
// 声明数组
var arr1=Array(4); // 表示声明了一个长度为4的数组
var arr2=Array(); // 不确定长度声明
var arr3=[]; // 简写声明
// 数组添加值，分别在第0个位置到第3个位置添加1
arr1[0]=1;
arr1[1]=true;
arr1[2]=1;
arr1[3]=1;
var ar2=Array(1,2,false,4); // 自动匹配对应的位置并且添加值
arr3=[1,2,"123",false]; // 赋值
5. 对象
- 对象就是无序集合一般用字符串表示索引
- 数组和对象可以配合使用
// 声明对象
var obj1=Object();
var obj2={};
// 对象赋值
obj1.name="zhangsan";
obj2={name:"zhangsan"};
操作
算数运算符
// 赋值运算符
var a=10;
var b=20;
// 基本运算符
a+b; // 30
a-b; // -10
a*b; // 200
a/b; // 0.5;
a%b; // 10;
// 其他运算符用法类似
a+=1; // a=11
...
// 先用后变，先变后用
a++;
++a;
a--;
--a;
// 字符串与运算符
var str="123";
str+321 // 123321
str+"true" // 123true
比较运算符
var a=10;
var b=20;
a==b // false
a!=b // true
a>=b // false
a<=b // true
逻辑运算符
var a=10;
var b=20;
// 并且
a>=10&&b>=20 // true
a>=10&&b>20 // false
// 或
a>=10||b>20 // true
// 取反
!true // false
条件语句
- 选择一种满足条件的语句执行
- if()里面必须是bool类型或者运算结果为bool类型
if(true){
...
}else if(true){
...
}else{
...
}
switch(num){
case 1:
...
break;
case 2:
...
break;
default:
...
}
循环语句
while(true){
...
}
for(let i=1;i<=10;i++){
...
}
函数
- 用于封装常用的代码块，提高代码复用率
- 全局作用域是可以在整个js文件中调用，局部作用域只能在函数中/代码块中调用，如果变量名相同遵循就近原则
// 定义函数
function add(a,b){
return a+b;
}
// 调用函数
var c=add(10,20) // 30
对象
obj.name // 通过.调用对象内部的属性
obj.say() // 通过.调用对象内部的方法
const arr=new Array()
arr.length // 返回数组的长度
const date=new Date()
data.getDay() // 当前当日
...