JavaScript基础第01天【笔记+代码】

最新推荐文章于 2024-09-02 17:27:54 发布
最新推荐文章于 2024-09-02 17:27:54 发布
阅读量481 收藏 4
点赞数
分类专栏： JavaScript（黑马） 文章标签： javascript
本文链接：https://blog.csdn.net/weixin_41700993/article/details/106300279
版权
这篇博客详细介绍了JavaScript的基础知识，包括编程语言的分类、计算机语言、翻译器、编程语言与标记语言的区别，以及计算机基础如数据存储单位。接着深入探讨JavaScript，讲解了其起源、作用、与HTML/CSS的关系，以及浏览器如何执行JS。博客还详细介绍了JS的注释、输入输出语句和变量的使用，包括变量的声明、赋值、初始化和命名规范。此外，讨论了数据类型的概念，特别是简单数据类型如Number、String、Boolean、Undefined和Null，以及如何获取和转换变量的数据类型。
摘要由CSDN通过智能技术生成

计算机编程基础、初识JavaScript、变量、数据类型、扩展阅读

计算机编程基础

  • 编程语言
  • 计算机基础

1. 编程语言

1.1 编程

编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。

计算机程序：就是计算机所执行的一系列的 指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。

注意：上面所定义的计算机指的是 任何能够执行代码的设备，可能是智能手机、ATM机、黑莓PI、服务器等等。

1.2 计算机语言

计算机语言 指用于 人与计算机之间通讯的语言，它们是人与计算机之间传递信息的 媒介。

计算机语言的种类非常的多，总的来说可以分成 机器语言 ， 汇编语言 和 高级语言 三大类。

实际上计算机最终所执行的都是 机器语言，它是由"0"和"1"组成的二进制数，二进制是计算机语言的基础。

0 = 00000000 1 = 00000001 2 = 00000010 3 = 00000011 4 = 00000100
5 = 00000101 6 = 00000110 7 = 00000111 8 = 00001000 9 = 00001001 10 = 00001010

1.3 编程语言

可以通过类似于人类语言的"语言"来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言。

编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守。

如今通用的编程语言有两种形式： 汇编语言 和 高级语言 。

  • 汇编语言 和机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆。

  • 高级语言 主要是相对于低级语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言，常用的有c语言、c++、Java、C#、python、PHP、JavaScript、Go语言、Objective-C、Swift等。

    C语言：pus("你好");
PHP：echo "你好";
Java：System.out.println("你好");
JavaScript：alert("你好");

1.4 翻译器

高级语言所编制的程序不能直接被计算机识别，必须经过转换才能被执行，为此，我们需要一个翻译器。

翻译器可以将我们所编写的源代码为机器语言，这也被称为二进制化。记住1和0。

在这里插入图片描述

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

  • 编程语言 有很强的逻辑和行为能力。在编程语言里，你会看到很多if else、for、while等具有逻辑性和行为能力的指令，这是主动的。

  • 标记语言（html）不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的，他是被动的。

总结

  1. 计算机可以帮助人类解决某些问题

  2. 程序员利用编程语言编写程序发出指令控制计算机来实现这些任务

  3. 编程语言有机器语言、汇编语言、高级语言

  4. 高级语言需要一个翻译器转换为计算机识别的机器语言

  5. 编程语言是主动的有很强的逻辑性

2. 计算机基础

2.1 计算机组成

在这里插入图片描述

在这里插入图片描述

2.2 数据存储

  1. 计算机内部使用二进制 0 和 1 来表示数据。

  2. 所有数据，包括文件、图片等最终都是以二进制数据（0和1）的形式存放在硬盘中的。

  3. 所有程序，包括操作系统，本质都是各种数据，也以二进制数据的形式存放在硬盘中。 平时我们所说的安装软件，其实就是把程序文件复制到硬盘中。

  4. 硬盘、内存都是保存的二进制数据。

2.3 数据存储单位

bit < byte < kb < GB < TB < …

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

2.4 程序运行

在这里插入图片描述

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

注意：之所以要内存的一个重要原因，是因为cpu运行太快了，如果只从硬盘中读数据，会浪费cpu性能，
所以，才使用存取速度更快的内存来保存运行时的数据。（内存是电，硬盘是机械）

