#JavaScript(基础入门保姆级教程)【初级01】

目录

一,JavaScript介绍

1.1,JavaScript是什么

        1.1.1,js是一种运行在客户端(浏览器)的编程语言,实现人机交互效果.

        1.1.2,js的作用:

 网页效果(监听用户的一些行为让网页作出对应的反馈)

表单验证(针对表单数据的合法性进行判断)

数据交互(获取后台的数据,渲染到前端)

   服务端编程(node.js)       

         1.1.3,js的组成

​编辑                                               

 1.1.1.1,ECMAScript:

1.1.1.2,Web APIs:

1.1.1.3,先看一下html,css,js做的一个简单小案例,先不要求去写 看看就行,这个案例实现的是点击任意按钮(1-4)颜色就会变成粉色

1.2,JavaScript的书写位置.

1.3,JavaScript的注释.

1.4,JavaScript的结束符.

1.5,输入和输出语法.

     1.5.1,输出语句

      1.5.2,输入语句

1.6,字面量.

二,JavaScript变量

2.1.1,理解变量是计算器存储数据的“容器”

2.1.2,变量的基本使用

      2.1.3,声明变量:

  2.1.4,变量的赋值

2.1.5,更新变量

2.1.6,小案例

     2.1.6.1,小案例一:输入输出小案例, 跳出弹窗输入数据,在浏览器打印出数据

2.1.6.2,小案例二:交换变量的值

 具体实现 

 2.1.7,变量的本质

2.1.8 ,变量的命名规则与规范

2.1.9,小案例

2.2.0,Var 和Let关键字的区别

​编辑

三,数组的基本使用

3.1.1,声明的语法

​编辑

 3.1.2,数组长度查询

四,常量

4.1.1,常量的声明方式 

  五,数据类型

5.1.1,JS数据类型分类

5.1.2,补充JS是弱数据类型语言

​编辑

5.1.3,基本数据类型

          5.1.3.1,数字类型(Number)

      5.1.3.2,字符串类型(String)

 5.1.3.2.1,小案例(练)

5.1.3.3,布尔型(boolean),未定义(undefined),空(null)

 5.1.4,检测数据类型(typeof)

5.1.5,数据类型的转换

 ​编辑​编辑

5.1.6,综合小案例

 视频演示+代码

5.1.7,补充自增自减运算符和比较运算符

​编辑

5.1.7.1 ,逻辑运算符以及优先级


一,JavaScript介绍

1.1,JavaScript是什么

        1.1.1,js是一种运行在客户端(浏览器)的编程语言,实现人机交互效果.

        1.1.2,js的作用:

  •  网页效果(监听用户的一些行为让网页作出对应的反馈)

  • 表单验证(针对表单数据的合法性进行判断)

  • 数据交互(获取后台的数据,渲染到前端)

  •    服务端编程(node.js)       

         1.1.3,js的组成

#JavaScript(基础入门保姆级教程)【初级01】_第1张图片                                               

 1.1.1.1,ECMAScript:

规定了js基础语法核心知识,比如:变量,分支语句,循环语句,对象等等

1.1.1.2,Web APIs:

  DOM  操作文档,比如对页面元素进行移动,大小,添加删除等操作

  BOM  操作浏览器,比如页面弹窗,检测窗口宽度,存储数据到浏览器等等

                          JavaScript权威网站icon-default.png?t=N7T8https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

1.1.1.3,先看一下html,css,js做的一个简单小案例,先不要求去写 看看就行,这个案例实现的是点击任意按钮(1-4)颜色就会变成粉色

#JavaScript(基础入门保姆级教程)【初级01】_第2张图片



 



                                             具体代码如下所示






  
  
  Document




  
  
  
  
  


1.2,JavaScript的书写位置.

  • 内部JavaScript

直接写在html文件里,用script标签包主

规范:script标签写在上面

拓展:alert('你好,js')页面弹出警告对话框

#JavaScript(基础入门保姆级教程)【初级01】_第3张图片





  
  
  Document



  
  


                                               为什么要把js代码放在Html文件底部

#JavaScript(基础入门保姆级教程)【初级01】_第4张图片

  •  外部JavaScript

代码写在以.js结尾的文件里

语法:通过script标签,引入到html页面中。

#JavaScript(基础入门保姆级教程)【初级01】_第5张图片

                                                    代码





  
  
  Document



 
        //中间不要写内容


  • 内联JavaScript

代码写在标签内部

语法:

1.3,JavaScript的注释.

#JavaScript(基础入门保姆级教程)【初级01】_第6张图片

1.4,JavaScript的结束符.

结束符:   ;   可以不写

#JavaScript(基础入门保姆级教程)【初级01】_第7张图片

1.5,输入和输出语法.

     1.5.1,输出语句

#JavaScript(基础入门保姆级教程)【初级01】_第8张图片

#JavaScript(基础入门保姆级教程)【初级01】_第9张图片 #JavaScript(基础入门保姆级教程)【初级01】_第10张图片





  
  
  Document



  


      1.5.2,输入语句

#JavaScript(基础入门保姆级教程)【初级01】_第11张图片

1.6,字面量.

在计算机中描述   事和物

二,JavaScript变量

2.1.1,理解变量是计算器存储数据的“容器

  • 大白话:变量就是一个装东西的盒子。

#JavaScript(基础入门保姆级教程)【初级01】_第12张图片

  • 注意变量不是数据本身,它们仅仅是一个用于存储数值的容器。可以理解为是一个个装东西的纸箱子。

2.1.2,变量的基本使用

      2.1.3,声明变量:

语法:

#JavaScript(基础入门保姆级教程)【初级01】_第13张图片

  • 声明变量有两部分构成:声明关键字,变量名(标识)
  • let 即关键字(let:允许,许可,让,要)

  2.1.4,变量的赋值

                                                      用 “=” 赋值

