懵逼小白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>
效果图就不丢啦~
- 2、判断是否结束单身
->接收用户输入的答案,判断是否中奖,如果输入 “我喜欢你”,则提示 “好巧,我也喜欢你”,否则提示 “给爷爬!”
var answer = prompt('今晚月色真好');
if (answer == '我喜欢你') {
alert('好巧,我也喜欢你');