JavaScript基础1

JavaScript 基础1

初识JavaScript

  • JavaScript 是什么

    • JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思）

    • 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行

    • 现在也可以基于 Node.js 技术进行服务器端编程

  • JavaScript 的作用

    • 表单动态校验（密码强度检测） （ JS 产生最初的目的 ）

    • 网页特效

    • 服务端开发(Node.js)

    • 桌面程序(Electron)

    • App(Cordova)

    • 控制硬件-物联网(Ruff)

    • 游戏开发(cocos2d-js)

  • HTML/CSS/JS 的关系

    • HTML/CSS 标记语言--描述类语言

      • HTML 决定网页结构和内容( 决定看到什么 )，相当于人的身体

      • CSS 决定网页呈现给用户的模样( 决定好不好看 )，相当于给人穿衣服、化妆

    • JS 脚本语言--编程类语言

      • 实现业务逻辑和页面控制( 决定功能 )，相当于人的各种动作

  • 浏览器执行 JS 简介

    • 浏览器分成两部分：渲染引擎和 JS 引擎

      • 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit

      • JS 引擎：也称为 JS 解释器。 用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8

    • 浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

  • JS 的组成

    • ECMAScript

      • ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

      • ECMAScript：ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

    • DOM ——文档对象模型

      • 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

    • BOM ——浏览器对象模型

      • BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

  • JS 初体验

    • JS 有3种书写位置，分别为行内、内嵌和外部。

    • 1、行内式JS

      <input type="button" value="点我试试" onclick="alert('Hello World')" />

      • 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick

      • 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号

      • 可读性差， 在html中编写JS大量代码时，不方便阅读；

      • 引号易错，引号多层嵌套匹配时，非常容易弄混；

      • 特殊情况下使用

    • 2、内嵌JS

      • <script>
            alert('Hello  World~!');
        </script>

      • 可以将多行JS代码写到 <script> 标签中

      • 内嵌 JS 是学习时常用的方式

    • 3、外部S文件

      <script src="my.js"></script>

      • 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用引用外

      • 引部 JS文件的 script 标签中间不可以写代码

      • 适合于JS 代码量比较大的情况

JavaScript注释

  • 单行注释

    • 为了提高代码的可读性，JS与CSS一样，也提供了注释功能。JS中的注释主要有两种，分别是单行注释和多行注释。

    • 单行注释的注释方式如下：

      <script>
          // 我是一行文字，不想被 JS引擎 执行，所以 注释起来
      </srcipt>

      • // 用来注释单行文字（ 快捷键 ctrl + / ）

  • 多行注释

    • 多行注释的注释方式如下：

      <script>
          /*
          获取用户年龄和姓名
          并通过提示框显示出来
          */
      </srcipt>

      • /* */ 用来注释多行文字（ 默认快捷键 alt + shift + a ）

      • 快捷键修改为： ctrl + shift + /

      • vscode -> 首选项按钮 ->键盘快捷方式 ->查找 原来的快捷键 -> 修改为新的快捷键->回车确认

JavaScript 输入输出语句

  • 为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

    方法 说明 归属
    alert(msg) 浏览器弹出警示框 浏览器
    console.log(msg) 浏览器控制台打印输出信息 浏览器
    prompt(info) 浏览器弹出输入框，用户可以输入 浏览器

    • 注意：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。

    <!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>
            // 这是一个输入框
            prompt('请输入您的年龄');
            // alert 弹出警示框 输出的展示给用户的
            alert('计算的结果是');
            // console  控制台输出   给程序员测试用的
            console.log('我是程序员能看到的');
        </script>
    </head>
    <body>
        
    </body>
    </html>