#JavaScript(基础入门保姆级教程)【初级01】_第14张图片

2.1.5,更新变量

#JavaScript(基础入门保姆级教程)【初级01】_第15张图片

#JavaScript(基础入门保姆级教程)【初级01】_第16张图片

2.1.6,小案例

     2.1.6.1,小案例一:输入输出小案例, 跳出弹窗输入数据,在浏览器打印出数据

                        // 1,用户输入 2,内部处理保存数据 3,打印输出


具体代码实现





  
  
  Document



  


#JavaScript(基础入门保姆级教程)【初级01】_第17张图片#JavaScript(基础入门保姆级教程)【初级01】_第18张图片  #JavaScript(基础入门保姆级教程)【初级01】_第19张图片

2.1.6.2,小案例二:交换变量的值

有两个变量:num1里面放的是10,num2里面放的是20

交换后 num1里面放的是20,num2里面放的是10

#JavaScript(基础入门保姆级教程)【初级01】_第20张图片

 具体实现 

#JavaScript(基础入门保姆级教程)【初级01】_第21张图片





  
  
  Document



  


#JavaScript(基础入门保姆级教程)【初级01】_第22张图片

 2.1.7,变量的本质

内存:计算机储存数据的地方,相当于一个空间

变量本质:是程序在内存中申请的一块来存放数据的小空间(临时存储空间

#JavaScript(基础入门保姆级教程)【初级01】_第23张图片解释:在内存中开辟了一个空间空间名字叫goods/age ,存的数据为 ‘电脑’/18

2.1.8 ,变量的命名规则与规范

规则不能用关键字

只能用下划线,字母,不能用数字开头,$

字母严格区分大小写

起变量名要规范

小驼峰 : userName

2.1.9,小案例

#JavaScript(基础入门保姆级教程)【初级01】_第24张图片





  
  
  Document



  


#JavaScript(基础入门保姆级教程)【初级01】_第25张图片

#JavaScript(基础入门保姆级教程)【初级01】_第26张图片

#JavaScript(基础入门保姆级教程)【初级01】_第27张图片

#JavaScript(基础入门保姆级教程)【初级01】_第28张图片

2.2.0,Var 和Let关键字的区别

#JavaScript(基础入门保姆级教程)【初级01】_第29张图片

三,数组的基本使用

3.1.1,声明的语法

    let 数组名 = ["数据1","数据2","数据3"]

 3.1.2,数组长度查询

  • 数组.length    查数组长度
   //声明数组
    let arr = [1, 2, 3, 4]
    //使用数组
    console.log(arr.length) //4

四,常量

4.1.1,常量的声明方式 

const 名字 = 赋值

常量必须给赋值,不然会报错

#JavaScript(基础入门保姆级教程)【初级01】_第30张图片

  五,数据类型

5.1.1,JS数据类型分类

#JavaScript(基础入门保姆级教程)【初级01】_第31张图片

5.1.2,补充JS是弱数据类型语言

#JavaScript(基础入门保姆级教程)【初级01】_第32张图片

5.1.3,基本数据类型

          5.1.3.1,数字类型(Number)

#JavaScript(基础入门保姆级教程)【初级01】_第33张图片

not a number    NaN:代表一个计算错误,它是一个不正确的或者一个未定义的数学操作所得到的结果

其次NaN是有粘性的,任何对NaN的操作都会返回NaN 

      5.1.3.2,字符串类型(String)

#JavaScript(基础入门保姆级教程)【初级01】_第34张图片

                                                          反引号的位置 

  • 字符串拼接

#JavaScript(基础入门保姆级教程)【初级01】_第35张图片





  
  
  Document



  


  • 模板字符串(必须用反引号)

语法: ·${变量名}·





  
  
  Document



  


 5.1.3.2.1,小案例(练)

页面弹出对话框,输入名字和年龄,页面显示我叫xxx,今年xxx岁了。

#JavaScript(基础入门保姆级教程)【初级01】_第36张图片





  
  
  Document



  


5.1.3.3,布尔型(boolean),未定义(undefined),空(null)

  • boolean --> 真(true) or  假(false)

#JavaScript(基础入门保姆级教程)【初级01】_第37张图片

  • undefined 未定义类型 未赋值的 未定义的
  • 声明一个变量未赋值

  • 空数据类型(null)

null 和undefined 区别 

  1. undefined 表示没有赋值
  2. null 表示赋值了,但是内容为空

         null (表示尚未创建的一个对象)

 5.1.4,检测数据类型(typeof)

#JavaScript(基础入门保姆级教程)【初级01】_第38张图片

5.1.5,数据类型的转换

  • 为什么转换

prompt得到的数据默认为字符串类型的

  • 隐式转换
  •  #JavaScript(基础入门保姆级教程)【初级01】_第39张图片

  • 显示转换

#JavaScript(基础入门保姆级教程)【初级01】_第40张图片#JavaScript(基础入门保姆级教程)【初级01】_第41张图片

补充 parseFloat 

#JavaScript(基础入门保姆级教程)【初级01】_第42张图片

5.1.6,综合小案例

 视频演示+代码

JavaScript小案例





  
  
  Document
  



  

订单确认

5.1.7,补充自增自减运算符和比较运算符

#JavaScript(基础入门保姆级教程)【初级01】_第43张图片

 

比较运算符

#JavaScript(基础入门保姆级教程)【初级01】_第44张图片

5.1.7.1 ,逻辑运算符以及优先级

  • 与或非

            &&       ||            !

  • #JavaScript(基础入门保姆级教程)【初级01】_第45张图片

你可能感兴趣的:(javascript,开发语言,ecmascript)