JavaScript基础学习（1） | 字节青训营笔记

拿奖去喝AD钙
237 阅读7分钟

👀 这是我参与「第四届青训营 」笔记创作活动的的第4天！

这是一篇非常适合小白一起学习的文章，都是非常基础的。 😀😁😀😁😀😁

🍻1、初识JavaScript

[@5V)GZ]0U6U)M9_NOZVUD6D.gif

  • 🍻JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言

  • 🍻脚本语言，不需要编译，运行过程由js计解释器（js引擎）逐行进行解释并执行

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

👀JavaScript的作用

  • 👀表单动态验证（密码强度检验）（js最初产生的目的）

  • 👀网页特效

  • 👀服务端开发（Node.js）

  • 👀桌面程序（Electron）

  • 👀App（Corsova）

  • 👀控制硬件-物联网（Ruff）

  • 👀游戏开发（cocos2d-js）

👀Html/Css/js的关系

🚦Html/Css是标记语言-描述类语言

  • 👀html 决定网页的结构和内容

  • 👀css决定网页呈现给用户的模样

🚦js脚本语言-编程类语言

  • 👀实现业务逻辑和页面控制（决定功能）

🍻2、浏览器执行JavaScript简介

浏览器分为两部分分别为渲染引擎和js引擎

渲染引擎：用来解析HTML和CSS，俗称内核。

js引擎：也称js解释器，用来读取网页中的js代码，对其处理后运行。

浏览器本身是不会执行js代码，而是通过内置的js引擎来执行js代码的，技术引擎执行代码时逐行解释每一句源码（转化为机器语言）然后由解释器去执行。所以说js语言为脚本语言，会逐行解释执行。

🍻3、JavaScript的组成

JavaScript由三部分组成：

  • 👀JavaScript语法
  • 👀DOM——页面文档对象模型
  • 👀BOM——浏览器对象模型

image.png

🍻4、JavaScript的三种书写位置

  • 👀行内式js

image.png

这样书写可读性差，引号容易错误。在JavaScript中推荐使用单引号，因为Html中用的是双引号，仅仅只是推荐。

  • 👀内嵌式js

image.png

  • 👀外部js

image.png

image.png

外部js适合js代码量比较大的，本人还是比较喜欢外部js的

🎆🎆🎆注意：

在<script src="./js学习.js"></script>中间不能写代码

🍻5、JavaScript注释

  • 👀单行注释

输入//然后注释写到后面即可 快捷键： ctrl+/

  • 👀多行注释

输入 /**/ 然后将注释写到中间即可 快捷键：shift+alt+a

vscode中可以手动修改快捷键，方法如下

image.png

🍻6、JavaScript输入输出语句

js提供了一些输入输出语句

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

image.png

🍻7、变量概述

什么是变量

通俗的讲，变量是用于存放数据的容器，我们通过变量名来获取数据，或修改数据。

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

🍻8、变量的使用

🍻8.1、声明变量

var age; 声明一个名称为age的变量。

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

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

声明多个变量： 只需要一个var，每个变量用逗号隔开

var age,name,nums;

声明变量的特殊情况:

  • 👀只声明不赋值，程序也不知道里面存放的是什么，所以结果是`udefined``（未定义的）。

  • 👀不声明，直接输出，会报错。

  • 👀不声明，直接赋值使用，可以使用。但是不建议，后面会讲原因。

🍻8.2、赋值

image.png

赋值直接使用等号进行赋值，然后就会将右边的赋值给左边。 如图所示：就是将10赋值给age。

我们学习了这么多了，让我们来练练手吧！！！

7e70a91978c999f8ddb1ac3e3c0ed5097873daec1e09e3844.png

🍻9、变量的案例

题目一： image.png

代码如下：

var myname='旗木卡卡西';
var adder='火影村';
var age=30;
var email='kakaxi@itcast.cn';
var gz=2000;
console.log(myname)
console.log(adder)
console.log(age)
console.log(email)
console.log(gz)

效果展示：

image.png

题目二：

image.png

代码如下：

var myname;
myname=prompt('请输入你的姓名');
alert(myname)

**效果展示： **

image.png

image.png

🍻10、变量命名规范

1、变量命名必须以字母、下划线””或者”$”为开头。其他字符可以是字母、、美元符号或数字。

2、变量名中不允许使用空格和其他标点符号，首个字不能为数字。

3、变量名长度不能超过255个字符。

4、变量名区分大小写。(var age;和var Age;是两个变量)

5、变量名必须放在同一行中

6、不能使用脚本语言中保留的关键字、保留字、true、false 和 null 作为标识符。

🍻11、数据类型

为什么需要数据类型：

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

JavaScript的变量，数据类型是只有在程序运行过程中，根据等号右边的值来确认。

var age=10;//这是一个数字型
var names='小为'//这是一个字符型

image.png

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

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

var x=10;//这是一个数字型
var x='fdgad';//这是一个字符型

数据类型可以分为两类：一、简单数据类型 👀👀👀 二、引用数据类型

简单数据类型：

image.png

引用数据类型： 里面包含 function、Array、Date 等。

🍻11.1、数字型

数字型 number 在我们JavaScript中 不管是整数还是小数都是数字型 简单的说 它可以是小数。

数字的进制:

image.png

八进制：在数字前面加0计算八进制

十六进制：0X表示十六进制

JavaScript数字型范围：

image.png

数字型的三个特殊值：

image.png

isNaN()函数:

我们可以用isNaN()函数来检测是否为数字值,是数字值,则返回false不是,则返回true.

image.png

案例如下:

🍻11.2、字符串型

字符串型

引号引起来的都是字符串型

使用引号必须成对 不能单双穿插 通俗的说如果你的字符串型开头是单引号 结尾就不能是双引号

var names='我喜欢你';
var stringsss='我也喜欢你';

个人推荐还是用单引号，因为HTML用的是双引号。

字符串的转义字符：

image.png

字符串长度：

我们可以用专业的代码 length 来测试字符长度，在字符串中空格和标点符号都算一个字符

案例如下：

var a='dfdgffg';
var b='dfadfhjfgsfdg';
console.log(a.length);
console.log(b.length);

效果展示：

image.png

字符串的拼接：

用+号进行拼接，字符串和任何类型的数据用+都会变成字符串
当我们用字符串和变量拼接，变量不能加引号

image.png

案例如下：

image.png

代码如下：

image.png

🍻11.3、布尔型

布尔型只有两个值true和false，true表示真（对），false表示假（错）； 在布尔型和数字型相加的时候，true=1，flase=0；

🍻11.4、undefined

未定义数据类型，和数字型相加的结果是NaN; undefined和字符串类型相加结果为undefined和字符串拼接；

🍻11.5、NULL

空值，和数值型相加为数值型。

获取变量数据类型typeof函数

var num=10;
console.log(typeof num);

注意：prompt 取过来的值是字符型

颜色判断

如图片所示：数值型字体为蓝色等。

image.png

🍻11.6、数据类型转化

转换为字符串型

image.png

转化为数字型

image.png

前两个是重点

注意：大小写

转化为布尔型

image.png

🍻12、扩展阅读

解释型语言和编译型语言

image.png

image.png

image.png

image.png

标识符

image.png

关键字

image.png

保留字

image.png

image.png

🍻12、总结

今天是第一天从开始学习JavaScript，以前只是有点了解JavaScript，但是不是很深，希望通过这次学习，可以更好的掌握JavaScript的语法。这也非常适合小白学习，都是一些基础的东西，希望对小白有点用。我们一起努力，成为更好的自己。😁😀😁😀😁😀！！！

avatar
文章
阅读
粉丝