变量

  • 变量概述

    • 什么是变量

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

      • 通俗：变量是用于存放数据的容器。 我们通过 变量名 获取数据，甚至数据可以修改。

    • 变量在内存中的存储

      • 本质：变量是程序在内存中申请的一块用来存放数据的空间。

      • 类似我们酒店的房间，一个房间就可以看做是一个变量。

  • 变量的使用

    • 变量在使用时分为两步： 1、声明变量 2、赋值

    • 1、声明变量

      <script>
          //  声明变量  
          var age; //  声明一个 名称为age 的变量   
      </script>  
       

      • var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管

      • age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

    • 2、赋值

      <script>
          age = 10; // 给 age  这个变量赋值为 10          
      </script>
       

      • = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思

      • 变量值是程序员保存到变量空间里的值

    • 3、变量的初始化

      <script>
          var age  = 18;  // 声明变量同时赋值为 18          
      </script>
       

      • 声明一个变量并赋值， 我们称之为变量的初始化。

  • 变量语法扩展

    • 更新变量

      • 一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

      <script>
          var age = 18;
          age = 81;   // 最后的结果就是81因为18 被覆盖掉了          
      </script>
       

    • 同时声明多个变量

      • 同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开。

      <script>
          var age = 10,  name = 'zs', sex = 2;       
      </script>
       

    • 声明变量特殊情况

      情况 说明 结果
      var age ; console.log (age); 只声明 不赋值 undefined
      console.log(age) 不声明 不赋值 直接使用 报错
      age = 10; console.log (age); 不声明 只赋值 10
       
      <!DOCTYPE html>
      <html lang="en">
      ​
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Document</title>
          <script>
              // 1. 更新变量
              var myname = 'pink老师';
              console.log(myname);
              myname = '迪丽热巴';
              console.log(myname);
              // 2. 声明多个变量
              // var age = 18;
              // var address = '火影村';
              // var gz = 2000;
              var age = 18,
                  address = '火影村',
                  gz = 2000;
              // 3. 声明变量的特殊情况
              // 3.1 只声明不赋值 结果是？  程序也不知道里面存的是啥 所以结果是 undefined  未定义的
              var sex;
              console.log(sex); // undefined
              // 3.2  不声明 不赋值 直接使用某个变量会报错滴
              // console.log(tel);
              // 3.3 不声明直接赋值使用
              qq = 110;
              console.log(qq);
          </script>
      <head>​
      <body>
      ​
      </body>
      ​
      </html>
       

  • 变量命名规范

    • 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name

    • 严格区分大小写。var app; 和 var App; 是两个变量

    • 不能 以数字开头。 18age 是错误的

    • 不能 是关键字、保留字。例如：var、for、while

    • 变量名必须有意义。 MMD BBD nl → age

    • 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName

    • 推荐翻译网站： 有道 爱词霸

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script>
            var app = 10;
            var App = 100;
            console.log(app);
            console.log(App);
            // var 18age;
            // var var; 因为var 有特殊意义了，这个叫做关键字 不能作为变量名的   for  while if
            // name 我们尽量不要直接使用name 作为变量名
            // console.log(tel);
            console.log(name);
        </script>
    </head>
    <bdy>
    </body>
    </html>

