JS基础第一课

基础的介绍就直接略过啦

一、JS书写位置

1、行内：直接在标签编写

eg：直接在body下的button标签的onclick属性编写

点击

2、内部

3、外部：链接一个.js文件

4、注释

（1）单行：//

（2）多行：/* */

二、输入输出语言

1、浏览器的弹窗：alert(' ')

  

2、控制打印数据：console.log()结果显示在检查的控制台中

 

3、收集用户信息：prompt（需要用变量来存储信息）

三、变量：数据存储容器，可以通过变量名进行获取或修改

1、先声明变量，再赋值

2、变量更新：通过新值对变量进行赋值

 

3、同时声明多个变量

 4、声明变量的特殊情况

（1）只声明不赋值

  

（2）不声明直接赋值（严格模式下，会报错，相当于创建一个隐式全局变量）

 

（3）不声明不赋值

四、变量命名规范

1、可以包含大小写字母、数字、下划线_和$

2、不能以数字开头，注意区分大小写

3、不能用特殊词，如：if、break、case等等

五、数据类型

1、对数据分类，所占空间不同

2、根据等号右边值来确定变量数据类型

3、js具有动态类型，相同变量可以做不同的类型

4、检测数据类型

六、数据类型的分类

1、基本数据类型

（1）Number：数值型，整数和浮点数

①

  

②isNaN()判断是否为数字

 

 注意：输出结果为false时是数字，为true时不是数字

（2）String：字符串

①单引号或双引号

  

②转义字符\（空格\t、换行\n）

  

 注意：两种空格的大小不同，\t的空格在两次及以上时距离更大

③length属性（空格也算）

 

④拼接+：

 

（3）Boolean：布尔型true和false

  

（4）Null：空值

  

（5）Undefined：

 

2、复杂数据类型（引用数据类型）【这两个模块后续文章再具体描述】

（1）数组

（2）对象

七、数据类型转换

1、转字符串型：三种方法

（1）toString()

 

（2）String()

 

（3）隐式转换（拼接）

  

2、转数字型

（1）parseInt()：整型

（2）parseFloat()：浮点型

①

 

②注意转整型与浮点型的区别：

  

（3）Number()：只能是纯数字

  

（4）隐式转换：递增递减运算符

3、转布尔型（隐式转换）

 八、运算符

1、算数运算符：+ - * / %（取余）

  

2、递增递减运算符：++ --

（1）前置：先计算后返回

（2）后置：先返回后计算

 （3）练习：

3、比较运算符：比较结果为布尔值

> < >= <= == ===（全等，数据类型也要相同） != !==（全不等）

4、逻辑运算符

（1）&&逻辑与：同真才真

（2）||逻辑或：一真即真

（3）！逻辑非：取反

（4）短路运算

①逻辑与：表达式1为真，结果取决于表达式2
                                  假，结果就是表达式1

②逻辑或：表达式1为真，结果为真
                                  假，结果就是表达式2

5、赋值运算符：+= -= /= *= %=

  

6、运算符优先级：高到低

（1）小括号() > 递增递减运算符【++ --】> 算数运算符【+ - * / %】> 关系运算符【> < >= <=】> 比较运算符【== === != !==】> 逻辑运算符【先&&后||】

（2）练习：6>=8||("3"!=3 && !(10*2==60) && true) )//false

  

具体解析步骤，如下：
①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

（2）双分支：if else

（3）多分支：if elseif else、嵌套if else if else

 

（4）三元表达式（常用）：

（5）switch表达式：

 

 注意：switch判断的数据类型要全等，否则会出错

（6）if与switch区别：

①if主要用于判断区间

②switch主要用于判断等值（全等）

3、循环结构：有一段代码要重复的执行

（1）for循环：

for(初始化变量;条件判断;操作表达式){循环体}

①初始化变量：循环开始的初始数据

②条件判断：判断是否继续执行

③操作表达式：操作初始化变量

④continue：终止本次循环、break：跳出整个循环

  

（2）双重for循环：外层走一次时，内层全部走完，然后进行判断是否照这样循环

 

（3）while循环：

（4）do...while循环：

十、练习及例子解析

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

 小伙伴复制使用代码的时候要注意路径，否则会出错的