01 - 编程语言

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>01 - 编程语言</title>
	<script type="text/javascript">
		alert('我是编程语言，来控制电脑网页弹出你好');
		alert('我是编程语言，来控制电脑网页弹出你好');
	</script>
</head>
<body>
</body>
</html>

在这里插入图片描述

初识JavaScript

  • 初识JavaScript
  • JavaScript 注释
  • JavaScript 输入输出语句

1. 初始JavaScript

1.1 JavaScript是什么

  • 布兰登·艾奇 1961~
  • 神奇的大哥用10天完成JavaScript设计。
  • 最初命名为LiveScript，后来在与Sun合作之后将其改名为JavaScript。
    在这里插入图片描述
  • JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚-本语言（Script是脚本的意思）
  • 脚本语言：不需要编译，运行过程中的js解释器（js引擎）逐行来进行解释并执行
  • 现在也可以基于 Node.js技术进行服务器端编程

在这里插入图片描述

为了阅读方便，我们后面把JavaScript 简称为 JS。

1.2 JavaScript的作用

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

1.3 HTML/CSS/JS的关系

在这里插入图片描述

1.4 浏览器执行JS简介

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

  • 渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
  • JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码。对其处理后运行，比如chrome浏览器的V8

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

在这里插入图片描述

1.5 JS的组成

在这里插入图片描述

  1. ECMAScript
    ECMAScript 是由ECMA国际（欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展。
    在这里插入图片描述
    ECMAScript：ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

    更多参看MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview

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

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

1.6 JS初体验

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

  1. 行内式JS
<input type="button" value="点我试试" onclick="alert('Hello World')">
  • 可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如：onclick
  • 注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号
  • 可读性差，在html中编写JS大量代码时，不方便阅读
  • 引号易错，引号多层嵌套匹配时，非常容易弄混
  • 特殊情况下使用

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

  1. 内嵌JS
<script>
	alert('Hello World~!');
</script>
  • 可以将多行JS代码写到 <script> 标签中
  • 内嵌JS是学习时常用的方式

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

  1. 外部JS文件
<script src="my.js"></script>
  • 利用HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
  • 引用外部JS文件的 script 标签中间不可以写代码
  • 适合于JS代码量比较大的情况

02 - JS初体验

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>02 - JS初体验</title>
	<!-- 2. 内嵌式的js -->
	<script type="text/javascript">
		alert('Hello World');
	</script>
	<!-- 3. 外部js script 双标签 -->
	<script src="my.js"></script>
</head>
<body>
	<!-- 1. 行内式的js 直接写到元素的内部 -->
	<input type="button" value="点我试试" onclick="alert('Hello World')">
</body>
</html>

my.js

alert('如果我是DJ，你还爱我吗？');

在这里插入图片描述

2. JavaScript注释

2.1 单行注释

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

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

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

2.2 多行注释

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

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

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

快捷键修改为：ctrl + shift + /
在这里插入图片描述

03 - JS注释

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>03 - JS注释</title>
	<script>
		// 1. 单行注释 ctrl + /
		/* 
		   2. 多行注释
		*/
	</script>
</head>
<body>

</body>
</html>

3. JavaScript输入输出语句

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

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

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

04 - JS输入输出语句

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>04 - JS输入输出语句</title>
	<script>
		// 这是一个输入框
		prompt('请输入您的年龄');
		// alert 弹出警示框 输出的 展示给用户的
		alert('计算的结果是');
		// console 控制台输出 给程序员测试用的
		console.log('我是程序员能看到的');
	</script>
</head>
<body>

</body>
</html>

在这里插入图片描述

变量

  • 变量概述
  • 变量的使用
  • 变量语法扩展
  • 变量命名规范
  • 交换变量案例

1. 变量概述

1.1 什么是变量

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

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

在这里插入图片描述

1.2 变量在内存中的存储

本质：变量是程序在内存中申请的一块用来存放数据的空间。类似我们酒店的房间，一个房间就可以看做是一个变量。

在这里插入图片描述

2. 变量的使用

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

2.1 声明变量

