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

已于 2023-09-02 21:37:27 修改
阅读量114 收藏
点赞数 2
文章标签： javascript 开发语言 ecmascript
于 2023-09-02 21:26:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79501633/article/details/132630533
版权

目录

一，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的组成

                                               

 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）颜色就会变成粉色

 

                                             具体代码如下所示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .pink {
    background-color: pink;
  }
</style>

<body>
  <button class="pink">按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <script>
    let bts = document.querySelectorAll('button')
    for (let i = 0; i < bts.length; i++) {
      bts[i].addEventListener('click', function () {
        document.querySelector('.pink').className = ''
        this.className = 'pink'
      })
    }
  </script>
</body>

</html>

1.2，JavaScript的书写位置.

  • 内部JavaScript

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

规范：script标签写在</body>上面

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 内部js -->
  <script>
    // 页面弹出警示窗
    alert('你好，js')
  </script>
</body>

</html>

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

  •  外部JavaScript

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

语法：通过script标签，引入到html页面中。

                                                    代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
 <script src="./js/my.js"></script>
        //中间不要写内容
</body>

</html>
  • 内联JavaScript

代码写在标签内部

语法：

1.3，JavaScript的注释.

1.4，JavaScript的结束符.

结束符：   ；   可以不写

1.5，输入和输出语法.

     1.5.1，输出语句

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    //文档输出内容
    document.write('我是div标签')
    document.write('<h1>我是一级标题</h1>')
    //控制台打印输出
    console.log('调试人员用的')
    console.log('日志');
    //弹窗
    alert('hello world')
  </script>
</body>

</html>

      1.5.2，输入语句

1.6，字面量.

在计算机中描述   事和物

二，JavaScript变量

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

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

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

2.1.2，变量的基本使用

      2.1.3，声明变量：

语法：

  • 声明变量有两部分构成：声明关键字，变量名（标识）
  • let 即关键字（let:允许，许可，让，要）

  2.1.4，变量的赋值

                                                      用 “=” 赋值

2.1.5，更新变量

2.1.6，小案例

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

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

具体代码实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1,用户输入 2，内部处理保存数据 3，打印输出
    let uname = prompt("请输入姓名")
    document.write(uname)
  </script>
</body>

</html>

  

2.1.6.2，小案例二：交换变量的值

有两个变量：num1里面放的是10，num2里面放的是20

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

 具体实现 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let num1 = 10
    let num2 = 20
    let num;
    num = 10
    num1 = 20
    num2 = 10
    console.log(num1, num2);
  </script>
</body>

</html>

 2.1.7，变量的本质

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

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

解释：在内存中开辟了一个空间空间名字叫goods/age ,存的数据为 ‘电脑’/18

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

规则：不能用关键字

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

字母严格区分大小写

起变量名要规范

小驼峰 ： userName

2.1.9，小案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let uname = prompt("请输入您的姓名：,")
    document.write(uname)
    let age = prompt("请输入您的年龄：,")
    document.write(age)
    let gender = prompt('请输入您的性别：,')
    document.write(gender)
  </script>
</body>

</html>

2.2.0,Var 和Let关键字的区别

三，数组的基本使用

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 名字 = 赋值

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

  五，数据类型

5.1.1，JS数据类型分类

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

5.1.3，基本数据类型

          5.1.3.1，数字类型（Number）

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

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

      5.1.3.2，字符串类型（String）

                                                          反引号的位置 

  • 字符串拼接

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let age = 19
    document.write('我今年' + age + '岁了')
  </script>
</body>

</html>
  • 模板字符串（必须用反引号）

语法： ·${变量名}·

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let age = 19
    document.write(`我今年${age}岁了`)
  </script>
</body>

</html>
 5.1.3.2.1，小案例（练）

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let age = prompt("输入年龄")
    let userName = prompt("输入姓名")
    document.write(`我叫${userName},今年${age}岁了`)

  </script>
</body>

</html>

5.1.3.3，布尔型(boolean)，未定义(undefined)，空（null）

  • boolean --> 真（true） or  假（false）

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

  • 空数据类型（null）

null 和undefined 区别 

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

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

 5.1.4，检测数据类型（typeof）

5.1.5，数据类型的转换

  • 为什么转换

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

  • 隐式转换

  •  

  • 显示转换

补充 parseFloat 

5.1.6，综合小案例

 视频演示+代码

JavaScript小案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h2 {
      text-align: center;
    }

    table {
      border-collapse: collapse;
      height: 80px;
      margin: 0 auto;
      text-align: center;
    }

    th {
      padding: 5px 30px;
    }

    table,
    th,
    td {
      border: 1px solid #000;

    }
  </style>
</head>

