javascript入门后再看什么,javascript基础入门教程

大家好,给大家分享一下javascript入门后再看什么,很多人还不知道这一点。下面详细解释一下。现在让我们来看看!

知识点汇总:

1.JavaScript的引入方式;

2.JavaScript的结束符;

3. 输出和输入语法;

4.五大基本数据类型;

5.检测数据类型;

6.变量;

7.let 和 var 的区别;

8.常量;

9.模板字符串和案例;

10.综合案例;


1.JavaScript的引入方式:

a.JavaScript是什么?
它是一种在客户端(浏览器)运行的编程语言;
b.作用:

 

 c.举个例子:

 运行结果:

学习js我们就可以实现这样的效果; 

js的三种引入方式: 

1.行内样式:

 2.内部样式:

 3.外部样式(外联样式):

 

 2.JavaScript的结束符:

a.什么叫结束符:英文的分号;来表示

b.作用:让一段或一句代码执行结束;

c.代码:

<body>

    <!-- 结束符  符号英文;号  作用:让语句结束 -->

    <>

        // js引擎在执行语句代码时,默认是可以在一行显示,但是要以分号分割

        // 不打分号,我们要换行,回车键在js引擎解析时会默认为;号

        alert(1)

        alert(1)

        // 总结:在实际开发分号可以也可以不加,按照团队要进行判断是否添加

    </>

</body>

3. 输出和输入语法; 

a.输入语法:

 prompt('请你输入你的姓名:')

在页面弹出对话框,提示用户输入内容 

 

    b.输出语法:

   (1).在页面body标签内部输出,能够解析标签

   document.write()

 

 (2)弹出警告对话框:

alert();

(3)在控制台打印输出 

console.log() 

 

 

4.五大基本数据类型; 

为什么有数据类型呢?数据类型它是什么?

因为就是不能识别所有的数据,编程语言有自己编译器,有自己识别的数据,编译器在解析数据会把可以识别数据进行分类管理,分类之后的数据称为数据类型;

a.数值型:(number);

b.字符串型(string);

c.布尔类型(boolean);

d.未定义类型(undefined) ;

 

 e.空值型(null);

 

 

5.检测数据类型:

检测数据类型  typeof关键字  作用:检测数据类型  

  关键字  有特殊作用的英文单词

  运算符

  // 用法1:typeof 数据  用的比较多,推荐大家使用

        console.log(typeof 10);//number

        console.log(typeof '你好');//string

        // 用法2:typeof(数据)

        console.log(typeof (true));//boolean

        // 面试题

        console.log(typeof (undefined)); //undefined

        console.log(typeof (null));//object对象

 

 6.变量:

1.变量是什么?

        // 答:是一个容器,也可以理解为一个装东西的盒子

        // 2.变量的作用是什么?

        // 答:存储js可以识别的数据

 变量的基本使用

        //1.变量声明

        // let name

        // 2.变量赋值  =号赋值符  =号的作用是赋值的  

        // 大白话:把数据存放到了盒子里面

        // name = '爱坤'

        // 变量的初始化  一边定义变量一边存放数据的过程,称为初始化

 

 变量的赋值:

<body>

    <>

        let num = 20

        let uname = '张三'

        console.log(num, uname)

    </>

</body>

 

 7.var 和 let 的区别:

        // 1.var定义变量 可以重复定义,let不能重复定义

        // var abc = 123

        // var abc = 456

        // let关键字定义变量变量名只能使用一次,不然报错

        // let abc = 123

        // let abc = 456

        // console.log(abc);

        // 2.var定义的变量可以先使用,在定义,let必须要先定义在使用,不然就报错

        // age = 18

        // var age

        age = 18

        let age

        console.log(age);

        // 3.let定义变量有块级作用域,var没有

        // 总结:var现在不使用,因为他太多bug,我们暂时使用let进行定义变量

 8.常量:

变量 是可以变化的值

        // 常量 不能变化的值,是一个固定值

// 区别:

        // 1.变量可以先定义在赋值和常量必须进行初始化

        // 2.变量的值是可以改变的,常量是无法改变的

        // 总结: 当我们保持数据不会进行更改时, 我们使用常量进行保存, 反之就使用变量

 

 

 9.模板字符串:

模板字符串 es6也就是js第6个版本推荐出来拼接字符串使用  

        // 模板字符串使用反引号包裹内容,变量使用${}包裹

        document.write(`大家好我叫${uname}今年${age}岁了`)

 

 10.综合案例:

  // 需求:用户输入商品价格price和商品数量num,以及收货地址address,可以自动打印订单信息

        // 分析:

        // 1. 用户输入3次,所以3个输入框

        // 2.定义3个变量存储我的输入框的值

        let price = prompt('请输入商品价格:')

        let num = prompt('请输入商品的数量:')

        let address = prompt('请输入收货地址:')

   // 3.定位总价total变量  总价=商品数量*商品价格

        let total = num * price

        // 4.使用模板字符串替换你的表格结构,使用页面输出动态生成表格

   // 5.替换内容,使用${}拼接字符串

        document.write(`

         <table>

        <caption>

            <h2>订单确认</h2>

        </caption>

        <tr>

            <th>商品名称</th>

            <th>商品价格</th>

            <th>商品数量</th>

            <th>总价</th>

            <th>收货地址</th>

        </tr>

        <tr>

            <td>小米青春版Plus</td>

            <td>${price}</td>

            <td>${num}</td>

            <td>${total}</td>

            <td>${address}</td>

        </tr>

    </table>

        `)


 

    </>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值