JS基础第一课
原创
基础的介绍就直接略过啦
一、JS书写位置
1、行内：直接在标签编写
eg：直接在body下的button标签的onclick属性编写
<button onclick="alert('点击')">点击</button>
2、内部
<script>
alert('打开窗口')
</script>3、外部：链接一个.js文件
<script src="./***.js"></script>4、注释
（1）单行：//
（2）多行：/* */
二、输入输出语言
1、浏览器的弹窗：alert(' ')
<script>
alert('弹窗')
</script>
2、控制打印数据：console.log()结果显示在检查的控制台中
<script>
console.log('输出');
</script>
3、收集用户信息：prompt（需要用变量来存储信息）
<script>
prompt('你是谁？')
</script>三、变量：数据存储容器，可以通过变量名进行获取或修改
1、先声明变量，再赋值
<script>
var a
a=1
</script>2、变量更新：通过新值对变量进行赋值
<script>
var a=1
a=2
console.log(a);
</script>
3、同时声明多个变量
<script>
var name='小明',age=18,number=139
console.log(name,age,number);
</script>
4、声明变量的特殊情况
（1）只声明不赋值
<script>
var a
console.log(a);//输出显示为undefined类型
</script>
（2）不声明直接赋值（严格模式下，会报错，相当于创建一个隐式全局变量）
<script>
name='小明'
console.log(name);
</script>
（3）不声明不赋值
四、变量命名规范
1、可以包含大小写字母、数字、下划线_和$
2、不能以数字开头，注意区分大小写
3、不能用特殊词，如：if、break、case等等
五、数据类型
1、对数据分类，所占空间不同
2、根据等号右边值来确定变量数据类型
3、js具有动态类型，相同变量可以做不同的类型
4、检测数据类型
<script>
var a=1
console.log(typeof a);
</script>
六、数据类型的分类
1、基本数据类型
（1）Number：数值型，整数和浮点数
①
<script>
console.log(1+1);
console.log(typeof (1+1));
console.log(typeof 3.14);
</script>
②isNaN()判断是否为数字
<script>
console.log(isNaN('123'));//false --是数字
console.log('小明'+1);//字符串（拼接方式）
console.log(isNaN('小明-1'));//true --不是数字
</script>
注意：输出结果为false时是数字，为true时不是数字
（2）String：字符串
①单引号或双引号
<script>
var str='12"34"56'
var str2="12'34'56"
console.log(str);
console.log(str2);
</script>
②转义字符\（空格\t、换行\n）
<script>
var str="12\"34\"56"
var str2='12\'34\'56'
console.log(str);
console.log(str2);
console.log('12\n34');
var str3="12 12"
var str4="12\t\t12"
console.log(str3);
console.log(str4);
</script>
注意：两种空格的大小不同，\t的空格在两次及以上时距离更大
③length属性（空格也算）
<script>
var str="12\"34\"56 "
console.log(str);
console.log(str.length);
</script>
④拼接+：
<script>
var name='小明',age=18,id=113
console.log('我是'+name+'今年'+age+'岁，我的id是'+id);
</script>
（3）Boolean：布尔型true和false
<script>
console.log(1+true);
console.log(3-false);
</script>
（4）Null：空值
<script>
console.log(1+null);
console.log(null+'1');
</script>
（5）Undefined：
<script>
console.log(1+undefined);
console.log(undefined+'1');
</script>
2、复杂数据类型（引用数据类型）【这两个模块后续文章再具体描述】
（1）数组
（2）对象
七、数据类型转换
1、转字符串型：三种方法
（1）toString()
<script>
var a=12;
var b=a.toString()
console.log(typeof a);
console.log(typeof b);
</script>
（2）String()
<script>
var a=12;
var b=String(a);
console.log(typeof a);
console.log(typeof b);
</script>
（3）隐式转换（拼接）
<script>
var a=12;
console.log(a+'1');
console.log(typeof (a+'1'));
</script>
2、转数字型
（1）parseInt()：整型
<script>
console.log(parseInt(3.12));//3
</script>（2）parseFloat()：浮点型
①
<script>
console.log(parseFloat('3s56f'));//3
console.log(parseFloat(3));//3
console.log(parseFloat('3'));//3
console.log(parseFloat('q3s56f'));//NaN，表示不出来
</script>
②注意转整型与浮点型的区别：
<script>
console.log(parseInt('3.12q3s56f'));//3
console.log(parseFloat('3.12q3s56f'));//3.12
</script>
（3）Number()：只能是纯数字
<script>
console.log(Number(100));
console.log(Number('100px'));//NaN
</script>
（4）隐式转换：递增递减运算符
3、转布尔型（隐式转换）
<script>
var a=1
console.log(a>2);//false
</script>八、运算符
1、算数运算符：+ - * / %（取余）
<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）前置：先计算后返回
<script>
var a=1
console.log(++a);//2
</script>（2）后置：先返回后计算
<script>
var a=1
console.log(a++);//1
</script>（3）练习：
<script>
var a=10;
b=a++ + ++a;
//10 + 12
console.log(a,b);//12 22
</script>3、比较运算符：比较结果为布尔值
> < >= <= == ===（全等，数据类型也要相同） != !==（全不等）
<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
<script>
// 表达式1 表达式2
console.log(1 > 3 && 2 < 1);//false
// f
</script>5、赋值运算符：+= -= /= *= %=
<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
<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
<script>
var a=2
if (a>1) {
console.log('true');
}
</script>（2）双分支：if else
<script>
var a=2
if (a>1) {
console.log('true');
}
else{
console.log('false');
}
</script>（3）多分支：if elseif else、嵌套if else if else
<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）三元表达式（常用）：
<script>
//1男0女
var sex=1
var sexName=sex==1?'男':'女'
console.log(sexName);//男
</script>（5）switch表达式：
<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循环：
for(初始化变量;条件判断;操作表达式){循环体}①初始化变量：循环开始的初始数据
②条件判断：判断是否继续执行
③操作表达式：操作初始化变量
④continue：终止本次循环、break：跳出整个循环
<script>
for (var i = 0; i < 5; i++) {
console.log(i);
}
</script>
（2）双重for循环：外层走一次时，内层全部走完，然后进行判断是否照这样循环
<script>
for (var i = 0; i < 3; i++) {
console.log('外层*********',i);
for (var j = 0; j < 4; j++) {
console.log('内层',j);
}
}
</script>
（3）while循环：
<script>
var i=0;
while (i<3) {
console.log(i);
i++
}
</script>（4）do...while循环：
<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
// 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
<!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>小伙伴复制使用代码的时候要注意路径，否则会出错的
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