数据类型

  • 数据类型简介

    • 为什么需要数据类型

      • 在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

      • 简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。

    • 变量的数据类型

      • 变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

      <script>
          var age = 10;        // 这是一个数字型
          var areYouOk = '是的';   // 这是一个字符串     
      </script>
       

      • 在代码运行时，变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的，运行完毕之后， 变量就确定了数据类型。

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Document</title>
          <script>
              // int num = 10;  java 
              // var num; // 这里的num 我们是不确定属于哪种数据类型的
              var num = 10; // num 属于数字型 
              // js 的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
              var str = 'pink'; // str 字符串型
              // js是动态语言 变量的数据类型是可以变化的
              var x = 10; // x 是数字型 
              x = 'pink'; // x 字符串型
          </script>
      </head>
      <body>
      </body>
      </html>

      • JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

      <script>
          var x = 6;           // x 为数字
          var x = "Bill";      // x 为字符串    
      </script>

    • 数据类型的分类

      • JS 把数据类型分为两类：

        • 简单数据类型 （Number,String,Boolean,Undefined,Null）

        • 复杂数据类型 （object)

  • 简单数据类型

    • 简单数据类型（基本数据类型）

      • JavaScript 中的简单数据类型及其说明如下：

    • 数字型 Number

      • JavaScript 数字类型既可以用来保存整数值，也可以保存小数(浮点数）。

      <script>
          var age = 21;       // 整数
          var Age = 21.3747;  // 小数     
      </script>
       

      • 1、数字型进制

        • 最常见的进制有二进制、八进制、十进制、十六进制。

        <script>
            // 1.八进制数字序列范围：0~7
            var num1 = 07;   // 对应十进制的7
            var num2 = 019;  // 对应十进制的19
            var num3 = 08;   // 对应十进制的8
            // 2.十六进制数字序列范围：0~9以及A~F
            var num = 0xA;   // 对应十进制的10
        </script>
         

        • 现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加 0x

      • 2、数字型范围

        • JavaScript中数值的最大和最小值

        <script>
            alert(Number.MAX_VALUE); // 1.7976931348623157e+308
            alert(Number.MIN_VALUE); // 5e-324
        </script>
         

        • 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308

        • 最小值：Number.MIN_VALUE，这个值为：5e-32

      • 3、数字型三个特殊值

        <script>
            alert(Infinity);  // Infinity
            alert(-Infinity); // -Infinity
            alert(NaN);       // NaN
        </script>
         

        • Infinity ，代表无穷大，大于任何数值

        • -Infinity ，代表无穷小，小于任何数值

        • NaN ，Not a number，代表一个非数值

      • 4、isNaN()

        • 用来判断一个变量是否为非数字的类型，返回 true 或者 false

        <script>
            var usrAge = 21;
            var isOk = isNaN(userAge);
            console.log(isNum);            // false ，21 不是一个非数字
            var usrName = "andy";
            console.log(isNaN(userName));  // true ，"andy"是一个非数字
        </script>
         

    • 字符串型 String

      • 字符串型可以是引号中的任意文本，其语法为 双引号 "" 和 单引号''

      <script>
          var strMsg = "我爱北京天安门~";  // 使用双引号表示字符串
          var strMsg2 = '我爱吃猪蹄~';    // 使用单引号表示字符串
          // 常见错误
          var strMsg3 = 我爱大肘子;       // 报错，没使用引号，会被认为是js代码，但js没有这些语法
      </script>
       

      • 因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

      • 1、 字符串引号嵌套

        • JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)

          <script>
              var strMsg = '我是"高帅富"程序猿';   // 可以用''包含""
              var strMsg2 = "我是'高帅富'程序猿";  // 也可以用"" 包含''
              //  常见错误
              var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配
          </script>
           

      • 2、字符串转义符

        • 类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。

        • 转义符都是 \ 开头的，常用的转义符及其说明如下：

          转义符 解释说明
          \n 换行符，n 是 newline 的意思
          \ \ 斜杠 \
          ' ' 单引号
          " ”双引号
          \t tab 缩进
          \b 空格 ，b 是 blank 的意思
         
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Document</title>
            <script>
                alert('酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最为独特的风景。\n我审视四周，这里，是我的舞台，我就是天地间的王者。\n这一刻，我豪气冲天，终于大喊一声："收破烂啦～"');
            </script>
        </head>
        <body>
        </body>
        </html>

      • 3、字符串长度

        • 字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。

          <script>
              var strMsg = "我是帅气多金的程序猿！";
              alert(strMsg.length); // 显示 11
          </script>
           

      • 4、字符串拼接

        • 多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串

        • 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串 

          <script>
              //1.1 字符串 "相加"
              alert('hello' + ' ' + 'world'); // hello world
              //1.2 数值字符串 "相加"
              alert('100' + '100'); // 100100
              //1.3 数值字符串 + 数值
              alert('11' + 12);     // 1112 
          </script>
           

        • +号总结口诀：数值相加 ，字符相连

      • 5、字符串拼接加强

        <script>
            console.log('小花' + 18);           // 只要有字符就会相连 
            var age = 18;
            // console.log('小花age岁啦');       // 这样不行哦
            console.log('小花' + age);          // 小花18
            console.log('小花' + age + '岁啦');  // 小花18岁啦
        </script>
         

        • 我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值

        • 变量是不能添加引号的，因为加引号的变量会变成字符串

        • 如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，变量写加中间

    • 布尔型 Boolean

      • 布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。

      • 布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

        <script>
            console.log(true + 1);  // 2
            console.log(false + 1); // 1
        </script>
         

    • Undefined 和 Null

      • 一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果

        <script>
            var variable;
            console.log(variable);           // undefined
            // 任何类型+字符串都变为字符串
            console.log('你好' + variable);  // 你好undefined
            console.log(11 + variable);     // NaN
            console.log(true + variable);   //  NaN
        </script>
         

      • 一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)

        <script>
            var vari = null;
            console.log('你好' + vari);  // 你好null
            console.log(11 + vari);     // 11
            //  空的什么没有+1不还是1嘛
            console.log(true + vari);   //  1
        </script>
         

