JavaScript基础

努力变厉害的小超超2024-10-09 8:21

day01 JS入门

一、初识javaScript

1.javaScript概述

  • javaScript是世界上最流行的语言之一，是一种在客户端运行的脚本语言（Script是脚本的语言）
  • 脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行
  • 现在也可以基于node.js奇数进行服务端编程 （js可以运行在服务端）

2.javaScript的作用

学完能做什么？

  • js产生最初的目的：表单动态校验（密码强度，用户名和密码格式是否正确...）
  • 网页特效
  • 服务端开发（node.js）
  • 桌面程序
  • App（Cordova）
  • 控制硬件--物联网（Ruff）
  • 游戏开发（cocos2d-js）

3.Html/CSS/Js的关系

  • html/css 描述类语言
    • html决定网页的结构和内容（决定看到什么），相当于人的身体
    • css决定网页要呈现给用户的模样（决定好不好看），相当于人的衣服、化妆
  • js脚本语言 编程类语言
    • 实现业务逻辑和页面控制（决定功能），相当于人的各种动作

4.浏览器执行js

浏览器分为：

  • 渲染引擎
    • 用来解释html和css，俗称内核，比如chrom浏览器的blink，老版本的webkit
  • js引擎
    • 也称之为js解释器。用来读取网页中的javaScript代码，对其处理后运行，比如chrom浏览器的v8引擎

5.js组成

学习js要学习哪些内容

6.js初体验

js的书写位置由3处，分别是：行内、内嵌和外部：

  • 行内式

    html 复制代码 
    <!-- 普通按钮
click:点击 
alert:弹出框
-->
<input type="button" value="普通按钮" onclick="javaScript:alert('hello world')">
<input type="button" value="普通按钮" onclick='alert("hello world")'>

    • 可以将行单或少量的js代码写在html标签的事件属性中。onclick 鼠标点击事件

    • 注意单引号和双引号的使用：在HTML中我们推荐使用双引号，js中我们推荐使用单引号。

    • 这种写法的可读性差，在html中编写大量js代码时，不方便阅读

    • 引号容易出错，引号多层嵌套匹配的时候，容易弄混

  • 内嵌式

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02js初体验-内嵌式</title>
    <script>
        function a(){
            alert('Hello World');
        }
        
    </script>
</head>
<body>
    <input type="button" value="普通按钮" onclick="a()">
</body>
</html>

    • 可以将多行js代码写到script标签中

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

  • 外部js文件

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

7.javaScript注释

7.1 单行注释

语法格式：

单行注释的快捷键： Ctrl + /

javascript 复制代码 
// 我是被注释的内容
var a = 10;  //注释的快捷键  Ctrl + / 或 Ctrl + ？

7.2 多行注释

语法格式：

javascript 复制代码 
/*
            要被注释的内容1
            要被注释的内容2
            ...
*/

快捷键默认是：alt + shift + a

如果要修改默认的快捷键： 搜索alt+shift+a，可以修改成自己习惯的方式，推荐：Ctrl+shift + /

8.js输入输出语法

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

方法 说明
alert(字符串) 浏览器弹出警示框
console.log(字符串) 浏览器控制台打印输出信息
prompt(info) 浏览器弹出输入框，用户可以输入
javascript 复制代码 
//alert('hello world')
//console.log('欢迎投递简历.....')
//prompt('请输入您的姓名:')
//用prompt取过来值,都是string类型

9.变量的概念

9.1 什么是变量

相对的词叫常量，就是不变的。如：1就是1，2就是2

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

9.2 变量在内存中存储

9.3 变量使用

  • 变量的声明
  • 变量的赋值
  • 初始化变量

  • 变量声明

    javascript 复制代码 
    //语法：
var 变量名;
    • var 是js中的关键字，用来声明变量（variable是变量的意思）.使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员去管理整个过程

  • 变量的赋值

    javascript 复制代码 
    num = 10;  //给num这个变量赋值为10

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

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

  • 初始化变量

    javascript 复制代码 
    var num = 10;  //声明变量的同时给变量赋值为10
