pink老师的JavaScript零基础课小白学习笔记（学习中)

人间小奇怪

已于 2023-05-30 16:54:00 修改

阅读量220

点赞数

分类专栏： JS 文章标签： javascript 学习笔记

于 2023-04-25 17:56:59 首次发布

本文链接：https://blog.csdn.net/weixin_44759971/article/details/105955097

版权

懵逼小白JS零基础入门学习笔记（持续学习中）

**吨吨吨**

学习笔记来自B站up主>黑马程序员-
视频链接：
戳这里跳转
真小白qwq，简单记录一些碎碎念和业余学习，欢迎大佬们指导，我竖起耳朵听！
奥对了，我用的工具是vs2019~

吨吨吨

一、关于【JavaScript】

1）JavaScript是一种运行在客户端的脚本语言（script是脚本的意思）。
2）最初产生的目的是用来》》表单动态校验。
3）JS的三个组成部分：ECMAScript、DOM（文档对象模型）、BOM（浏览器对象模型）。
4）JS三种书写方式：行内、内嵌、外部
###（1）行内式

<body>
    <%--1.行内式的js 直接写到元素的内部--%>
    <input type="button" value="我是一个没有感情的按钮" onclick="alert('空空如也')" />
</body>

在这里插入图片描述
###（2）内嵌式

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <%--2.内嵌式的js--%>
    <script>
        alert('我是一个弹出框')
    </script>
</head>

在这里插入图片描述
###（3）外部式

    <title></title>
    <%--2.内嵌式的js--%>
    <script>
       // alert('我是一个弹出框')
    </script>
    <%--3.外部js script双标签，新建一个js文件，再引入进来--%>
    <script src="Js/one.js"></script>
</head>
<body>
    <%--1.行内式的js 直接写到元素的内部--%>
    <%--<input type="button" value="我是一个没有感情的按钮" onclick="alert('空空如也')" />--%>
</body>
</html>

这个是js文件内容：

alert('我是外部js写法哟~')

好吧，还是丢个截图吧~
在这里插入图片描述

叮*
5）js的输入输出语句，常用的以下三种：

–>eg：

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        //这是个输入框
        prompt('最近生活还顺利吗？');

        //这是个弹出警示框
        alert('心情有些糟糕，');
        //console 控制台输出 给程序员测试用的
        console.log('我是给程序员看的');
    </script>
</head>

在这里插入图片描述

console.log(‘’);log是日志

二、【变量】

1）什么是变量

白话：变量就是一个装东西的盒子。
通俗：变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。
本质：变量是程序在内存中申请的一块用来存放数据的空间。因为有些数据需要保存，所以需要变量。

2）变量的使用

变量在使用时分为两步：a.声明变量 b.赋值
a.声明变量

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

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

b.赋值

age=8，//给age这个变量赋值为8

**=**用来把右边的值赋给左边的变量空间中，此处代表赋值的意思
变量值是程序员保存到变量空间里的值

c.变量的初始化

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

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

贴码

  <script>
        //1、声明一个age变量
        var age;
        //2、赋值 把值存入这个变量
        age = 8;
        //输出结果
        console.log(age);
        //变量的初始化
        var today = '失恋的第一周';
        console.log(today);
    </script>

在这里插入图片描述
案例：

<script>
        //1、输入用户名 存储到一个name的变量里
        var myname = prompt('请输入您的名字');
        //2、输出这个用户名
        alert(myname);
    </script>

show–>
在这里插入图片描述
小声bb>>尽量不要直接使用 “name” 作为变量名哦,原因可以参考一下这个
https://www.cnblogs.com/zhangjbravo/p/7127069.html

3）变量语法扩展

a.更新变量
变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准

var age 18；
age=81；//最后的结果就是81因为18被覆盖掉了

b.同时声明多个变量
同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开。

var age 10， name =‘aa’， sex=2；

c.声明变量特殊情况
在这里插入图片描述

4）交换两个变量的值

要让apple1和apple2两个变量交换值，借助一个临时变量temp来存储。
贴个图举栗子>>

<script>
        //1、借助临时变量
        //2、把apple1里的东西给apple2
        //3、把apple2里的东西给apple1
        //4、把临时变量里的值给apple2
        var temp; //声明一个临时变量为空
        var apple1 = '青苹果';
        var apple2 = '红苹果';
        temp = apple1;
        apple1 = apple2;
        apple2 = temp;
        console.log(apple1);
        console.log(apple2);
    </script>

在这里插入图片描述

三、【数据类型】

变量的数据类型

JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age = 10；//这是一个数字型
var fine=‘是的’；//这是一个字符串

在代码运行时，变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。
JavaScript拥有动态类型。同时也意味着相同的变量可用作不同的类型

var x=6; //x为数字var x=Bill
var x=‘Bob’ //x为字符串

数据类型分类

JS把数据类型分为两类：
简单数据类型（ Number, string, Boolean, Undefined,Null）
复杂数据类型（ object）

1）简单数据类型（基本数据类型）

在这里插入图片描述

（1）数字型Number
数字型进制：

//1.八进制数字序列范围：0~7
var num1=07； //对应十进制的7
var num2=019；//对应十进制的19
var num3=08; //对应十进制的8
//2.十六进制数字序列范围：0-9,以及A-F
var num= 0xA;

现阶段只需要记住，在JS中八进制前面加0，十六进制前面加0x.

关于非数字的判断，直接甩图吧/懒a
用isNaN()来判断：
在这里插入图片描述

（2）字符串型String
a.字符串转义符

b.字符串长度
通过字符串的length属性可获取整个字符串长度

