【前端学习】D1:JavaScript入门

文章目录

  • 前言
  • 1 编程语言
    • 1.1 编程
    • 1.2 计算机语言
    • 1.3 编程语言
    • 1.4 翻译器
    • 1.5 编程语言和标记语言的区别
  • 2 计算机基础
    • 2.1 计算机组成
    • 2.2 数据存储
    • 2.3 数据存储单位
    • 2.4 程序运行
  • 3 初识JavaScript
    • 3.1 JavaScript历史
    • 3.2 JavaScript是什么
    • 3.3 JavaScript的作用
    • 3.4 HTML/CSS/JS的关系
    • 3.5 浏览器执行JS简介
    • 3.6 JS的组成
    • 3.7 JS初体验
    • 3.8 JS注释
    • 3.9 JS输入输出语句
  • 4 变量
    • 4.1 什么是变量
    • 4.2 变量在内存中的存储
    • 4.3 变量的使用
      • 4.3.1 声明变量
      • 4.3.2 赋值
      • 4.3.3 变量初始化
      • 4.3.4 案例
    • 4.4 变量语法扩展
      • 4.4.1 更新变量
      • 4.4.2 同时声明多个变量
      • 4.4.3 声明变量的特殊情况
    • 4.5 变量命名规范
    • 4.6 交换两个变量的值
  • 5 数据类型
    • 5.1 为什么需要数据类型
    • 5.2 变量的数据类型
    • 5.3 数据类型的分类
      • 5.3.1 简单数据类型
      • 5.3.2 数字型Number
      • 5.3.3 字符串型String
      • 5.3.4 布尔型Boolean
      • 5.3.5 Undefined和Null
    • 5.4 获取变量数据类型
      • 5.4.1 获取检测变量的数据类型
      • 5.4.2 字面量
    • 5.5 数据类型转换
      • 5.5.1 什么是数据类型转换
      • 5.5.2 转换为字符串
      • 5.5.3 转换为数字型(*)
      • 5.5.4 转换为布尔型
    • 5.6 扩展阅读
      • 5.6.1 解释型语言和编译型语言
      • 5.6.2 标识符、关键字与保留字
  • 6 总结


前言

这篇文章为我跟随pink老师重新系统学习前端时做的一些笔记。

1 编程语言

1.1 编程

编程:就是让计算机为解决某个问题而是用某种程序设计语言编写程序代码,并最终得到结果的过程。
计算机程序:就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌握的语言来编写的,所以人们要控制计算机一定要通过计算机语言向计算机发出命令。
程序员:从事编程的人员。
上面所定义的计算机指的是任何能够执行代码的设备,可能是智能手机、ATM机、黑莓PI、服务器等。

1.2 计算机语言

计算机语言指用于人与计算机之间通讯的语言,它是人与计算机之间传递信息的媒介。
计算机语言的种类非常多,总的来说可以分成机器语言、汇编语言和高级语言三大类。
实际上计算机最终所执行的都是机器语言,它是由“0”和“1”组成的二进制数,二进制是计算机语言的基础。

1.3 编程语言

可以通过类似于人类语言的“语言”来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言(Programming Language)。
编程语言是用来控制计算机的一系列指令,它有固定的格式和词汇(不同编程语言的格式和词汇不一样),必须遵守。
如今通用的编程语言有两种形式:汇编语言和高级语言。

  • 汇编语言和机器语言实质是相同的,都是直接对硬件操作,只不过指令采用了英文缩写的标识符,容易识别和记忆。
  • 高级语言主要是相对于低级语言而言,它并不是特指某一种具体的语言,而是包括了很多编程语言,常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等。

1.4 翻译器

高级语言所编制的程序不能直接北计算机识别,必须经过转换才能被执行,为此我们需要一个翻译器。
翻译器可以将我们所编写的源代码转换为机器语言,这也被称为二进制化。

1.5 编程语言和标记语言的区别

  • 编程语言有很强的逻辑和行为能力。在编程语言里,会有许多if else、for、while等具有逻辑性和行为能力的指令,这是主动的。
  • 标记语言(HTML)不用于项计算机发出指令,常用于格式化和链接。标记语言的存在是用来被读取的,是被动的。

2 计算机基础

2.1 计算机组成

  • 计算机由硬件与软件构成。
  • 硬件由输入设备(鼠标、键盘、手写板、摄像头等)、输出设备(显示器、打印机、投影仪等)、CPU(负责处理数据与运算)、硬盘和内存(负责存储数据,硬盘永久存储数据,内存暂时存储数据)组成。
  • 软件可分为系统软件(操作系统)和应用软件。

2.2 数据存储

  1. 计算机内部使用二进制0和1表示数据。
  2. 所有数据,包括文件、图片等最终都是以二进制数据(0和1)的形式存放在硬盘中的。
  3. 所有程序,包括操作系统,本质都是各种数据,也以二进制数据的形式存放在硬盘中。平时说的安装软件,其实就是把程序文件复制到硬盘中。
  4. 硬盘、内存都是保存的二进制数据。

2.3 数据存储单位

bit < Byte < KB < GB < TB < …

  • 位(bit):1 bit可以保存一个0或1(最小的存储单位)
  • 字节(Byte):1 B = 8 bit
  • 千字节(KB):1 KB = 8 B
  • 兆字节(Byte):1 MB = 8 KB
  • 吉字节(KB):1 GB = 8 MB
  • 太字节(Byte):1 TB = 8 GB

2.4 程序运行

  1. 打开某个程序时,先从硬盘中把程序的代码加载到内存中。
  2. CPU执行内存中的代码。

3 初识JavaScript

3.1 JavaScript历史

略。

3.2 JavaScript是什么

  • 世界上最流行的语言之一,是一种运行在客户端的脚本语言。
  • 脚本语言:不需要编译,运行过程中由JS解释器(JS引擎)逐行来进行解释并执行。
  • 现在也可以基于Node.js技术进行服务端编程。

3.3 JavaScript的作用

  • 表单动态校验(密码强度检测)(JS产生最初的目的)
  • 网页特效
  • 服务端开发(Node.js)
  • 桌面程序(Electron)
  • App(Cordova)
  • 控制硬件-物联网
  • 游戏开发(cocos2d-js)

3.4 HTML/CSS/JS的关系

HTML/CSS标记语言——描述类语言

  • HTML决定网页结构和内容(决定看到什么),相当于人的身体。
  • CSS决定网页呈现给用户的模样(决定好不好看),相当于给人穿衣服、化妆。

JS脚本语言——编程类语言

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

3.5 浏览器执行JS简介

浏览器分成两部分:渲染引擎和JS引擎。

  • 渲染引擎:用来解析HTML与CSS,速成内核,比如Chrome浏览器的Blink,老版本的WebKit。
  • JS引擎:也称为JS解释器。用来读取网页中的JavaScript代码,对其处理后运行,比如Chrome浏览器的V8。
    浏览器本身并不会执行JS代码,而是通过内置的JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释,每一句源码转换为机器语言,然后由计算机去执行,所以JavaScript语言归为脚本语言,会逐行解释执行。

3.6 JS的组成

  • ECMAScript:JavaScript语法
  • DOM:页面文档对象模型
  • BOM:浏览器对象模型
  1. ECMAScript:是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实际上后两者是ECMAScript语言的视线和扩展。ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。
  2. DOM:文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
  3. BOM:浏览器对象模型(Browser Object Model,简称BOM),提供了独立于内容的、可以与浏览器窗口进行交互的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。

3.7 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代码写到

你可能感兴趣的:(前端学习,前端,学习,javascript)