//声明一个变量并赋值，我们称之为变量的初始化

9.4 变量语法扩展

  • 更新变量

    javascript 复制代码 
    var num;
num = 10;
num = 20;
alert(num);
    • 一个变量被重新赋值后，它原来的值会被覆盖，变量值以最后一次赋值为准

  • 同时可以声明多个变量

    javascript 复制代码 
    var name='张三',age=10,sex='男';
    • 同时声明多个变量时，只需要写一个var，多个变量之间使用英文逗号分隔开

  • 声明变量特殊情况

    • var age = 10;console.log(age)

9.5 变量命名规范

规则：

  • 可以由字母(a-zA-Z)、数字(0-9)、下滑线(_)、或者是美元符号($)
  • 严格区分大小写
  • 不能以数字开头
  • 不能是关键字，保留字。（如：var for while等）
  • 变量名尽量做到由意义，最好做到见名知意
  • 遵守驼峰写法。首字母小写，后面出现单词的首字母大写，如：myFirstName

10.数据类型

10.1数据类型简介

  • 为什么需要数据类型

    • 在计算机中，不同的数据所需要占用的存储空间是不同的（数字1，字符串"stock"），为了便于把数据分成所需要内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型

  • 变量的数据类型

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

    javascript 复制代码 
    var age = 10; //  因为值是数字类型，那么age也就是一个数字类型

age = '年龄';  // 因为现在又重新给它赋值字符串，所以age的数据类型就变为字符串
    • 在代码运行的过程中，变量的数据类型是由js引擎 根据=右边变量值得数据类型来判断得，运行完毕之后，变量就确定了数据类型。JavaScript拥有动态类型

10.2 数据类型的分类

js把数据类型分为了两大类:

  • 简单数据类型
    • Number、string、boolean、undefined、Null
  • 复杂数据类型
    • object
javascript 复制代码 
//javaScript 弱类型语言/动态语言
//以java为例：强类型/静态语言    int num = 10;  num = 5;
//以javaScript 弱类型语言/动态语言  var num = 10;  num = '字符串';

var num = 10;  //num属于Number（数字）类型的
num = 10.2;  //num属于Number（数字）类型的

var str = 'Jack';  //str是string（字符串）类型

var flag = true;  //falg是一个boolean（布尔）型的值，只能取值true/false

10.3 简单数据类型

在javaScript中基本数据类型就称之为------简单数据类型

简单数据类型 说明 默认值
Number 数字型，包含整数值和小数值。如：3，3.14 0
Boolean 布尔值，如：true，false 等价于1 和0 false
String 字符串类型，如：'彭于晏'，注意js里面，字符串都带有引号 ""
Undefined var a; 声明了变量a，但是没有赋值，此时a = undefined undefined
Null var a = null; 声明了变量a为空值 null
10.3.1 数据型Number

javaScript数字类型可以保存整数，也可以保存小数（浮点数）

数字进制

常见的进制有：二进制、八进制、十进制、十六进制

javascript 复制代码 
//十六进制：0-9 A-F
var num = 0xA;

//八进制：,范围0-7
var num4 = 07;
console.log(num4);  //对应十进制中的7
var num5 = 08;
console.log(num5);  //对应十进制中的8
var num5 = 019;
console.log(num5);//对应十进制中的19
数字型的范围

javaScript中数值的最大和最小值

  • 最大值：Number.MIN_VALUE
  • 最小值：Number.MIN_VALUE
数值型的三个特殊值
  • Infinity：代表无穷大，大于任何数值
  • -Infinity：代表无穷小，小于任何数值
  • NaN：Not a Number，代表一个非数值
isNaN

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

javascript 复制代码 
 //is:是  NaN：不是一个数字  
console.log(isNaN('hello')); //返回的是true

console.log(isNaN(10));  //返回false
案例
javascript 复制代码 
var num = 10;  //num是一个数字类型
var PI = 3.14;  //PI是一个数字型

//console.log(typeof(PI))
//2.十六进制 0-9 A-F     数字前面加0x 表示十六进制
var num2= 0x9;
console.log(num2);
var num3 = 0xAF;
console.log(num3);