// 声明变量 
var age; // 声明一个 名称为age 的变量
  • var 是一个JS关键字，用来声明变量（variable变量的意思）。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
  • age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

2.2 赋值

age = 10; // 给age这个变量赋值为10
  • = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
  • 变量值是程序员保存到变量空间里的值

2.3 变量的初始化

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

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

05 - 变量

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>05 - 变量</title>
	<script>
		// 1. 声明了一个age的变量
		var age;
		// 2. 赋值 把值存入这个变量中
		age = 18;
		// 3. 输出结果
		console.log(age);
		// 4. 变量的初始化
		var myname = 'bing';
		console.log(myname);
	</script>
</head>
<body>
</body>
</html>

在这里插入图片描述

06 - 变量案例

案例：变量的使用
有个叫卡卡西的人在旅店登记的时候前台让他填一张表，这张表里的内容要存到电脑上，表中的内容有：姓名、年龄、邮箱、家庭住址和工资，存储之后需要把这些信息显示出来，所显示的内容如下：我叫旗木卡卡西，我住在火影村，我今年30岁了，我的邮箱是 kakaxi@itcast.cn，我的工资2000

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>06 - 变量案例</title>
	<script>
		var myname = '旗木卡卡西';
		var address = '火影村';
		var age = 30;
		var email = 'kakaxi@itcast.cn';
		var gz = 2000;
		console.log(myname); // 旗木卡卡西
		console.log(address); // 火影村
		console.
