JS基础第二天

01-复习第一天内容

<!DOCTYPE html>

<head>

<title>Document</title>

/* 1.直接量是什么？ */

// 直接在 js 中写的数据~~~~~~!

/* 2.数据类型是什么？ */

// 因为 js 中的数据明显可以分成很多类 ,所以就分出来若干个数据类型

/* 3.如何检测数据类型？ */

//typeof --> 类型名称字符串

var a = typeof '小白'; // var a = 'string' ;

var b = typeof (1111122222); // var b = 'number' ;

console.log(a,b);

/* 4.变量的本质是什么？ */

// a.本质上是内存里的一块空间变量名是这个空间的"代号"

// b.通俗的说, 变量就是一个容器用来装数据~~~!!一次只能装一个数据

var tcName = '菜鸟';

tcName = '小白';

console.log(tcName);

console.log(tcName + '好好学习!');

</script>

</head>

<body>

</body>

</html>

01-复习第一天内容

02-数据类型

<!DOCTYPE html>

<head>

<title>Document</title>

// 1.简单的数据类型------------------------------

// 1.1 数值类型 - Number

// a.整数小数负数都属于数值

// b.最大值和最小值 -> Number.MAX_VALUE 和 Number.MIN_VALUE

// C.数值类型中的三个特殊值 :Infinity ,-Infinity ,NaN

// d.无穷大Infinity 无穷小-Infinity

// e.【NaN - 非数值】 (not a number) : 代表算数运算后的错误结果

/* !!!!!A.当算数运算符运算一个不是数值的数据时无法计算结果所以返回NaN */

var num1 = 15 *'小白白';

console.log(num1);

/* !!!!!B.任何值与NaN运算结果都是NaN */

console.log(NaN / 100);

/* !!!!!C.NaN 与任何值都不相等,包括它自己 */

/* D.使用insNaN(x) 来检测x 是不是一个 NaN

如果 x 是一个NaN 就返回true

不是则 false*/

console.log ('isNaN(520) = ' + isNaN(520));

console.log ( 'isNaN(\'嘻嘻\')=' + isNaN('嘻嘻'));

//1.2 字符串的类型 -String

var str1 = '君住长江头';

var str2 = '我住长江尾';

var str3 = '日日"思君"不见\'君';

var str4 = '共饮一江水';

console.log('我要换行\n必须换行~~!');

console.log ( str1, str2, str3 ,str4);

//1.3 布尔值类型 -Boolean

var male = true;

var female = false;

console.log(male,female);

//1.4未定义类型 - Undefined

// 有且只有一个值 Undefined

// 当一个变量声明但没有赋值 ,默认就时 undefined

var a

console.log(a);

//1.5 空类型 - Null

// 有且只有一个值 null

// prompt 输入框 , 用户点击取消时 , 返回的是 null;

var usrName =prompt('请输入您的名字:');

console.log('usrName =' + usrName);

//undefined 和 null 判等

console.log(1==1); // true

console.log(undefined == null); //true

console.log(undefined ===null); // false

/* 2.复杂数据类型--- */

// Object - 对象

// Array - 数组

// Function - 函数

// 自定义类型

</script>

</head>

<body>

</body>

</html>

02-数据类型

03-符合算数运算符

<!DOCTYPE html>

<head>

<title>Document</title>

//1.算数运算符 + - * / % **

// **求次方次幂

console.log(2**3); //2*2*2=8

console.log(3**3); //3*3*3=27

//2. =赋值运算符

// =会将右边的值赋给左边

var a = 1;

// var usrName = prompt('你叫什么名字?');

// console.log(a,usrName);

//3.复合赋值运算符---------

//作用 : 将变量的值取出来 , 与另一个值运算 , 并将结果重新赋值到这个变量

// 口诀: 对某个变量自身做运算

// += -= *= /= %=

//a. +=

var num1 = 1;

// num1 = num1 + 2; num1=3

num1 += 2;

console.log(num1); // num1=3

//b. -=

var num2 = 100;

// num2 = num2 - 50; //num2 = 50

num2 -= 50

console.log(num2); // num2 =50

//c.*=

var num3 = 3;

// num3 = num3 *3; //num3 =9

num3 *= 3

console.log(num3);

//d./=

var num4 = 9;

// num4 = num4 / 3; num4 = 3

num4 /=3;

console.log(num4);

//神奇的+= ----- ---

//a.如果变量是和数值运算 ,那么+=就起到了算数运算的效果

var num =111;

num += 111;

console.log(num);// num = 222

//b. 如果变量是和非数值运算 , 那么+= 就会起到字符串的连接作用

var str = 123;

str += '八千里路云和月';

str += '唧唧复唧唧';

str += '木兰当户织';

console.log('str=' +str); //str=123八千里路云和月唧唧复唧唧木兰当户织

</script>

</head>

<body>

</body>

</html>

03-符合算数运算符

04-比较运算符号