<body>
  <h2>订单确认</h2>

  <script>
    let goodsName = prompt("输入商品名称")
    let price = +prompt("输入价格")
    let num = +prompt("输入商品数量")
    let total = price * num
    let address = prompt("输入收货地址")
    document.write(`
      <table>
    <tr>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>商品数量</th>
      <th>总价</th>
      <th>收货地址</th>
    </tr>
    <tr>
      <td>${goodsName}</td>
      <td>${price}￥</td>
      <td>${num}</td>
      <td>${total}￥</td>
      <td>${address}</td>
    </tr>
  </table>
  
    `)
  </script>
</body>

</html>

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

 

比较运算符

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

  • 与或非

            &&       ||            ！

bestwishesn
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript极简入门教程（一）：基础篇
10-25
主要介绍了JavaScript极简入门教程（一）：基础篇,本文讲解了JavaScript的基础语法、操作符、运算符等内容,需要的朋友可以参考下
JavaScript基础知识讲解教程，适合初级人员入门学习
04-11
JavaScript基础知识讲解教程，适合初级人员入门学习，用于编写前端html脚本
JavaScript基础教程——入门必看篇
10-22
下面小编就为大家带来一篇JavaScript基础教程——入门必看篇。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript基础入门教程（完整版）.ppt
11-11
JavaScript基础入门教程（完整版）
javascript基础入门.ppt
11-12
javascript基础入门.ppt
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 195
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 231
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
setImmediate不能在浏览器中执行
Keep trying, keep going
05-14 163
的延迟时间设置为 0，但实际的延迟可能会因浏览器的最小延迟时间限制而稍有不同。函数实现类似的效果。函数不是浏览器的标准 API，而。
Vue3详细讲解
贫僧法号依平
05-15 853
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。
echarts的柱状图使用
qq_45331969的博客
05-15 187
【代码】echarts的柱状图使用。
vue3专栏项目 -- 五、权限管理（下）
m0_64931189的博客
05-15 819
我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
SongZhengxing_的博客
05-18 180
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
从零开始开发企业培训APP：在线教育系统源码剖析
meihusdk的博客
05-14 355
开发企业培训APP并非一朝一夕之功，需要全面的需求分析、合理的技术选型和系统的架构设计。在实际开发过程中，应不断根据用户反馈优化系统功能和用户体验。希望本文的剖析能够为有志于开发企业培训APP的开发者提供一些启示和帮助。
JavaScript函数进阶（1）——递归和堆栈
qq_60624992的博客
05-16 400
当一个函数解决一个任务时，在解决的过程中它可以调用很多其它函数。在部分情况下，函数会调用。有关正在运行的函数的执行过程的相关信息被存储在其。通过迭代的思路来实现，使用循环来实现。通过函数来不断调用自身来实现。
Typescript 哲学 - ts模块使用最佳实践
gu2022_3_5_21_23的博客
05-13 209
ts的作用域 默认是全局（global），这也是为什么在 两个ts文件声明同一个变量报错变量名冲突，解决方法是使某个文件以模块的形式存在（文件顶层使用 export 、import ）比如 jquery 库使用js写的，引入 jquery依赖时 全局便有了一个全局变量。语法可以在模块中添加全局声明。，这时可以声明一个 全局的 变量声明对 其访问的属性进行控制。1、（可以通过 /// 语法分割为多个文件）隔离代码的作用域范围、较好的代码组织形式。块中的内容会被视为全局声明。ts 的全局作用域的应用场景。
【MySQL精通之路】AdminAPI-使用
最新发布
Anakki的博客
05-19 678
本文介绍MySQL SHELL提供的MySQL AdminAPI，使您能够，使用它们创建和，并集成。
Vue原理学习:vdom 和 diff算法(基于snabbdom)
m0_74989367的博客
05-15 1221
diff 算法是一个很广泛的，前端常见的例如文本 diff ，json 对象 diff ，还有这里的“树 diff”。文本 diff ，例如 linux 的 diff 命令json diff ，例如树 diff ，如 vdom diffdiff 两棵树的时间复杂度是O(n^3)（不可用的复杂度），例如遍历 Tree1 ，每个节点都要和 Tree2 对比针对 Tree1 的节点，遍历 Tree2 每个节点和它对比重新排序但是，vdom diff 算法做了几个改进，让复杂度变为O(n)只比较同一层级。
python EEL + vue3.js 简单示例
bigcarp的专栏
05-15 186
eel官方示例中暴露的js函数是全局函数，vue中的自定义函数作用域通常都是组件范围内。要让eel.js调用，需要将其升为全局可用。一般方法有 app.config.globalProperties 或 mixin等。
javascript基础入门
05-18
JavaScript 是一种脚本语言，可以嵌入到 HTML 页面中，通过浏览器来解析执行。...以上是 JavaScript 的一些基础入门知识，如果你想深入学习 JavaScript，可以通过网上在线教程、书籍或视频课程来学习。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值