JavaScript 初级(二)适合零基础

前言

这篇文章是本人学习时所写,如有不严谨之处还请多多包涵。文章包括了js里的基础知识,不包含高级应用,适合零基础的人来看。

目录

前言

一、js基本知识

1.强制类型转换——字符串类型

2.常见报错信息总结

3.运算符

3.1 运算符分类

3.2 运算符优先级

4. 专业术语

4.1 语句

4.2 表达式

二、实战案例(一定要动手实践)

案例1.弹出对话框

案例2 单条件分支语句

案例3 多条件分支语句

案例4 switch语句实现简单计算器

案例5 判断2个数的最大值 (三元表达式)

案例6 数字补0

总结

一、js基本知识

1.强制类型转换——字符串类型

方法1:String变量

方法2.变量.toString(变量)

2.常见报错信息总结

a. Identifier 'a' has already been declared (程序中变量A重复了)

b.Missing initializer in const declaration (常量没有被初始化)

c.Assignment to constant variable (常量值被重新修改了)

d.xxx is not defind (当前变量未定义)

e.Cannot acces 'a' before intialization (变量在定义之前使用)

3.运算符

3.1 运算符分类

a. 赋值运算符

1. = 作用就是用来给变量赋值的。 

2. += 例如:a += b  等价于  a = a + b 

3. -=  例如:a -= b   等价于  a = a - b

4. *=  例如:a *= b   等价于  a = a * b

5. /=  例如:a /= b   等价于  a = a / b

6. %=

b. 算数运算符

1. +  加法

2. -   减法

3. *  乘法

4. /  除法

5.%  取余(模运算) 3%2 ===> 表示的含义就是3除以2的余数  =1

c. 比较运算符

1.  >  大于

2.  <  小于

3.  >=  大于或等于

4.  <=  小于或等于

5.  ==  等于(判断值是否相等)

6.  ===  全等于(值和数据类型必须全都相等)

7.  !=  不等于

比较运算符总结:

比较运算符得到的结果是布尔值。(true or false)

>= 大于或等于 只要有一个结果正确最后的结果就是正确的。

== 等于,只判断值是否相等。

=== 全等于, 值和数据类型必须都一样

d. 一元运算符(连起来写,中间不能有任何的空格)

++ 或 --

应用场景:在循环语句中使用一元运算。

具体使用:变量++ 或者 ++变量,变量-- 或者 --变量。

结论:不管 + 在变量的前面还是后面,变量都要加1。

不管 - 在变量的前面还是后面,变量都要减1。

案例: (此部分案例可用于面试,没必要全都钻透)

let a = 1;
let b = a++;
console.log(a);
console.log(b);

这个代码实现下来的结果是a = 2;b = 1;原因为加号在变量a的后面,计算机先将变量a原来的值赋给b,赋值完成后,变量a自己再加1。

let a = 1;
let b = ++a;
console.log(a);
console.log(b);

这个代码实现下来的结果是a = 2;b = 2;原因为加号再变量a的前面,变量a先自己加1,计算机再将变量a的值赋给b。

let i = 1;
console.log(i++ + ++i + i);

这个代码打印下来的结果是7。原因如下: 

第一步: 1 + ++i + i

第二步: 1 + ++2 + i

第三步: 1 + 3 + 3

第四步: 7

let i = 1;
let sum = ++i + i++;
console.log(sum);

第一步: ++1 + i++

第二步: 2 + 2++

第三步:4

let i = 1;
let sum = i++ + i++;
console.log(sum);

第一步:1 + i++

第二步:1 + 2++

let i = 1;
let sum = ++i + ++i;
console.log(sum);

第一步:2 + ++i

第二步:2 + 3

第三步:5

e. 逻辑预算符(在程序中用来连接多个比较条件时候使用的符号)

|| ===> 或运算

&& ===> 且运算

! ===> 非运算

注意:

1.在程序中连接多个条件必须使用裸机运算符。

2.在程序中不能使用数学写法。

3.2 运算符优先级

算数运算符()级别最高 > 一元运算符 > 算数运算符 乘除加减 > 比较运算符 > 逻辑运算符 > 赋值运算符