//3.数字型的最大值
console.log(Number.MAX_VALUE)
//4.数字型最小值
console.log(Number.MIN_VALUE)
//5.无穷大
console.log(Number.MAX_VALUE*2);   //Infinity
//6.无穷小
console.log(-Number.MAX_VALUE*2);  //-Infinity
//7.非数字
console.log('helloWorld' - 100);   //NaN：Not a Number
10.3.2 数据型String

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

javascript 复制代码 
var str= "国庆节假期过去了";   //使用双引号表示字符串
var str2 = '国庆节假期过去了';  //使用单引号表示字符串


//不能这么写
var strMsg3 = 我爱放假;   //报错，没使用引号，会被认为是js代码，但是js没有这种语法

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

字符串引号嵌套

JS可以用单引号嵌套双引号，或者是双引号嵌套单引号（外双内单、外单内双）

不能单引号嵌套单引号或双引号嵌套双引号

javascript 复制代码 
var strMsg1 = '我爱"编程"';
console.log(strMsg1)

var strMsg2 = "我爱'编程'";
console.log(strMsg2)

//错误！
//var strMsg3 = 'hello";
//var strMsg3 = 'hello 'world'';
var strMsg3 = "hello "world"";
字符串转义符

类似于HTML里面的特殊字符，字符串里也有特殊字符，我们称之为转移字符 \n 表示换行

字符串拼接

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

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

javascript 复制代码 
//1.1 字符串"相加"
//alert('hello' + '      ' + 'world');  //hello      world
//1.2 数字字符串"相加"
//alert('100' + '100');  //100100
//1.3 数值字符串 + 数值
alert('11' + 12)   //1112
字符串拼接加强
javascript 复制代码 
console.log('大家好，我今年：' + 18); //相连
var age = 18;
console.log('大家好今年我age岁'); //age是一个字符串
console.log('大家好今年我'+age+'岁'); //此时的age是一个变量
  • 经常会将字符串和变量拼接，变量可以很方便的修改里面的值
  • 变量是不能添加引号的，因为加引号后变量就成了字符串
  • 如果变量两侧都有字符串拼接，中间需要加引号和加号
10.3.3 数据型Boolean

布尔型输出两个值：true 和 false，其中true表示真（对），而false表示（假/错）

javascript 复制代码 
var flag = true;
var falg2 = false;
console.log(flag) //true
console.log(falg2) //false
//布尔型值和数字型相加的时候
console.log(true + 1);   //2
console.log(false + 1);   //1

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

10.3.4 数据型Undefined 和Null
Undefined

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

javascript 复制代码 
var variable;
console.log(variable); //undefined

console.log('你好' + variable);  //你好undefined
console.log(11 + variable);     // NaN  (不是一个数字)
console.log(true + variable);   // NaN  (不是一个数字)
Null

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

javascript 复制代码 
var vari = null;
console.log('你好' + vari); //你好null
console.log(11 + vari);     // 11
console.log(true + vari);   // 1

10.4 获取变量数据类型

typeof

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

javascript 复制代码 
var flag = true;
//两种写法
console.log(typeof(flag)) ; //结果boolean
console.log(typeof flag) ; //结果boolean
类型 例 结果
String typeof 'zhangsan' "string"
Number typeof 18 "number"
Boolean typeof true "boolean"
Undefined typeof undefined "undefined"
Null typeof null "object"
字面量

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

  • 数字字面量： 1，2，3... 8，9，10...
  • 字符串字符串： '今天星期一'
  • 布尔型字面量：true，false
javascript 复制代码 
var num = 10;
console.log(typeof num); //number
var str = 'Jack';
console.log(typeof str); //string
var flag = true;
console.log(typeof flag); //boolean
var vari = undefined; // 等同于 var vari;
console.log(typeof vari); //undefined
var timer = null;
console.log(typeof timer); //object


//用prompt取过来值,都是string类型
var age = prompt('请输入您的年龄');
console.log(typeof age); //string

重要结论：用prompt取过来值,都是string类型

10.5 数据类型转换