最低0.47元/天 解锁文章
柑橘味柚芽
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
黑马程序员——声明类Person，包含2个成员变量：name、age。定义函数sayHello()，调用时输出：我叫***，今年***岁了。声明类Chinese继承Person
xiaomai0703的专栏
09-15 3429
package com.itheima; /*  *第7题：  * 声明类Person，包含2个成员变量：name、age。定义函数sayHello()，调用时输出：我叫***，今年***岁了。声明类Chinese继承Person  */ public class Person { private String name;//姓名     String gender;//性别
JavaScript 学习笔记
m0_63003627的博客
07-31 589
未定义类型是比较特殊的类型，只有一个值undefined什么 情况出现未定义类型？只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少【直接】为某个变量赋值为undefinedlet num。
javascript基础知识及变量(1)
JNPF快速开发平台的博客
08-15 613
编程 何为编程，计算机为解决某个问题而使用某种程序设计语言编写的程序代码，并最终得到结果的过程 计算机程序 可以通过计算机语言的一系列指令集合来控制计算机 注意：任何能够执行代码的设备都可以称为计算机 例如：ATM 手机 智能机器人等等 计算机语言 计算机语言是指人类与计算机之间通讯的语言，是人类与计算机之间传递信息的媒介。 计算机语言：机器语言 汇编语言 高级语言 计算机最终识别的都是二进制语言，二进制语言是由0和1组成 机器语言 机器语言是由二进制组成的 二进制语言泛指0和1
01_13-输入年龄案例
dolphin066的博客
09-17 684
<!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-...
JavaScript基础第02天【笔记+代码】
weixin_41700993的博客
06-18 1143
文章目录昨日复习JavaScript运算符1. 运算符2. 算术运算符3. 递增和递减运算符03 - 前置递增运算符 昨日复习 JS的单行注释符号是 // 声明变量的关键字是 var JS的输出语句有 console.log 与 alert 与 prompt 把字符串转化为整数的方法是 parseInt 判断数据是否为非数值的方法是 isNaN JavaScript运算符 运算符 算术运算符 递增和递减运算符 比较运算符 逻辑运算符 赋值运算符 运算符优先级 1. 运算符 运算符（operat
JavaScript基础第01天笔记1
08-03
JavaScript是Web开发中不可或缺的一部分，尤其对于前端交互和动态网页有着至关重要的作用。在学习JavaScript的基础时，我们首先需要理解它的基本...深入理解这些基础知识，将有助于成为一个熟练的JavaScript开发者。
01天气网笔记+代码.zip
01-25
【描述】"01天气网笔记+代码" 提示了这是一个关于天气网站开发的学习资料，其中包含了笔记和实际的源代码。笔记部分可能详细记录了开发过程中的思考、技术选型、问题解决方法等，而代码部分则展示了具体的实现逻辑。...
JavaScript基础第01天笔记.pdf
04-28
根据文件内容，以上知识点涵盖了编程语言的基础概念、计算机语言的分类、编程与标记语言的区别、翻译器的功能、计算机的基本组成与数据存储原理、JavaScript语言的起源、功能和执行环境以及ECMAScript标准。
数据类型-1.25弹出网页警示框
qq_44280574的博客
09-24 293
【注意：alert 引号里边是不允许随意自己换行的，会报波浪线 错误】 <!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" cont.
前端Javascript第一天知识点：数据类型（重要）
m0_46597922的博客
04-21 1085
1. 数据类型简介 1.1 为什么需要数据类型 在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。 简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。 变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaS...
js基础day01小结
Leon_940002463的博客
06-29 1316
第02阶段.前端基本功.前端基础.入门语法 计算机知识补充 学习目标 理解 简单了解计算机组成 认识计算机内存 一. 核心内容 1. 计算机组成 1.1 软件（程序） 系统软件：Windows、Linux、macOS 应用软件：浏览器(Chrome/IE/Firefox)、QQ、VSCode、Sublime、Word 1.2 硬件 1.2.1 输入设备： 鼠标、键盘、手写板、摄像...
JavaScript基础第05天【笔记+代码】
weixin_41700993的博客
05-29 1890
函数、作用域、预解析、对象昨日复习01 - arguments使用5. arguments的使用02 - 利用函数求任意个数的最大值03 - 利用函数翻转数组04 - 利用函数冒泡排序05 - 利用函数判断闰年06 - 函数是可以相互调用的6. 函数案例07 - 输出年份的2月份天数08 - 函数的两种声明方式7. 函数的两种声明方式做一个简易计算器09 - JavaScript作用域1. 作用域10 - 变量的作用域2. 变量的作用域11 - JavaScript没有块级作用域3. 作用域链13 -
JavaScript基础第06天【笔记+代码】
weixin_41700993的博客
05-31 1502
11. 内置对象2. 查文档3. Math对象01 - Math对象最大值02 - 封装自己的数学对象03 - Math绝对值和三个取整方法 1. 内置对象 JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象 前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于我们JS 独有的， 我们JS API 讲解 内置对象 就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法） 内置对象最大的优点就是帮
JavaScript基础第04天【笔记+代码】
weixin_41700993的博客
05-29 1288
数组昨日复习01 - 数组的使用1. 数组的概念2. 创建数组知识总结3. 获取数组元素知识总结02 - 遍历数组4. 遍历数组知识总结03 - 数组长度04 - 计算数组的和以及平均值05 - 求数组中的最大值06 - 数组转换为字符串07 - 新增数组元素5. 数组中新增元素知识总结08 - 数组存放1~10个值09 - 筛选数组10 - 数组去重(删除指定数组元素)11 - 翻转数组12 - 复习交换两个变量13 - 冒泡排序14 - 什么是函数1. 函数的概念15 - 函数的使用2. 函数的使用知识
JavaScript基础第03天【笔记+代码】
weixin_41700993的博客
06-24 826
文章目录循环for循环 循环 1. 循环目的 在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句 ` for循环 语法结构for(初始化变量; 条件表达式; 操作表达式 ){ //循环体 } 名称 作用 初始化变量 通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。 条件表达式 用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。 操作表达式 用于确定
Web API - day01【笔记+代码】
weixin_41700993的博客
06-13 663
文章目录1. Web APIs 和 JS 基础关联性2. API 和 Web API1. DOM 简介2. 获取元素01 - getElementById获取元素02 - getElementsByTagName获取某些元素03 - H5新增获取元素方式04 - 获取特殊元素3. 事件基础05 - 事件三要素06 - 执行事件步骤4. 操作元素07 - 操作元素之改变元素内容08 - innerText和innerHTML的区别09 - 操作元素之修改元素属性 1. Web APIs 和 JS 基础关联性
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 109
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
【基础】Three.js加载纹理贴图、加载外部gltf格式文件
最新发布
stay hungry, stay foolish
09-02 903
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值