java 服务器端的编程语言
JavaScript 是一种运行在 客户端 的 脚本语言
可用地方
1.网页特效
2.服务端开发(Node.js)
3.命令行工具(Node.js)
4.桌面程序(Electron)
5.APP(Cordova)
6.控制硬件-物联网(Ruff)
7.游戏开发(cocos2d-js)
分为
ECMAScript-javaScript的核心
网景:JavaScript 微软:Jscript
定义了JavaScript的语法规范
JavaScript的核心,描述了语言的基本语法和数据类型,ECMAScript是一套标准,定义了一种语言的标准与具体实现无关
BOM-浏览器对象模型
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等
DOM-文档对象模型
一套操作页面的元素的API
DOM可以把HTML看作是文档树,通过DOM提供的API可以对树上的节点进行操作
变量
变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据
使用变量可以方便的获取或者修改内存中的数据
变量的命名规则和规范
一、规则-必须遵守的,不遵守会报错
由字母、数字、下划线、$符号组成,不能以数字开头
不能是关键字和保留字,例如: for、while。
区别大小写
二、规范-建议遵守的,不遵守不会报错
变量名必须有意义
遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。例如:userName、userPassword
JavaScript数据类型
简单数据类型
Number、String、Boolean、Undefined、Null
Number类型
数值字面量:数值的固定值的表示法 110 1024 60.5
string类型(推荐使用单引号’’)
\n换行
\t空格(tab键)
转义符
当内部需要输入引号时前面加\进行转译
当需要输入\则在\前在加一个\对原本的\进行转译
字符串长度:
length属性用来获取字符串长度
console.log(msg.length);
在名称后面加上.length
字符串拼接:
字符串拼接使用+链接
如果+ 两边是number类型的变量,执行的是数学运算的加
如果+ 两边都是string类型,拼接字符串
如果+ 两边 一边是字符串 一边是数值类型,会先把数值类型自动转化为字符串然后再进行字符串的拼接
boolean类型
Boolean字面量: true和false。区分大小写
计算机内部储存true为1,false为0
(凡是只有两种可能的事情就可以用Boolean类型)
undefined和null
1.undefined表示一个声明了没用赋值的变量,变量只声明的时候值默认是undefined
2.null表示一个空,变量的值如果想为null,必须手动设置
复杂数据类型
object
字面量
在源代码中一个固定值的表示方法
数值字面量:8,9,10
字符串字面量:‘前端’,“程序”
布尔字面量: true ,false
转换成数值类型
number()
1.number()可以把任意值转换为数值,如果要转换的字符串中有一个不是数值的字符,返回NAN
parseInt()
1.var num1 = parseInt(‘12.3abc’); //返回12,如果第一个字符是数字会解析直到遇到非数字结束
2.var num2 = parseInt(‘abc123’); //返回NAN,如果第一个字符不是数字或者符号就返回NAN
parseFloat()
1.parseFloat()把字符串转换成浮点数
2.parseFloat()和parseInt非常相似,不同之处在与parseFloat()会解析第一个,遇到第二个,或者非数字结束
如果解析内容只有整数,解析成整数
取+或-
// 1 Number()
// var str = 'abc'; // Number(str) --> NaN
// var isright = true; // Number(isright) --> 1
// 计算机内部true存储的数是1 存储的 false 是0
// console.log(Number(str));
// console.log(Number(isright));
// console.log(Number('123'));
// Number() 把字符串转换成数值类型的时候,如果字符串中 !有一个! 字符不是数字,返回NAN
// console.log(Number('123abc'));
// 2 parseInt() parse解析 int 整数 (缩写)
var str = '123';
var isright = false;;
console.log(parseInt(str));
// parseInt() 无法把布尔类型转化成数值类型 返回的结果是NAN
console.log(parseInt(isright));
// var s1 = 'abc'; // parseInt(s1) -> NAN
var s1 = '123789abc456'
// parseInt()在转换字符串的时候,如果遇到数字就会转换数字,如果遇到非数字就会返回
console.log(parseInt(s1));
var s2 = 'abc123';
// 如果字符串中第一个字符是非数字 此时返回NAN
console.log(parseInt(s2));
// 3 parseFloat()
// var str = '123.67';
// var isright ='true';
// console.log(parseFloat(str));
// console.log(parseInt(str)); // 返回123
// console.log(parseFloat(isright));
// parseFloat()无法转换布尔类型,返回的是NAN
// var str = '123.12abc';
// console.log(parseFloat(str));
// var str = '123abc';
// console.log(parseFloat(str));
// 4 取正或者负 + -
// var num = -5;
// console.log(num);
// var str ='123';
// console.log(-str);
// var str = '123abc';
// console.log(+str); // 无法把123abc转换为数值类型
// var isok = true;
// console.log(+isok);
var str = '123';
console.log(str - 0);
var str = '123abc';
// -如果一边是数值类型一边是字符串,会先把字符串转成数值类型,在进行数值的减法运算,
// 如果字符串转换成数值类型失败 此时返回NAN
console.log(str - 0);
var str = '123abc';
// +如果有一边是数值类型一边是字符串,会先把数值类型转换成字符串,再举行字符发拼接
console.log(str + 0); // 此处的加不是数学中的加而是字符串中的拼接
// 转化之后黑色的是字符串
转换成布尔类型
Boolean
var str = 'abc';
var unm =123;
var a = null;
var b; // 默认值是undefined
console.log(Boolean(str)); //true
console.log(Boolean(unm)); //true
console.log(Boolean(a)); //false
console.log(Boolean(b)); //false
//转换成false的情况:
// null undefined ''空字符串(若''中间加空格则不是空字符串) 0 NaN
console.log(Boolean(''));
console.log(Boolean(0));
console.log(Boolean(NaN));
console.log(Boolean(-1));
操作符(又叫 运算符 operator)
1.算数运算符
表达式由 操作数 和 操作符 组成,会有一个结果
+ - * %(百分号是取余的意思,例如3%2=1)
var x = 5;
var y = 10;
console.log(x + y); // 15
console.log(x * y); // 50
console.log(x / y); // 0.5
console.log(x % y); // 5
console.log(x / 0); // infinity
console.log(x % 0); // NaN
2.一元运算符
一元运算符:只有一个操作数的运算符
(5 + 6 是两个操作数的运算符 二元运算符)
++ 自身加1
– 自身减1
// var x = 5;
// var y = 10;
// console.log(x + y); // 15
// console.log(x * y); // 50
// console.log(x / y); // 0.5
// console.log(x % y); // 5
// console.log(x / 0); // infinity
// console.log(x % 0); // NaN
// 一元运算符
// 前置++
// var num = 5;
// // ++num 表达式 先让num自身加1 然后在返回表达式的结果
// console.log(++num);
// var num1 = 7;
// console.log(num + ++num1);
// console.log(num1);
// console.log(--num1);
// 后置++
var num = 5;
// num++ 表达式 先返回
console.log(num++); // 5
console.log(num); // 6
var num1 = 7;
console.log(num + num1++); // 13
console.log(num1); // 8
var a = 1; var b = ++a + ++a; console.log(b); // 5
var a = 1; var b = a++ + ++a; console.log(b); // 4
//a++ 先返回表达式的结果a, 再执行a自身+1
var a = 1; var b = a++ + a++; console.log(b); // 3
var a = 1; var b = ++a + a++; console.log(b); // 4
// ++a 表达式 2 a = 2 a++ 表达式 2 a = 3 2+2=4
3.逻辑运算符(布尔运算符)
// 逻辑运算符 (学完判断和运算之后会经常用到) 与 && 或 || 非 !
// 与&& -->并且 只有两个操作数同时为true 结果才为true
// var a = true;
// var b = true;
// console.log(a && b);
// 或 || 只有两个操作数同时为false 结果才为false
// var a = true;
// var b = true;
// console.log(a || b);
// 非 ! -->取反 一元运算符
var a = true;
console.log(!a); //false
4.关系运算符(比较运算符)
// 关系运算符
// < > >= <= 比较大小的
var a = 10;
var b = 5;
console.log(a > b);
console.log(a < b);
// == != 比较相等的
// console.log(a == b);
// console.log(a != b);
// === 相等判断 !== 不等判断
var a = 10;
var b = '10'; // 字符
// == 判断的是变量的值是否相等
console.log(a == b);
// === 判断值和类型都一致才返回true
// !== 值和类型都不相等才会返回true
console.log(a === b);
5.赋值运算符
// 赋值运算符
var num = 5;
var num1= num * 5;
// 25
num1 = num1 + 5;
// 30
// 简化
num1 += 5; // num1 = num1 + 5;
console.log(num1); // --> 35
num1 -= 5; // num1 = num1 - 5;
console.log(num1); // --> 30
// *=
// num1 *= 5; // num1 = num1 * 5;
// numl /=5; num1 %= 5;
num1 %= 5;
console.log(num1); // --> 0
6.运算符的优先级
优先级从高到低
1.() 优先级最高
2.一元运算符 ++ -- !
3.算数运算符 先 * / % 后 + -
4.关系运算符 > >= < <=
5.相等运算符 == != === !==
6.逻辑运算符 先&& 后||
7.赋值运算符
表达式和语句
表达式
一个表达式可以产生一个值,有可能是运算、函数调用、有可能是字面量,表达式可以防止任何需要值的地方。
语句
语句可以理解为一个行为,循环语句和判断语句结束典型的语句、一个程序有很多个语句组成,一般情况下,分割一个一个的语句
流程控制
程序的三种基本结构
1.顺序结构
从上到下依次执行的代码结束顺序结构
2.分支结构(选择结构)
根据不同的情况,执行对应代码
if语句(可以做一个范围的判断)
// 求两个数的最大数
var num1 = 2;
var num2 = 5;
if (num1 > num2) {
console.log('num1: ' + num1);
} else {
console.log('num2: ' + num2);
}
// 判断一个数是偶数还是奇数
var num = 5;
if (num % 2 === 0) {
console.log('num是偶数');
} else {
console.log('num是奇数');
}
// 分数转换,把百分制转换成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90-100 A
// 这个代码略多
// var score = 70;
// if (score >= 90 && score <= 100) {
// console.log('A')
// } else if (score >= 80 && score < 90) {
// console.log('B');
// } else if (score >= 70 && score < 80) {
// console.log('C')
// } else if (score >= 60 && score < 70) {
// console.log('D');
// } else {
// console.log('E');
// }
//简化
// 分数转换,把百分制转换成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90-100 A
var score = 80;
if (score >= 90) {
console.log('A');
} else if (score >= 80) {
console.log('B');
} else if (score >= 70) {
console.log('C');
} else if (score >= 60) {
console.log('B');
} else {
console.log('E');
}
var age = 18;
if (age < 18) {
console.log('未满');
} else {
console.log('满');
}
// 三元运算符
// 获取两个数中的最大值
// 表达式1 ? 表达式2 : 表达式3,
// 表达式1 布尔类型的表达式 --> 返回一个布尔类型
// 当表达式1 成立 返回表达式2的值
// 当表达式1 不成立 返回表达式3的值
// 是对if else语句的一种简化写法
var num1 = 13;
var num2 = 6;
// 表达式1 ? 表达式2 : 表达式3,
// console.log( num1 > num2 ? num1 : num2);
var max = num1 > num2 ? num1 : num2;
console.log(max);
// 判断一个年龄是否成年,当年龄超过18 返回 成年 否者 返回未成年
var age =17;
// console.log( age >= 18 ? '成年' : '未成年');
var msg = age >= 18 ? '成年' : '未成年'; // 这个经常用
console.log(msg);
// switch语句
// (做条件判断 判断输入表达式跟后面常量是值是否相等的 switch做值的相等判断)
// 输入一个数字,打印对应的星期
// == 比较的是值 ===比较值和类型
// switch语句中的判断用的是===
// 1是数值类型的1 而'1'是字符串类型的1 二者不等
// 如果不加break会有穿透效果,会执行到下面的case里代码
var day = 1;
switch (day) {
case 1:
console.log('星期一');
break;
case 2:
console.log('星期二');
break;
default:
console.log('输入的值不在星期范围之内');
break;
}
var score = 20;
score = parseInt(score / 10);
switch (score) {
case 10:
case 9:
console.log('A');
break;
case 8:
console.log('B');
break;
case 7:
console.log('C');
break;
case 6:
console.log('D');
break;
default:
console.log('E');
break;
}
布尔类型的隐形选项
var num = 0;
console.log(Boolean(num));
// 转换成false的情况 0 ''空字符串 NaN undefined
// 隐式类型转换
if (num) {
console.log('hello')
}
var msg;
if (msg) {
console.log('hello');
}
var str = '123';
var isok = !!str; // Boolean(str);
console.log(isok);
3.循环结构
重复做一件事情
while案例
// 打印100以内7的倍数
// var i = 1;
// while (i <= 100) {
// // 判断当前的i是否是7的倍数
// if (i % 7 === 0) {
// console.log(i);
// }
// // i自身+1 !!!!!!!!!!!!!!!!!!!!!!
// i++;
// }
// var i =1;
// while (i <= 100) {
// if (i % 6 === 0) {
// console.log(i);
// }
// i++;
// }
// 打印100以内所有偶数
// var i = 1;
// while (i <= 100) {
// // 判断当前的i是否是偶数
// if (i % 2 === 0) {
// console.log(i);
// }
// // i自身+1
// i++;
// }
// 打印100以内所有偶数的和
// var i = 1;
// var sum = 0;
// while (i <= 100) {
// // 判断当前的i是否是偶数,如果是偶数的话累加
// if (i % 2 === 0) {
// sum += i;
// }
// // i自身+1;
// i++;
// }
// // console.log(sum);在while内会显示相加过程,陈列,在while外显示相加总和
// console.log(sum);
do while 循环
// do...while语句
// do...while循环和while非常像,二者经常可以相互代替,
// 但是di...while的特点是不管条件是否成立,都会执行一次
// 基础语法:
// do {
// // 循环体
// } while (循环条件);
// 1-100之间所有数字的和
// var i = 1;
// var sum = 0;
// do {
// // 循环体
// // 累加
// sum += i;
// // i自身+1 自身是一个循环变量
// i++;
// } while (i <= 100);
// console.log(sum);
var i = 1;
var sum = 0;
while (i <= 101) {
sum += i;
i++;
}
console.log(sum);
// // 求100以内所有3的倍数的和
// var i = 1;
// var sum = 0;
// do {
// // 循环体
// // 判断是否是三的倍数,如果是累加
// if (i % 3 === 0) {
// sum += i;
// }
// // i自身加1
// i++;
// } while (i <= 100);
// console.log(sum);
do {
var msg = prompt('是否进入?','请输入 yes/no');
} while (msg !=='yes');
console.log('欢迎');
for语句
// for语句
// while和do while一般用来解决无法确认次数的循环,for一般在循环次数确定的时候比较方便
// for循环语法:
// for循环的表达式之间用的是 ; 分隔,不是,
// for (初始化表达式1; 条件表达式2; 自增表达式3) {
// // 循环体
// }
// for 实现打印1-100之间所有的数字
// for (var i = 1; i <= 100; i++) {
// console.log(i);
// }
// while 实现打印1-100之间所有的数字
// var i = 1;
// while (i <= 100) {
// console.log(i);
// i++;
// }
// for案例
// 求1-100之间所有数的和
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum);
// 求1-100之间所有数的平均值
var sum = 0;
var avg;
for (var i = 1; i <= 100; i++) {
sum += i;
}
avg = sum / 100;
console.log(avg);
// 求1-100之间所有偶数的和
var sum = 0;
for (var i = 1; i <= 100; i++) {
// 找到偶数
if (i % 2 === 0) {
sum += i;
}
}
console.log(sum);
// 1-100奇数和
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i % 2 !== 0) {
sum += 1;
}
}
console.log(sum);
// 同时求1-100之间所有偶数和奇数的和
var oddsum = 0; // 奇数的和
var evensum = 0; // 偶数的和
for (var i = 1; i <= 100; i++) {
// 判断i是奇数还是偶数
if (i % 2 === 0) {
// 偶数
evensum += i;
} else {
oddsum +=i;
}
}
console.log('奇数的和: ' + oddsum);
console.log('偶数的值: ' + evensum);
调试debug
调试的目的是用来确定问题的原因和位置,并解决错误
程序中的错误有两种 语法错误 逻辑错误
数组
// 数组 是一种数据类型
// number string 只能存储一个值
// 数组 可以存储很多项目 有顺序,很多项形成一个集合,这个集合就是数组 Array
// 数组的字面量 []
var names = ['zs', 'zy', 'fq', 'cj'];
// 如何获取数组中的数据
// 索引/下标 数组中的第一项的索引是从0开始的
console.log(names[0]);
console.log(names[1]);
// 获取数组中最后一项的值 总共的个数减一
console.log(names[3]);
// 如果填总数的化则会显示undefined
console.log(names[4]);
// 数组中存储的数据类型可以不一样
// 虽然可以用 但是不推荐
var names = ['zs', 'by', 18, 19, true];
console.log(names);
// 数组的长度:计算数组中元素的个数
var names = ['my', 'li', '', 'dq', 'dw', 'wy'];
// console.log(names.length);
// console.log(names[0]);
// 获取数组中的最后一个元素
// 如果数组中有29项,最后一项的索引是28, 数组的长度-1
// console.log(names[3]);
console.log(names.length);
console.log(names[names.length - 1]);
// 数组的长度可以动态改变
var names = ['my', 'li', 'dw', 'wy'];
// 如何修改数组中的元素
names[1] = 'fu';
console.log(names);
// 给数组增加一项
names[6] = 'ab1c';
console.log(names);
console.log(names.length);
names[4] = 'abc';
console.log(names);
console.log(names.length);
// 获取数组中的每一项,并打印(遍历数组)
var names = ['my', 'li', 'dw', 'wy'];
for (var i = 0; i < names.length; i++) {
console.log(names[i]);
}
// 遍历数组 先打印最后一项 最后一个 长度-1 倒数第二个 长度-2
var names = ['my', 'li', 'dw', 'wy'];
for (var i = names.length - 1; i >= 0; i--) {
console.log(names[i]);
}
// 补充
var scores = []; // 空数组
console.log(scores.length);
for (var i = 0; i < 10; i++) {
scores[i] = i;
}
console.log(scores);
// 清空数组
scores.length = 0;
console.log(scores);
var array = [52, 63, 55, 58];
console.log(array.length)
// 求一组数中的所有数的和和平均值
var numbers = [25, 62, 58, 55, 26, 82];
// 和
var sum = 0;
// 平均值
var avg;
// 遍历数组
for (var i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
avg = sum / numbers.length;
console.log('这组数的和: ' + sum);
console.log('这组数的平均值: ' + avg);
// 求一组数中的最大值和最小值,以及所在位置(最大值和最小值在数组中的位置)
// 求一组数中的最大值 将复杂的问题 转换成一个个小问题来解决
// var numbers = [25, 62, 58, 55, 26];
// // 假设数组中的第一个数是最大值
// var max = numbers[0];
// for (var i = 1; i < numbers.length; i++) {
// // 比赛 找最大值
// if (max < numbers[i]) {
// max = numbers[i];
// }
// }
// console.log(max);
var numbers = [25, 62, 28, 55, 26];
var max = numbers[0];
var min = numbers[0];
// 最大值的索引
var maxindex = 0;
// 最小值的索引
var minindex = 0;
for (var i = 1; i < numbers.length; i++) {
// 找大的数
if (max < numbers[i]) {
max = numbers[i];
maxindex = i;
}
// 找小的数
if (min > numbers[i]) {
min = numbers[i];
minindex = i;
}
}
console.log(max, min);
console.log(maxindex, minindex);
// 将字符串数数组用|或其他符号分割
var names = ['果子', '白菜', '小小', '馒头', '木树'];
// 让我们把数组中的每一项 用|或其他符号分割,形成一个字符串'果子|白菜|小小|馒头|木树'
// 往元素后面加分割符
// 分隔符
var seperator = '|';
var str = '';
for (var i = 0; i < names.length; i++) {
str += names[i] + seperator;
}
console.log(str);
// 往第二个元素之前加分隔符
// 分隔符
var seperator = '|';
var str = names[0];
var names = ['果子', '白菜', '小小', '馒头', '木树'];
for (var i = 1; i < names.length; i++) {
str += seperator + names[i];
}
console.log(str);
// 要求将数组中的0项去掉,将不为0的值存入一个新的数组,生成新的数组
var numbers = [5, 6, 89, 0, 11, 0, 12, 3, 0];
// 1找到数组中不为0的元素
// for (var i = 0; i < numbers.length; i++) {
// if (numbers[i] !== 0) {
// // numbers[i];
// }
// }
// 2把找到元素中的非0元素储存到一个新的数组中
var newArray = []; //空数组 目的是储存 接下来找到的值
for (var i = 0; i < numbers.length; i++) {
if (numbers[i] !== 0) {
// numbers[i];
// 找到的非0元素,存储到新的数组中
newArray[newArray.length] = numbers[i];
}
}
console.log(newArray);
// 翻转数组
// 1, 2, 3, 4 ———> 4, 3, 2, 1,
var numbers = [4, 5, 7, 9]; // 生成一个新的数组 数组中存储9 7 5 4
var newArray = [];
for (var i = numbers.length - 1; i >=0; i--) {
newArray[newArray.length] = numbers[i];
}
console.log(newArray);
// 冒泡排序,从小到大的排序
// 排序
var numbers = [97, 68, 72, 29, 51, 45];
var count = 0;
// 外层循环:控制趟数,每一趟找到一个最的值
for (var i = 0; i < numbers.length - 1; i++) {
count++;
// 内层循环:控制比较的次数,并且判断两个数的大小,把大的数往后移动,小的数往前移动
for (var j = 0; j < numbers.length - 1 - i; j++) {
count++;
// 两两比较 从小到大排序
if (numbers[j] > numbers[j + 1]) {
// 交换位置
var tmp = numbers[j];
numbers[j] = numbers[j + 1];
numbers[j + 1] = tmp;
}
}
}
console.log(numbers);
console.log(count);
// 冒泡排序-优化-剪裁
var numbers = [97, 68, 72, 29, 51, 45];
for (var i = 0; i < numbers.length - 1; i++) {
count++;
// 假设数据排好顺序了
var isSort = true;
for (var j = 0; j < numbers.length - 1 - i; j++) {
count++;
// 没有排好 就 更改isSort值
isSort = false;
if (numbers[j] > numbers[j + 1]) {
var tmp = numbers[j];
numbers[j] = numbers[j + 1];
numbers[j + 1] = tmp;
}
}
// 某一趟结束,判断排序是否结束
// 如何判断排序是否排好, 根据是否发生了数据交换,如果发生了数据交换说明没有排好
if (isSort) {
// 如果排好顺序
break;
}
}