获取变量数据类型

  • 获取检测变量的数据类型

    • typeof 可用来获取检测变量的数据类型

      <script>
          var num = 18;
          console.log(typeof num) // 结果 number      
      </script>
       

    • 不同类型的返回值

  • 字面量

    • 字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

      • 数字字面量：8, 9, 10

      • 字符串字面量：'黑马程序员', "大前端"

      • 布尔字面量：true，false

    • 1、什么是数据类型转换

      • 使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

      • 我们通常会实现3种方式的转换：

        • 转换为字符串类型

        • 转换为数字型

        • 转换为布尔型

    • 2、转换为字符串

      • toString() 和 String() 使用方式不一样。

      • 三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换。

      • 3、转换为数字型（重点）

      • 注意 parseInt 和 parseFloat 单词的大小写，这2个是重点

      • 隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Document</title>
            <script>
                // var age = prompt('请输入您的年龄');
                // 1. parseInt(变量)  可以把 字符型的转换为数字型 得到是整数
                // console.log(parseInt(age));
                console.log(parseInt('3.14')); // 3 取整
                console.log(parseInt('3.94')); // 3 取整
                console.log(parseInt('120px')); // 120 会去到这个px单位
                console.log(parseInt('rem120px')); // NaN
                // 2. parseFloat(变量) 可以把 字符型的转换为数字型 得到是小数 浮点数
                console.log(parseFloat('3.14')); // 3.14
                console.log(parseFloat('120px')); // 120 会去掉这个px单位
                console.log(parseFloat('rem120px')); // NaN
                // 3. 利用 Number(变量) 
                var str = '123';
                console.log(Number(str));
                console.log(Number('12'));
                // 4. 利用了算数运算 -  *  /  隐式转换
                console.log('12' - 0); // 12
                console.log('123' - '120'); // 3
                console.log('123' * 1);   // 123
            </script>
        </head>
        <body>
        </body>
        </html>
         

    • 4、转换为布尔型

      • 代表空、否定的值会被转换为 false ，如 ''、0、NaN、null、undefined

      • 其余值都会被转换为 true

        <script>
            console.log(Boolean('')); // false
            console.log(Boolean(0)); // false
            console.log(Boolean(NaN)); // false
            console.log(Boolean(null)); // false
            console.log(Boolean(undefined)); // false
            console.log(Boolean('小白')); // true
            console.log(Boolean(12)); // true
        </script>
posted @   守漠待花开  阅读(50)  评论(0)  编辑  收藏  举报
相关博文：
· JavaScript 基础6
· JavaScript基础2
· JavaScript基础
· 前端【javascript】02-JS基础
· js基础全
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