JavaScript基础学习笔记 第一天

JavaScript基础语法

计算机编程基础

编程语言

• 编程的概念

  • 编程：解决某个问题使用某种程序设计语言编写程序代码，并最终得到结果的过程
  • 计算机程序：计算机所执行的指令集合

• 计算机语言

  • 机器语言：机器能够直接识别的语言

  • 汇编语言：+直接对硬件进行操作，只是加入了一些英文缩写的标识符

  • 高级语言：C、C++、C#、Java、JavaScript……

    编程语言具有很强的逻辑性

计算机基础

• 计算机组成
  • 硬件
    • 输入设备
    • 输出设备
    • 处理器
    • 硬盘
    • 内存
  • 软件
    • 系统软件
    • 应用软件
    • 数据存储
    • 计算机内部是用0和1来表示数据
• 数据存储单位
  • bit<Byte<KByte<MByte<GByte<TByte
• 程序运行
  • 打开某个程序先把程序代码加载到内存中
  • CPU执行内存中的代码

初识JavaScript

JavaScript

• 历史

  • 创始人：布兰登·艾奇

• JavaScript是什么

  • js是一种运行在客户端的脚本语言
  • 脚本语言：是通过js解释器逐行进行编译并执行

• 作用

  • 表单动态校验
  • 网页特效
  • 服务端开发（Node.js）
  • 桌面开发（electron）
  • APP（Cordova）
  • 硬件开发（物联网）
  • 游戏开发
  • HTML&CSS是标记类语言；JavaScript是编程类语言

• 渲染引擎和js引擎

  • js引擎chromeV8
  • 逐行解释的语言被称作脚本语言

• js的组成

  • ECMAScript：规定了JS的编程语法和基础核心知识
  • DOM（文档对象模型）
  • BOM（浏览器对象模型）

js的初体验

• js有三种书写位置，行内式js、内嵌js、外部js

  • 推荐使用单引号

  • 外部js不允许在Script中再书写代码

  • <script src="#"> 这中间不再写代码 </script>
    

• js注释

  • 注释类型：

    • //  1. 单行注释, vscode default : ctrl + /
      
      /* 	2. 多行注释
      	3. 多行注释, set to : ctrl + shift + /
      */
      

• 输入输出

  • 浏览器的弹出框进行输入输出

    • prompt ('info'); // 获取来的内容为字符型的
      alert ('info');
      

  • 控制台输出

    • console.log ('info')
      

变量

变量的概述与使用

• 概述

  • 变量的通用概述：用于存放数据的容器
  • 变量（对于编程）：是程序在内存中申请存放数据的空间

• 使用

  • 声明与赋值

    // 1. 第一种方法
    var i; // 声明一个叫 i 的变量
    i = 1; // 把 1 赋值给 i;
    // 1. 第二种方式, 在定义的同时赋值
    var i = 0;
    

变量拓展

• 更新变量

  • 示例

    var name;
    name = 1;
    console.log (name); // output : 1
    name = 2;
    console.log (name); // output : 2
    

• 声明多个变量

  • 示例

    var a = 1,
        b = 2,
        c = 3;
    

• 声明变量的特殊情况

  • 示例

    var a;
    console.log (a); // output : undefined , 定义不赋值	
    
    console.log (b); // 直接报错 , 不赋值不定义
    
    c = 1;
    console.log (c); //output : 1 是可以输出的 ， 但是不推荐 ，不定义但赋值 , 但是此时变量会变为全局变量
    

变量命名规范

• 只能包含字母，数字，下划线，美元符号
• 字母区分大小写
• 不能以数字开头
• 不能是关键字、保留字
• 变量名需要有意义
• 遵循驼峰命名法
• 不建议使用name，在某些浏览器内是有具体含义的

小结

• 为什么需要变量？
• 变量是什么？
• 变量的本质是什么？
• 变量是怎么使用的？
• 什么是变量的初始化？
• 变量命名规范有哪些？

数据类型

数据类型简介