什么是数据类型转换？

使用表单、prompt获取过来的数据默认都是字符串类型的，此时就不能直接用于简单的计算，而需要转换变量的数据类型，通俗来说，就是把一种数据类型的变量转换成另一种类型的变量，通常转换会有三种方式：

  • 转换为字符串类型

    方式 说明 案例
    toString() 转换成字符串 var num = 1; alert(num.toString());
    String() 强制转换 转换成字符串 var num = 1; alert(String(num));
    加号拼接字符串 和字符串拼接的结果都是字符串 var num = 1; alert(num + '');

    • toString() 和 String() 使用方式不一样的，请大家注意

    • 以上的三种转换方式，更多第三种去实现，并且第三种我们也称之为隐式转换

    javascript 复制代码 
    var num = 10;
num = num.toString(); //将num转换成字符串，重新赋值给num
console.log(num + 1); //101

var num2 = 16;
num2 = String(num2); //将num2转换成字符串，重新赋值给num2
console.log(num2 + 1);

var num3 = 18;
num3 = num3 + ''; //将num3转换成字符串，重新赋值给num3
console.log(num3 + 1)

  • 转换为数值类型 [重点]

    方式 说明 案例
    parseInt(string) 函数 将string类型的转换成数值型 parseInt('7')
    parseFloat(string) 函数 将string类型转换成浮点数类型 parseFloat('3.14')
    Number() 强制转换 将string类型转换成数值类型 Number('55')
    js隐士转换 ( - * /) 利用算数运算隐士转换成数值型 '12' - 0

    • 注意：parseInt 和parseFloat单词的大小写，这两个都很重要

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

    javascript 复制代码 
    //1.parseInt(string)  : 转换成整数
// var age = prompt('请输入年龄：')
// age = parseInt(age);  //将age转换成数值型数据，然后赋值给变量age
// console.log(typeof age);

console.log(parseInt('3.14'));  //3
console.log(parseInt('120px'));  //120  会舍去px单位
console.log(parseInt('rem120px'));  //NaN

//2.parseFloat(string) : 转换为浮点型
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 + 1);
console.log('123' - '120');  //3
console.log('123' * 1);

  • 转换为布尔型

方式 说明 案例
Boolean() 其它类型转换成布尔型 Boolean("true")
  • 代表空、否定的值会被转换成false
  • 其它的值会被转换成true
javascript 复制代码 
//代表空、否定的值会被转换成false，其它的值会被转换成true
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('123')); //true
console.log(Boolean('你好吗')); //true

11.关键字和保留字

  • 关键字
    • 关键字：是指JS本身已经使用了的字，不能再用他们充当变量名和方法名
    • break、continue、case、catch、default、do、while、for、function、if、in、return、switch、this、throw等等
  • 保留字
    • 实际上就是保留的"关键字"，意思是现在虽然不是关键字，但是未来可能会成为关键字，同样不允许使用它们作为变量名
    • class、boolean、byte、char、const、debugger、double、enum、export、extends、final、float、goto、implement、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、volatile等等
相关推荐
bryant_meng37 分钟前
【python】OpenCV—Image Moments
开发语言·python·opencv·moments·图片矩
若亦_Royi1 小时前
C++ 的大括号的用法合集
开发语言·c++
资源补给站2 小时前
大恒相机开发（2）—Python软触发调用采集图像
开发语言·python·数码相机
m0_748247552 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
6.943 小时前
Scala学习记录 递归调用 练习
开发语言·学习·scala
FF在路上3 小时前
Knife4j调试实体类传参扁平化模式修改：default-flat-param-object: true
java·开发语言
真的很上进3 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境？
java·前端·javascript·css·react.js·vue·html
众拾达人4 小时前
Android自动化测试实战 Java篇 主流工具 框架 脚本
android·java·开发语言
皓木.4 小时前
Mybatis-Plus
java·开发语言
不良人天码星4 小时前
lombok插件不生效
java·开发语言·intellij-idea
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07ZZ038 物联网应用与服务赛题第J套08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10VSCode插件 —— Cody AI （免费AI助手！）