一、JavaScript
1.Java、JavaScript、html
①JavaScript与Java的区别类型:
(1)JavaScript----解释性编程语言
(2)Java----编译型的编程语言
html----超文本标记语言
② JavaScript是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。
作用(做什么?)
网页特效 (监听用户的一些行为让网页作出对应的反馈)
表单验证 (针对表单数据的合法性进行判断)
数据交互 (获取后台的数据, 渲染到前端)
服务端编程 (node.js)
③JavaScript的组成
ECMAScript:
规定了js基础语法核心知识。 比如:变量、分支语句、循环语句、对象等等。
Web APIs :
DOM 操作文档,比如对页面元素进行移动、大小、添加删除等操作。
BOM 操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等 。
注意 DOM属于BOM。
2.JavaScript的引用方式
①方式一:js内部式————功能调试
②方式二:js外部式————实际项目推荐使用
③方式三:js内联式————通过事件方法写在标签内部(不推荐使用)
3.常见的输入输出语法
输出方式1:document.write();————将内容显示在浏览器页面中
输出方式2: alert();————方法----逻辑调试中,或者警告语句
输出方式3: console.log();————方法----逻辑调试中
输入方式1: prompt();----交互式弹窗
二、变量和数据类型
1.变量
内存:计算机中存储数据的地方,相当于一个空间。
变量:是程序在内存中申请的一块用来存放数据的小空间。
变量不是数据本身,它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。
// 变量的定义方式----let 变量名称;
let age; //年龄---定义声明
console.log(age);//undefined 未定义---当前变量未赋值
//变量赋值
age = 20;
console.log(age);//20————数字型
// 变量初始化————变量声明和赋值同时写
// 注意:let不允许多次声明一个变量(即同一个变量名称不能重复声明)
let userName = "张三"
console.log(userName);
// 多变量同时声明
let userName1 = "魈", userAge = 18;
2.变量命名规则和规范
(1)规则:
Ø 不能用关键字
Ø 关键字:有特殊含义的字符,JavaScript 内置的一些英语词汇。例如:let、var、if、for等
Ø 只能用下划线、字母、数字、$组成,且数字不能开头
Ø 字母严格区分大小写,如 Age 和 age 是不同的变量
(2)规范:
Ø 起名要有意义
Ø 遵守小驼峰命名法
Ø 第一个单词首字母小写,后面每个单词首字母大写。例:userName
3.数据类型
1.JS 数据类型整体分为两大类:
①基本数据类型
②引用数据类型----内存中开辟空间存储数据---变量(数据存放地址)
检查基本数据类型的方法 typeof
2.基本数据类型
数字类型(number)————整数、小数
字符串(string)————被单引号、双引号、反引号包括的数据都是字符串类型
布尔类型(boolean)————真假值————true/false————条件判断
未定义型(undefined)————变量未赋值,数据类型为undefined
空类型(null)
null 和 undefined 区别:
1.undefined 表示没有赋值
2.null 表示赋值了,但是内容为空
3.补充:模板字符串
反引号,ES6中新增的模板字符串
let uname = "魈";
let age = 18;
console.log("我的姓名为" + uname + ",年龄为" + age + "岁");
console.log(`我的姓名为${uname},年龄为${age}岁`);
3.数据类型转换
类型转换:
(1)隐式(自动)转换----凭借经验判定
//除了+以外,其他的和字符串里的数字数据都是做运算
console.log(11 + 11);//22 +号====加法作用
console.log("11" + 11);//1111 +号====拼接作用
console.log(11 - 11);//0 -号====减法作用
console.log('11' - 11);// -号====减法作用
(2)显式(手动)转换
// 转换为数字型
let str = "124"
console.log(Number(str) + 10);//字符串转换为数字类型
let str2 = "12.345元";
console.log(parseInt(str2));//转换成整数类型
let str3 = '12元';
console.log(parseFloat(str3).toFixed(2));//转换成小数类型
let flag = false;
let under = undefined;
let nul = null;
console.log(Number(flag));//false---0,true---1
console.log(Number(under), typeof Number(under)); //NAN-----非数字,但是number型
console.log(Number(nul));//为空的0
// 转换为字符型
//prompt()中出来的是String型!!!!
let num1 = 20;
console.log(String(num1));
console.log(typeof String(num1));
var num = 15;
var a = num.toString();//转换为十进制
// var a = num.toString(2);----转换为二进制
三、运算符和流程控制
1.算数运算符
数学运算符也叫算术运算符,主要包括加、减、乘、除、取余(求模)。
-
+ 求和
-
-求差
-
*求积
-
/ 求商
-
% 取模(取余数)------ 开发中经常作为某个数字是否被整除
// +加:有些小数相加得出结果为无限小数,如0.3+0.6 let num1 = 10; let num2 = 20; // let num1 = "0.1" - 0;//通过-0,num1从字符串变为数字型 // let num2 = "0.7" - 0; console.log(num1 + num2);//30 // /除 let num3 = 4; let num4 = 5; console.log(num3 / num4); //被除数是0,结果是Infinity:无限大 console.log(1 / 0); // %取余(求模) let num5 = 4; let num6 = 5; console.log(num5 % num6);//4 let a = 12 % 5;//2 console.log(a); let b = 100 % 2; console.log(b);//0 let d = 1 % 1; console.log(d);//0 let c = 1 % 10; console.log(c);//1 let e = 0 % 1; console.log(e);//0 let f = 10 % 0; console.log(f);//NaN
2.赋值运算符
-
+=
-
-=
-
*=
-
/=
-
%=
let num = 10;
num = num + 5;
console.log(num); //15
let num2 = 20;
num2 += 20; //num2=num2+20
console.log(num2);//40
let num3 = 10;
num3 %= 3; //num3=num3%3;
console.log(num3);//1
3.一元运算符
(1)自增:
符号:++
作用:让变量的值 +1
(2)自减:
符号:--
作用:让变量的值 -1
//参与运算时
// 2.1 ++在后,先参与运算,再自增1
let num3 = 10;
let sum1 = num3++ + 10;
console.log(sum1, num3);//20 11
// 2.2 ++在前,先自增1,再参与运算,
let num4 = 20;
let sum2 = ++num4 + 10;
console.log(sum2, num4);//31 21
//只要num++进行过一次运算它就自增一,那个算数式子不需要要算完
let num5 = 10;
console.log(num5++ + 1 + ++num5);// 23
// let sum3 = num5++ + 1 + ++num5;
//num5++参与运算时为10,加完1后,自增1,num5为11
//++num5此时先自增1,即为12
//所以num5++ + 1 + ++num5=10+1+12=23
4.比较运算符
-
> 左边是否大于右边
-
< 左边是否小于右边
-
小于= 左边是否大于或等于右边
-
<= 左边是否小于或等于右边
-
== 左右两边是否相等,将两边的数据进行转换为数值
-
=== 左右两边是否类型和值都相等
-
!== 左右两边是否不全等
比较结果为boolean类型,即只会得到true或false
字符串比较,是比较的字符对应的ASCII码
// == 左右两边是否相等,将两边的数据进行转换为数值
console.log(5 == "5");//true
console.log(5 == 5);//true
// === 左右两边是否类型和值都相等
console.log(5 === "5");//false
console.log(5 === 5); //true
// !== 左右两边是否不全等
console.log(5 !== "5");//true
console.log(5 !== 5); //false
//这里为ASCII表比较
console.log("a" > "b");//false
console.log("a" < "b");//false
//一位一位的比,第一位可以比出大小就不需要比后面的了
console.log("ab" > "ac");//false
console.log("ab" < "bc");//true
//NaN不等于任何值,包括它本身
// console.log(NaN == NaN);//false
//小数最好不要比较很有可能出现精度问题,0.3+0.6=0.899999....
console.log(0.3 + 0.6 == 0.9)//false
5.逻辑运算符
// &&逻辑短路-----左边为假,则输出左边的数据;左边为真,则输出右边的数据
console.log(0 && 10);//0
console.log(10 && 20);//20
// || 逻辑短路-----左边为假,则输出右边的数据;左边为真,则输出左边的数据
console.log(0 || 10);//10
console.log(10 || 20);//10
6.运算符优先级
7.分支语句
程序三大流程控制语句
(1)以前我们写的代码,写几句就从上往下执行几句,这种叫顺序结构
(2)有的时候要根据条件选择执行代码,这种就叫分支结构
(3)某段代码被重复执行,就叫循环结
① if语句
if语句有三种使用:单分支、双分支、多分支
if (条件) {
满足条件后执行的逻辑代码;
}
if (条件) {
满足条件后执行的逻辑代码;
} else {
不满足条件后执行的逻辑代码;
}
if (条件1) {
满足条件1后执行的逻辑代码;
} else if (条件2) {
满足条件2后执行的逻辑代码;
} else if (条件3) {
满足条件3后执行的逻辑代码;
} else {
上述条件都不满足后执行的逻辑代码;
}
②三元运算符
其实是比 if 双分支 更简单的写法,有时候也叫做三元表达式
语法:条件 ? 满足条件执行的代码 : 不满足条件执行的代码;
// 三元运算符
// 条件? 条件成立则返回数据1:条件不成立返回数据2;
/* let age = 20;
if (age >= 18) {
console.log("成年");
} else {
console.log("未成年");
} */
// age >= 18 ? console.log("成年") : console.log("未成年");
/* let str = age >= 18 ? "成年" : "未成年";
console.log(str); */
let num1 = 40;
let num2 = 44;
/* if (num1 > num2) {
console.log("num1-" + num1 + "最大");
} else {
if (num1 < num2) {
console.log("num2-" + num2 + "最大");
} else {
console.log("num2和num2相等");
}
} */
//多个条件
let max = num1 > num2 ? num1 : (num1 < num2 ? num2 : "相等");
console.log(max);
③ switch 语句
switch 语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特 定值的选项时,就可以使用 switch。
switch( 表达式 ){
case value1:
// 表达式 等于 value1 时要执行的代码
break;
case value2:
// 表达式 等于 value2 时要执行的代码
break;
default:
// 表达式 不等于任何一个 value 时要执行的代码
}
四、循环
1.while循环
while (循环条件) {
要重复执行的代码(循环体);
}
// 输出1-10的数字到控制台
// 循环三要素:
// 1.初始化值----计数器
let i = 1;
// 2.循环条件
while (i <= 10) {
console.log(i);
//3.控制变量
i++;
}
2.do-while循环
do {
// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);
执行思路:
1 先执行一次循环体代码
2 再执行条件表达式,如果结果为 true,则继续执行循环体代码,如果为 false,则退出循环,继续执行后面代码 注意:先再执行循环体,再判断,do…while循环语句至少会执行一次循环体代码
let i = 0;
do {
console.log(i);
i++;
} while (i >= 10);
3.for循环
for (初始化变量; 循环条件; 控制变量) {
循环体
}
// 求1到10的和
let sum = 0;
for (let i = 1; i <= 10; i++) {
sum += i;
}
console.log("1到10的和:" + sum);
4.退出循环
continue:结束本次循环,继续下次循环
break:跳出所在的循环
// 退出循环
/* for (let i = 0; i < 10; i++) {
if (i == 6) {
break;//终止循环体
}
console.log(i);
}
*/
for (let i = 1; i < 100; i++) { // 10,20,30,40,50,60,70,80,90
if (i % 5 != 0) {
continue; //跳过本次循环,继续下一次循环
}
console.log(i);
}
五、数组
1.数组
①数组(Array)是一种可以按顺序保存数据的数据类型
(1)数组的创建与查询
②数组创建方式:
方式1:字面量创建
语法: let 数组变量名称=[数组元素1,数组元素2,数组元素4,数组元素n];
方式2:构造函数创建数组
let arr1 = new Array(); //空数组
let arr11 = []; //空数组
let arr2 = new Array(3); //数组的长度为3
let arr22 = [3]; //数组的具体元素为3
let arr3 = new Array(3, 4); //数组的具体元素3,4
let arr33 = [3, 4]; //数组的具体元素3,4
③ 数组查询: 数组变量名称[下标]
let names = ['Osborn', 'Sariel', 'Jesse', 'Evan', 'Charlie'];
console.log(names);
console.log(names[3]);
console.log(names[5]);//undefined
console.log(names.length);//5
(2)数组的遍历
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
2.数组增删改查
let arr = [1, 2, 3, 4, 5];
//增
arr.push(10, 11, 12)//末尾添加数据---数组名称.push(元素1,元素2,……元素n);
arr.unshift(-15, -11);//头部添加数据
//删
let obj = arr.pop();//只是删除数组最后的一个数
//let obj1=arr.splice(删除的位置,删除的个数)----任意位置删除
let obj1 = arr.splice(arr.length - 1, 1);//删除最后一个
//改-----数组名称[下标]=值
arr[4] = 6;
//查----数组名称[下标]
console.log(arr[2]);
//1.删除指定元素 数组名称.splice(起始位置, 删除的个数)
let obj2 = arr.splice(arr.length - 1, 1);
console.log(arr);
console.log(obj2);
//2.添加指定元素 数组名称.splice(起始位置, 0,新元素1,新元素2)
let arr2 = [1, 2, 3];
arr2.splice(1, 0, "张三", "lis");
console.log(arr2);
//3.修改指定元素 数组名称.splice(起始位置, 修改的数目,新元素1,新元素2)
let arr3 = [1, 2, 3, 4];
arr3.splice(1, 2, "5", "6");
console.log(arr3);
六、函数
1.函数
(1)函数----代码功能块
作用----有利于精简代码,方便复用。
(2) 函数的声明语法
function 函数名称() {
函数体;
}
(3)函数调用语法
函数名称(); // 调用方法
//求两个数的和---自己输入数
let num1 = +prompt("第一个数")
let num2 = +prompt("第二个数")
// 1.创建函数
function getSum() {
let sum = num1 + num2;
console.log(sum);
}
// 2.调用函数
getSum();
//求两个数的和---定死调用实参
// 1.创建函数-----形参---局部变量
function getSum1(num1, num2) {
console.log(num1 + num2);
}
// 2.调用函数----实参---实际的数据
getSum1(45, 55);
getSum1(65, 55);
//学生的分数是一个数组,计算每个学生的总分
function getSum(str) {
let sum = 0;
for (let i = 0; i < str.length; i++) {
sum += str[i];
}
console.log("总成绩为" + sum);
}
getSum([10, 20, 30, 40]);
getSum([10, 203, 30, 40, 77]);
getSum([10, 20, 30, 40, 67, 11]);
2.函数返回值
在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
函数内部只能运行到 1 次 return,并且 return 后面代码不会再被执行,所以 return 后面的数据不要换行写
return会立即结束当前函数
函数可以没有 return,这种情况函数默认返回值为 undefined
// 1.创建函数-----形参---局部变量
function getSum(num2, num1) {
let sum = num1 + num2;
console.log("rwererwe");
return sum; //返回计算结果
/*return 作用:
(1)返回数据
(2)结束函数体运算
*/
console.log("sum的和:" + sum);
console.log("232432432");
}
3.作用域
4.匿名函数
具名函数:在声明函数的时候为函数命名
匿名函数:将匿名函数赋值给一个变量,并且通过变量名称进行调用 我们将这个称为函数表达式
匿名函数语法:
lef 函数变量名称=function(){
函数体
}
//调用
函数变量名称()