• 在计算机中不同的数据类型所占的空间是不同的，根据不同的数据类型开辟不同的内存空间
• js的数据类型：js是一个弱类型语言，（TypeScript则是改变了JavaScript的弱类型情况）
  • js 的数据类型是只有在程序运行过程中才能确定数据类型
  • js 是动态语言，变量的数据类型可以变换

简单数据类型

• Number（数字型）

  • 包括int&float，包括整型和浮点型

  • 进制：二进制、八进制、十进制、十六进制

    • 在程序内数字型前面加0表示为八进制
    • 在程序内数字型前面加0x表示为十六进制

  • 数字型的范围 (了解)

    • console.log (Number.MAX_VALUE); // 最大值
      console.log (Number.MIN_VALUE); // 最小值
      console.log (Number.MAX_VALUE * 2); // 无穷大
      console.log (Number.MIN_VALUE * 2); // 无穷小
      

  • 一个判断方法

    • isNaN () // 判断是否为 '非' 数字类型的
      // 示例
      console.log (isNaN(12)); // output : false
      

• Boolean （布尔型）

  • true&false：分别代数值里的1和0

• String （字符串）

  • 可以使用双引号或者单引号

  • 如果需要嵌套那么需要外双内单或者外单内双

  • 字符串转义字符 （必须要写在引号内）

  • 字符串的长度

    • var strMsg = '你好，世界';
      console.log (string.leght (strMsg));
      

  • 字符串的拼接

    • 以 + 链接；字符串和其他数据类型的拼接结果为字符串类型
    • 数值相加，字符相连

• Undefined （未定义型）

  • undefined 与数字型相加得出的结果为NaN

• Null （空类型）

  • null 与数字型相加得出的为数字型原来的值 , 且是原来的数据类型

获取变量数据类型

• typeof可以获取数据类型

  • var a = 123;
    console.log (typeof a); // output : number
    var b = null;
    console.log (typeof b); // output : object 设计之初 null 被设计为对象
    // typeof 取过来的的值是字符串类型
    console.log (typeof (NaN)); // output : number NaN 为 number 类型的
    
    // test 
    var a ;
    console.log (typeof (a)); //output : undefined 
    

• 在控制台蓝色为数字型，黑色为字符串型，灰色为undefined & null

• 字面量：直接可以看得的数值

数据类型的转换

• 把一种数值类型转换为另一种类型

• 转换为字符串

  • var a = 123;
    var str = num.toString (); // 转换为字符串
    console.log (str);
    
    var b = 123;
    console.log (String(b)); // 强制转换
    
    var c = 123;
    console.log (b + ''); // 隐式转换 ，比较常用的
    

• 转换为数字型（重点）

  • // 方法一 :
    var x = prompt('请输入x的值：');
    console.log (parseInt(x)); // 如果有小数位，会直接舍去小数位取整 ; 如果后面带了单位会去掉后面的单位 ， 即会一直取到第一个非数字为止 ， 如果第一个为非数字那么就不会转换为number类型
    
    // 方法二 :
    var x = prompt('请输入x的值：');
    console.log (parseFloat(x)); // 显示小数， 其余与 parseInt 一样
    
    // 方法三 :
    var x = prompt('请输入x的值：');
    var y = Number (x) // 返回值为数字型，但是本身x并不改变
    
    // 方法四 :
    var num = '123';
    console.log ('123' - 0); // 隐式转换 ， output : 123(数字型)
    
    // 方法五 :
    var num = '123';
    console.log (+num); // 隐式转换，也比较常用，但是可读性较差
    

• 转换为布尔类型

  • 除了表示为空与否定的数值，其他的值都被转换为true

    • var str = '123';
      console.log (Boolean (str)); // output : ture
      

额外补充的

解释性语言和编译型语言

• 概述
  • 翻译器的翻译有两种：一种是编译，另外一种是解释，两种的区别是翻译的时间点不同
  • 编译器是在代码执行之前进行编译，生成中间代码
  • 翻译器是在运行时进行即时解释，并立即执行

标识符、关键字、保留字

• 标识符：致开发人员为变量、参数等冠与的名字
• 关键字：
• 预留字：当下暂时不是关键字，