<!DOCTYPE html>

<head>

<title>Document</title>

//1.比较运算符 : 比大小的~~~~!!!!

// 运算符本身没有意义要和两边数据组成表达式才有意义

// > < >= <= == != === !==

// 【永远都会返回 bool值】，要么返回true ,要么返回 false

console.log(1 > 2); // false

console.log(1 < 2); // true

console.log(1 == 2); // false

console.log(1 == 1); // true

// ==只判断值是不是相等 ,不判断类型

// ===全等号判断值也判断类型

console.log(1=='1'); //true

console.log(1==='1'); //false

console.log(1===1); //true

//大于等于和小于等于

// 注意 : 条件是或的关系只要满足一个就返回 true ,只有两个都不满足时才返回 false\

console.log(1 >= 2); //false

console.log(1 >= 1); //true

console.log(1 >= 0); //true

//不等号全不等号

console.log(1 != 1); //false

console.log(1 != 2);//true

console.log(1 != '1');//false

console.log(1 !==1); //false

</script>

</head>

<body>

</body>

</html>

04-比较运算符号

05-逻辑运算符

<!DOCTYPE html>

<head>

<title>Document</title>

// 1.逻辑运算符

// && || !

//1.1 逻辑与&&------

//只有&&两边的数据都为 true 时 ,整个逻辑与表达式才会返回true

// 只要有一个是 false,整个逻辑表达式就会返回 false

// 口诀: 一假都假

// 左边的表达式 && 右边的表达式 -> 表达式结果

// true && true true

// false && true false

// true && false false

// 找男朋友 -- 高富帅情商高

// 如果四个条件都要满足才成立：逻辑与 var isOk = 高 && 富 && 帅 && 情商高;

// 高富帅情商 4个条件都要满足才返回 true

// 只要有一个不满足，都返回 false

var isOk = 1 > 2 && 1 >= 0; //false

// false && true // false

var isOk = 1 == 1 && 1 >= 0; // true

// true && true // true

var isOk = 1 == 1 && 1 >= 0 && 2 > 1;//true

// true && true && 2 > 1

// true && true

//1.2 逻辑或 || ---------------------------------------------------------------

// 只要 || 两边有一个是 true，整个表达式就返回 true

// 两边都是 false，整个表达式才返回 false

// 口诀：一真都真

// 左边的表达式 || 右边的表达式 -> 表达式结果

// true || false true

// false || true true

// false || false false

// 如果四个条件中，满足一个就成立：逻辑或 var isOk = 高 || 富 || 帅 || 情商高;

// 高富帅情商 4个条件只要满足一个就返回 true

// 只有4个条件都不满足，才返回 false

var isOk = 1 > 2 || 1 >= 0; // True

// false || true -> true

var isOk = 1 == 1 || 1==0; // true

// true || false -> true

// 1.3 逻辑非(取反运算符)

// 可以用来将一个布尔值变成相反的值

// !true -> false

// !false -> true

console.log('!true =' + !true);

console.log('!false =' + !false);

console.log(!(1 > 2)); //true

</script>

</head>

<body>

</body>

</html>

05-逻辑运算符

06-条件语句

<!DOCTYPE html>

<head>

<title>Document</title>

//1.顺序结构语句，由上到下的顺序执行每一行代码

/* console.log('白白考试回来了~~');

console.log('他妈妈问他打了多少分');

console.log('小白打了59分');

console.log('他妈妈狠狠的打他屁股了~~~');

console.log('白白睡着了~~~'); */

//2.条件结构语句

//2.1 if 单个条件

// if(bool){

// if 代码块

// }

// 如果 if的小括号中是 true，那么就执行 if代码块(if后紧跟着的大括号里的代码)

// 是false, 那就跳过 if代码块，执行后面的代码

var score = 66;

console.log('白白考试回来了~~');

console.log('他妈妈问他打了多少分');

console.log('白白打了 ' + score + ' 分');

if (score < 60) {

console.log('他妈妈狠狠的打他屁股了~~~');

}

console.log('白白睡着了~~~');

// if else 二选一

/* if (bool) {

if 代码块

}

else {

else代码块

} */

// 如果 if 中的是 true，就执行 if 代码块

// false,就执行 else代码块

//二选一：if else 两个代码块，只会根据条件结果执行一个

var score = 66;

console.log('白白考试回来了~~');

console.log('他妈妈问他打了多少分');

console.log('白白打了' + score + '分');

if (score < 60) {

console.log('他妈妈狠狠的打他屁股了~~~')

} else {

console.log('妈妈奖励一百块')

}

//2.3 if else if else ......多条件

