JS基础第一课

最新推荐文章于 2024-01-24 15:51:07 发布

五秒法则

最新推荐文章于 2024-01-24 15:51:07 发布

阅读量2.8k

点赞数 7

分类专栏：前端开发文章标签： javascript html 学习前端

本文链接：https://blog.csdn.net/qq_51478745/article/details/125760865

版权

前端开发专栏收录该内容

20 篇文章 6 订阅

订阅专栏

基础的介绍就直接略过啦

一、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>

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