var stra=“不等了！”；
alert（stra. length）；//显示4

c.字符串拼接
●多个字符串之间可使用+进行拼接，拼接方式为字符串+任何类型=拼接之后的新字符
●拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
●经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值

<script>
        var aa = 'are you ok ？';
        console.log(aa.length); //检测字符串长度
        //字符串拼接用“+”  只要有字符串和其他类型相拼接，最终显示结果是字符串类型
        console.log('hello' + 'world'); 
        console.log('hello' + 12); 
        console.log('33' + 12); 
        //字符串和变量拼接
        var age = 18;
        console.log('我今年' + age + '岁！');
    </script>

在这里插入图片描述

pos小练习：弹出一个输入框，用户输入今日心情，之后弹出一个警示框显示，显示内容用到变量与字符串拼接。
案例分析，思路：
1、弹出一个输入框，让用户输入今日心情（用户输入）
2、把用户输入的值用变量保存起来，把用户输入的内容与所要输出的字符串拼接起来（程序内部处理）
3、使用alert语句弹出警示框，把输出结果显示出来（输出结果）

<script>
        var mood = prompt('今天心情还好吗？');
        var str = '我今天心情' + mood;
        alert(str);
    </script>

在这里插入图片描述

（3）布尔型Boolean
布尔类型有两个值：true和 false，其中true表示真（对），而false表示假（错）。
布尔型和数字型相加的时候，true的值为1， false的值为0

console. log（true+1）；//结果为2
console. log（false 1）；//结果为1

（4）Undefine和Null
懒癌截图啦~

2）获取变量数据类型

可用typeof来获取检测：
举个栗子：

console.log(typeof mood);
        console.log(typeof true);
        var age = prompt('今天是周几？');
        console.log(age);
        console.log(typeof age);

检测到输入的“周三”是字符型

3）字符类型的转换（此处笔记省略了）

顾名思义：把一种数据类型的变量转换为另一种数据类型。
通常有三种方式：
●转换为字符串类型（略）

●转换为数字型
下面例举三个方法：

//利用parseFloa(变量)或者parseInt（变量）
        console.log(parseInt('3.14')); //3
        console.log(parseFloat('3.14')); //3.14
        console.log(parseFloat('12px')); //12 会去掉ps这个单位
        console.log(parseFloat('myname12')); //NaN
        //利用Number(变量)
        var str = '12';
        console.log(Number(str));
        console.log(Number('12'));
        //利用算术运算 - * / （减、乘、除）  即隐式转换
        console.log('12' - 0); //12 字符串‘12’转换为了数字型12
        console.log('123' - '120'); //3
        console.log('123' * 1); //123

●转换为布尔型（略）

四、【运算符的笔记也省略了~hhh】

<script>
        //前置递增后置递增
        var a = 10;
        a++;//11
        ++a;//12
        var b = 1;
        var c = a++ + ++b;//14 a=13, b=2
        console.log(12 == '12'); //true ==默认转换数据类型，会把字符串型的数据转换为数字型
        //短路运算（逻辑运算）：当有多个表达式（值）时，左边的表达式可以确定结果时就不再继续运算右边的表达式的值

        //逻辑中断逻辑与:
        console.log(123 && 456);//456   除0以外，所有数字都是真
        console.log(0 && 456);//0
        console.log(0 && 1 + 2 && 12 * 2); //0
        //逻辑中断逻辑或
        console.log(12 || 34); //12
        console.log(12 || 34+56); //12
        console.log(0 || 345 || 78); //345

        var num = 0;
        console.log(123 || num++);
        console.log(num); //123
        //运算符优先级
        var a = 3 > 5 && 2 < 7 && 3 == 4;
        console.log(a); //false   f t f
        console.log(4 >= 6 || '你' != '人' && !(12 * 1 == 100) && true);   //true  单独分析，根据逻辑符分四个部分 ，“&&”优先于“||” . f || t && t && t (先算与，完了再算或)
        var num = 10;
        console.log(5 == num / 2 && (2 + 2 * num).toString() === '22'); //true   t && t
    </script>

五、【流程控制分支结构】

流程控制主要有三种结构：顺序结构、分支结构和循环结构，代表三种代码执行的顺序
在这里插入图片描述

分支结构：有if语句和switch语句

1）if语句：

a、语法结构：

 if (条件表达式) {
   
            //（如果条件成立）执行语句
        } else {
   
            //（否则）执行语句
        }

b、执行思路：
如果if里面的条件表达式为真 true，则执行大括号里面的 执行语句
如果if里面的条件表达式为假，则不执行大括号里面的 执行语句，则执行if语句后面的代码。

抛个栗子：

<script>
        var age = prompt('请输入年龄');
        if (age >= 18) {
   
            alert('你可以当我的猫了~');
        } alert('dbq我们有缘无分')
    </script>

在这里插入图片描述

小练习（一定要自己先先想想试着写一下！）
1、判断闰年：
->接收用户输入的年份，如果是闰年弹出是闰年，否则弹出是平年。

<script>
        var year = prompt("请输入要检测的年份");
        if (year % 4 == 0 && year % 100 !== 0 || year % 400 == 0) {
   
            alert('闰年');
        } else {
   
            alert('平年');
        }
    </script>
    <!--或者这样也行-->
    <script>
        var year = prompt("请输入要检测的年份");
        var years = year % 4 == 0 && year % 100 !== 0 || year % 400 == 0;
        console.log(year);
        if (years == true) {
   
            alert('闰年');
        } else {
   
            alert('平年');
        }
    </script>