注意:如果遇到 && 和 || ,先执行 && 。

4. 专业术语

4.1 语句

(是一段可以被执行的代码,重点是用来执行的,不是计算的)。

分支语句分类:

a.单条件判断分支语句

程序在执行的时候,如果条件成立就执行某一行代码,如果条件不成立,则执行其他其他代码。

语法:

if(条件) {
       对应要执行的代码1
}
else {
       对应要执行的代码2
}

b.多条件分支语句

语法:if(条件1){

             代码1

}else if(条件2){

           代码2

}else if( 条件3){

            代码3

}else {

            代码4

}

c. switch分支语句

语法:

switch(变量){

          case 值1:
          代码1
          break;
          case 值2:
          代码2;
          break;
          defalut 值3:
          代码;
          break;
}

d.循环语句

4.2 表达式

在程序中能够得出一个具体的结果。

三元表达式:就是单条件分支语句的另外一种写法。

语法:条件 ? 代码1 : 代码2;

语法解释:

1.判断条件是真还是假,如果条件成立则执行代码1,如果条件不成立,则执行代码2。

2.? 相当于单条件里面的if。 : 相当于但条件分支语句里面的 else。

二、实战案例(一定要动手实践)

案例1.弹出对话框

输入商品名称,商品单价,商品数量,收货地址。并在页面里以表格的形式呈现,最后加上商品总价。

 //定义一个变量保存商品名称
        let pname = prompt('请输入商品名称');
        //定义变量保存商品单价
        let price = prompt('请输入商品单价');
        //定义变量保存商品数量
        let num = prompt('请输入商品数量');
        //定义变量保存收货地址
        let address = prompt('请输入收货地址');
        //定义变量保存总价
        let total = price * num;
        //使用模板字符串输出表格
        document.write(`
            <table>
                <tr>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>商品数量</th>
                    <th>收货地址</th>
                    <th>商品总价</th>
                    </tr>
                <tr>
                    <td>${name}</td>
                    <td>${price}</td>
                    <td>${num}</td>
                    <td>${address}</td>
                    <td>${total}</td>
                    </tr>
            </table>
        `);
    </script>

案例2 单条件分支语句

根据用户输入性别,输入不同的称呼,例如:男 先生,女 女士。

let gender = prompt('请输入用户性别');
if(gender === '男') {
   console.log('先生');
}else{
   console.log('女士');
}

案例3 多条件分支语句

需求:根据输入不同的成绩,反馈不同的评价。

1. 成绩90以上 优秀

2. 成绩70~90 良好

3. 成绩60~70 及格

4. 成绩60以下 不及格

let score = Number(prompt('请输入成绩'));
if(score > 90){
  alert('优秀');
}else if(score>70 && score<=90){
      alert('良好');
}else if(score>60 && score <=70){
      alert('及格');
}else{
      alert('不及格');
}

案例4 switch语句实现简单计算器

let num1 = Number(prompt('请输入第一个数字'));
            let num2 = Number(prompt('请输入第二个数字'));

            let m = prompt('请输入加减乘除方式中的任意一种');

            switch(m) {
                case '+':
                    alert(`当前是求和的方式,最后的结果是${num1 + num2}`);
                break;
                case '-':
                    alert(`当前是减法的方式,最后的结果是${num1 - num2}`);
                break;
                case '*':
                    alert(`当前是乘法的方式,最后的结果是${num1 * num2}`);
                break;
                default:
                    alert(`当前是除法的方式,最后的结果是${num1 / num2}`);
            }

案例5 判断2个数的最大值 (三元表达式)

需求:用户输入两个数,控制台输出最大的值。

let num1 = Number(prompt('请输入第一个数字'));
            let num2 = Number(prompt('请输入第二个数字'));

            num1 > num2 ? console.log(`最大值为:${num1}`) : console.log(`最大值为:${num2}`);

案例6 数字补0

需求:用户输入1个数,如果数字小于10,则前面进行补0,例如09,02;

let num = Number(prompt('请输入一个数字'));
        num >= 10 ? num : '0' + num;
        console.log(num);

总结

以后我会更新前端方面的知识,包括js高级,webapi,Node,React,Vue等,欢迎大家关注。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值