/* 多条件 if 可以用来在一个业务中根据不同条件执行不同的代码，一旦满足一个条件，后面的else if 就不执行了，和多个 if 比起来，执行效率更高

if (bool) {

} else if (bool) {

} else {

}

var score = 18;

console.log('白白考试回来了~~');

console.log('他妈妈问他打了多少分');

console.log('白白打了' + score + '分');

if (score < 30) {

console.log('爸妈混合双打!')

} else if (score >= 30 && score < 60) {

console.log('爸爸单打!')

} else if (score >= 60 && score < 80) {

console.log('妈妈单打~~')

} else if (score >= 80) {

console.log('奖励花裙子!!!!!')

}

var usrName = '小菜鸟';

if (usrName == '小菜鸟') {

console.log('我们一起写代码学编程');

} else if (usrName == '小白白') {

console.log('我们一起去健身');

} else {

console.log('不要和陌生人说话!!!');

}

//2.4 嵌套if

var score = 99;

console.log('白白考试回来了~~');

console.log('他妈妈问他打了多少分');

console.log('白白打了' + score + '分');

if (score < 60) {

console.log('妈妈打她!');

if (score < 30) {

console.log('一顿暴打');

if (score < 10) {

console.log('不知道还会发生什么可怕的事情~~！');

}

} else if (score >= 60 && score < 80) {

console.log('给500块~~~~');

} else if (score >= 80 && score < 100) {

console.log('给1000块~~~~');

} else {

console.log('给10000块~~~~');

}

console.log('小白睡着了~~~');

//3.循环结构语句

</script>

</head>

<body>

</body>

</html>

if 单个条件+if else 二选一

if else if else ......多条件

嵌套if

07-显示类型转换

<html>

<head>

//1. 什么是类型转换？ -- 将一种类型的数据转成另外一种类型

//1.1 转数值 parseInt parseFloat Number

//a.parseInt 转整型数值

// a1.如果遇到小数字符串，会将小数点和小数部分去掉，只转换整数部分

// a2.如果转换的数据不是一个数值字符串，就会转换失败，返回 NaN

// a3.如果遇到非数值，会自动停止转换，只转换非数值前面的数据

// a4.如果最前面是空格，会自动忽略空格，转换后面的数据

// a5.如果中间遇到空格，会自动停止转换，只转换空格前面的数据

var num = parseInt('11'); // '11' -> 11

console.log(typeof num); // number

var num = parseInt('11.1'); //'11.1' -> 11

console.log(num);

var num = parseInt('aaaa'); // NaN

console.log(num);

var num = parseInt('12a34'); // 12

console.log(num);

var num = parseInt('a12'); // NaN

console.log(num);

var num = parseInt(' 12'); //12

console.log(num);

var num = parseInt(' 12 34'); //12

console.log(num);

//案例：将 '100px' -> '110px' --------------------------------------

var divWidth = '100px';

divWidth = parseInt(divWidth); //divWidth = 100

divWidth += 10;// divWidth = 100 + 10;

divWidth += 'px';// 110 + 'px' -> '110px'

console.log('divWidth=' + divWidth);

//b.parseFloat 转小数

var num = parseInt('11.1'); // 11

var num = parseFloat('11.1'); // 11.1

console.log(num);

var num = parseFloat('aaaa'); // NaN

console.log(num);

var num = parseFloat('12a34'); // 12

console.log(num);

var num = parseFloat('a12'); // NaN

console.log(num);

var num = parseFloat(' 12'); //12

console.log(num);

//c.Number 转任何数值

var num = Number('111000');

console.log(num);

var num = Number('111000.777');

console.log(num);

var num = Number('111000aaa111'); // NaN

console.log(num);

//1.2 转字符串

// 数据.toString() String(x)

//a. 数据.toString() 可以用来将数据转成字符串

var num = 11;

console.log(num.toString()); // 11 -> '11'

//注意：数值直接量不能通过 .来调用 toString()方法，因为会被当做小数点

// console.log(11.toString());

console.log(true.toString());

//b.String(x) 可以用来将没有 toString()方法的数据转成字符串，比如：undefined 和 null

// console.log(undefined.toString()); //报错：Cannot read property 'toString' of undefined

var str = String(undefined);

console.log(str);

var str = String(null);

console.log(str);

//1.3 转布尔值

// Boolean(x) 用来将数据转成 true 或者 false

// 会转成 false 的有 8 种： 0 ， -0，NaN ，''，undefined , null , false , document.all

// 其他的全都转成 true

var isOk = Boolean('false');//true

console.log(isOk);

var isOk = Boolean('小白白'); //true

console.log(isOk);

var isOk = Boolean(Infinity); //true

console.log(isOk);

var isOk = Boolean('\n'); //true

console.log(isOk);

</script>

</head>

<body>

</body>

</html>

parseInt 转整型数值

parseFloat 转小数

Number 转任何数值转字符串

最后编辑于：2019.05.22 21:31:18

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,684评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,143评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,214评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,788评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,796评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,665评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,027评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,679评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,346评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,664评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,766评论 1赞 331
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,412评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,015评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,974评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,203评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,073评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,501评论 2赞 343

JS基础第二天

推荐阅读更多精彩内容