基础的介绍就直接略过啦
一、JS书写位置
1、行内：直接在标签编写
eg：直接在body下的button标签的onclick属性编写
代码语言：javascript复制<button onclick="alert('点击')">点击</button>
2、内部
代码语言：javascript复制<script>
alert('打开窗口')
</script>3、外部：链接一个.js文件
代码语言：javascript复制<script src="./***.js"></script>4、注释
（1）单行：//
（2）多行：/* */
二、输入输出语言
1、浏览器的弹窗：alert(' ')
代码语言：javascript复制<script>
alert('弹窗')
</script>
2、控制打印数据：console.log()结果显示在检查的控制台中
代码语言：javascript复制<script>
console.log('输出');
</script>
3、收集用户信息：prompt（需要用变量来存储信息）
代码语言：javascript复制<script>
prompt('你是谁？')
</script>三、变量：数据存储容器，可以通过变量名进行获取或修改
1、先声明变量，再赋值
代码语言：javascript复制<script>
var a
a=1
</script>2、变量更新：通过新值对变量进行赋值
代码语言：javascript复制<script>
var a=1
a=2
console.log(a);
</script>
3、同时声明多个变量
代码语言：javascript复制<script>
var name='小明',age=18,number=139
console.log(name,age,number);
</script>
4、声明变量的特殊情况
（1）只声明不赋值
代码语言：javascript复制<script>
var a
console.log(a);//输出显示为undefined类型
</script>
（2）不声明直接赋值（严格模式下，会报错，相当于创建一个隐式全局变量）
代码语言：javascript复制<script>
name='小明'
console.log(name);
</script>
（3）不声明不赋值
四、变量命名规范
1、可以包含大小写字母、数字、下划线_和$
2、不能以数字开头，注意区分大小写
3、不能用特殊词，如：if、break、case等等
五、数据类型
1、对数据分类，所占空间不同
2、根据等号右边值来确定变量数据类型
3、js具有动态类型，相同变量可以做不同的类型
4、检测数据类型
代码语言：javascript复制<script>
var a=1
console.log(typeof a);
</script>
六、数据类型的分类
1、基本数据类型
（1）Number：数值型，整数和浮点数
①
代码语言：javascript复制<script>
console.log(1 1);
console.log(typeof (1 1));
console.log(typeof 3.14);
</script>
②isNaN()判断是否为数字
代码语言：javascript复制<script>
console.log(isNaN('123'));//false --是数字
console.log('小明' 1);//字符串（拼接方式）
console.log(isNaN('小明-1'));//true --不是数字
</script>
注意：输出结果为false时是数字，为true时不是数字
（2）String：字符串
①单引号或双引号
代码语言：javascript复制<script>
var str='12"34"56'
var str2="12'34'56"
console.log(str);
console.log(str2);
</script>
②转义字符（空格t、换行n）
代码语言：javascript复制<script>
var str="12"34"56"
var str2='12'34'56'
console.log(str);
console.log(str2);
console.log('12n34');
var str3="12 12"
var str4="12tt12"
console.log(str3);
console.log(str4);
</script>
注意：两种空格的大小不同，t的空格在两次及以上时距离更大
③length属性（空格也算）
代码语言：javascript复制<script>
var str="12"34"56 "
console.log(str);
console.log(str.length);
</script>
④拼接 ：
代码语言：javascript复制<script>
var name='小明',age=18,id=113
console.log('我是' name '今年' age '岁，我的id是' id);
</script>
（3）Boolean：布尔型true和false
代码语言：javascript复制<script>
console.log(1 true);
console.log(3-false);
</script>
（4）Null：空值
代码语言：javascript复制<script>
console.log(1 null);
console.log(null '1');
</script>
（5）Undefined：
代码语言：javascript复制<script>
console.log(1 undefined);
console.log(undefined '1');
</script>
2、复杂数据类型（引用数据类型）【这两个模块后续文章再具体描述】
（1）数组
（2）对象
七、数据类型转换
1、转字符串型：三种方法
（1）toString()
代码语言：javascript复制<script>
var a=12;
var b=a.toString()
console.log(typeof a);
console.log(typeof b);
</script>
（2）String()
代码语言：javascript复制<script>
var a=12;
var b=String(a);
console.log(typeof a);
console.log(typeof b);
</script>
（3）隐式转换（拼接）
代码语言：javascript复制<script>
var a=12;
console.log(a '1');
console.log(typeof (a '1'));
</script>
2、转数字型
（1）parseInt()：整型
代码语言：javascript复制<script>
console.log(parseInt(3.12));//3
</script>（2）parseFloat()：浮点型
①
代码语言：javascript复制<script>
console.log(parseFloat('3s56f'));//3
console.log(parseFloat(3));//3
console.log(parseFloat('3'));//3
console.log(parseFloat('q3s56f'));//NaN，表示不出来
</script>
②注意转整型与浮点型的区别：
代码语言：javascript复制<script>
console.log(parseInt('3.12q3s56f'));//3
console.log(parseFloat('3.12q3s56f'));//3.12
</script>
（3）Number()：只能是纯数字
代码语言：javascript复制<script>
console.log(Number(100));
console.log(Number('100px'));//NaN
</script>
（4）隐式转换：递增递减运算符
3、转布尔型（隐式转换）
代码语言：javascript复制<script>
var a=1
console.log(a>2);//false
</script>八、运算符
1、算数运算符： - * / %（取余）
代码语言：javascript复制<script>
var num1=23,num2=12
console.log((num1 num2) 'n',(num1-num2) 'n',(num1/num2) 'n',(num1*num2) 'n',(num1%num2) 'n');
</script>
2、递增递减运算符： --
（1）前置：先计算后返回
代码语言：javascript复制<script>
var a=1
console.log( a);//2
</script>（2）后置：先返回后计算
代码语言：javascript复制<script>
var a=1
console.log(a );//1
</script>（3）练习：
代码语言：javascript复制<script>
var a=10;
b=a a;
//10 12
console.log(a,b);//12 22
</script>3、比较运算符：比较结果为布尔值
> < >= <= == ===（全等，数据类型也要相同） != !==（全不等）
代码语言：javascript复制<script>
console.log(1>=3);//false
console.log(1<=2);//true
console.log(1=='1');//true
console.log(1==='1');//false
</script>4、逻辑运算符
（1）&&逻辑与：同真才真
（2）||逻辑或：一真即真
（3）！逻辑非：取反
（4）短路运算
①逻辑与：表达式1为真，结果取决于表达式2 假，结果就是表达式1
②逻辑或：表达式1为真，结果为真 假，结果就是表达式2
代码语言：javascript复制<script>
// 表达式1 表达式2
console.log(1 > 3 && 2 < 1);//false
// f
</script>5、赋值运算符： = -= /= *= %=
代码语言：javascript复制<script>
var a=1,b=2,c=3,d=4,e=5
a =2
b-=1
c*=2
d/=2
e%=2
console.log(a,b,c,d,e);
</script>
6、运算符优先级：高到低
（1）小括号() > 递增递减运算符【 --】> 算数运算符【 - * / %】> 关系运算符【> < >= <=】> 比较运算符【== === != !==】> 逻辑运算符【先&&后||】
（2）练习：6>=8||("3"!=3 && !(10*2==60) && true) )//false
代码语言：javascript复制<script>
console.log(6>=8||("3"!=3 && !(10*2==60) && true));
</script>
具体解析步骤，如下：
①10*2==60//f
②!(10*2==60)//t
③("3"!=3 && !(10*2==60) && true) //f&&t&&t，则f ④6>=8//f ⑤6>=8||("3"!=3 && !(10*2==60) && true) )//f||f，则f
九、流程控制
1、顺序结构：程序按照代码的先后顺序执行
2、分支结构：根据不同条件,执行不同的路径代码,得到不同结果
（1）单分支：if
代码语言：javascript复制<script>
var a=2
if (a>1) {
console.log('true');
}
</script>（2）双分支：if else
代码语言：javascript复制<script>
var a=2
if (a>1) {
console.log('true');
}
else{
console.log('false');
}
</script>（3）多分支：if elseif else、嵌套if else if else
代码语言：javascript复制<script>
var score=parseInt(prompt('你的成绩是？'))
if (score>90) {
console.log(alert('优秀'));
}else if(score>80){
console.log(alert('良好'));
}else if(score>70){
console.log(alert('中等'));
}else if(score>60){
console.log(alert('及格'));
}else{
console.log(alert('不及格'));
}
</script>
（4）三元表达式（常用）：
代码语言：javascript复制<script>
//1男0女
var sex=1
var sexName=sex==1?'男':'女'
console.log(sexName);//男
</script>（5）switch表达式：
代码语言：javascript复制<script>
var sex=parseInt(prompt('你的性别是？男则填1，女则填0'))
switch (sex) {
case 0:
console.log(alert('女'));
break;
case 1:
console.log(alert('男'));
break;
default:
console.log(alert('错误'));
break;
}
</script>
注意：switch判断的数据类型要全等，否则会出错
（6）if与switch区别：
①if主要用于判断区间
②switch主要用于判断等值（全等）
3、循环结构：有一段代码要重复的执行
（1）for循环：
代码语言：javascript复制for(初始化变量;条件判断;操作表达式){循环体}①初始化变量：循环开始的初始数据
②条件判断：判断是否继续执行
③操作表达式：操作初始化变量
④continue：终止本次循环、break：跳出整个循环
代码语言：javascript复制<script>
for (var i = 0; i < 5; i ) {
console.log(i);
}
</script>
（2）双重for循环：外层走一次时，内层全部走完，然后进行判断是否照这样循环
代码语言：javascript复制<script>
for (var i = 0; i < 3; i ) {
console.log('外层*********',i);
for (var j = 0; j < 4; j ) {
console.log('内层',j);
}
}
</script>
（3）while循环：
代码语言：javascript复制<script>
var i=0;
while (i<3) {
console.log(i);
i
}
</script>（4）do...while循环：
代码语言：javascript复制<script>
var i=0;
do{
console.log(i);
i =1;
}while(i<3)
</script>
十、练习及例子解析
1、用户依次输入2个值。弹出较大的值 2、用户输入一个值，弹出奇数还是偶数 3、根据用户输入1~7的数字，弹出星期几 4、用户输入年份，弹出闰年还是平年 5、打印九九乘法表 6、打印菱形 代码例子：
work.js
代码语言：javascript复制// 1、用户依次输入2个值。弹出较大的值
var num1=prompt('请输入第一个数'),num2=prompt('请输入第二个数')
console.log('值1：' num1,'值2：' num2);
if (num1>num2) {
alert('较大值为' num1);
}
else{
alert('较大值为' num2);
}
// 2、用户输入一个值，弹出奇数还是偶数
var num3=prompt('请输入第三个数')
console.log('值3：' num3);
if (num3%2==0) {
alert('值3是' '偶数');
}
else{
alert('值3是' '奇数');
}
// 3、根据用户输入1~7的数字，弹出星期几
var num4=prompt('请输入第四个数，范围是1~7')
console.log('值4：' num4);
console.log(typeof num4);
switch (num4) {
case '1':
alert('今天星期一');
break;
case '2':
alert('今天星期二');
break;
case '3':
alert('今天星期三');
break;
case '4':
alert('今天星期四');
break;
case '5':
alert('今天星期五');
break;
case '6':
alert('今天星期六');
break;
case '7':
alert('星期日');
break;
default:
alert('输入错误');
break;
}
// 4、用户输入年份，弹出闰年还是平年
var num5=prompt('请输入第五个数，任意年份')
console.log('值5：' num5);
if (num5%4!=0) {
alert('该年为平年');
}else{
alert('该年为闰年');
}
// 5、打印九九乘法表
for (var i = 1; i < 10; i ) {
var str1=''
for (var j = 1; j <= i; j ) {
str1 = j '*' i '=' (i*j) ' ';
}
console.log(str1);
}
// 6、打印菱形
var str4=''
for (var k = 1; k <= 5; k ) {
var str2=''
var str3=''
for (var l = 5-k; l > 0; l--) {
str2 =' '
}
for (var m = 0; m <= (k-1)*2; m ) {
str3 ='*'
}
str4 = str2 str3 'n'
}
// console.log(str4);
for (var n = 4; n >= 0; n--) {
var str5=''
var str6=''
for (var p = 5-n; p > 0;p--) {
str6 =' '
}
for (var o = n*2-1; o > 0; o--) {
str5 ='*'
}
str4 = str6 str5 'n'
}
console.log(str4);work.html
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./work.js"></script><!-- 这里的路径是.js文件与.html的相对路径 -->
</head>
<body>
</body>
</html>小伙伴复制使用代码的时候要注意路径，否则会出错的
