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>

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

  • 7
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

五秒法则

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值