day5--js基础

<!DOCTYPE html>
<html>
<head>
<title>JS基础</title>

<!-- 2.内部 -->
<script type="text/javascript">
    // 在这儿写js代码
    // alert('你好吗')  //弹出一个提示框
</script>

<!-- 3.外部 -->
<!-- 通过script标签的src属性来导入对应的js文件 -->
<script type="text/javascript" src="04-分之结构.js"></script>

</head>
<body>

<p id="p1">你好</p>
<p id="p2">hello</p>


<!-- 1.内联 -->
<!-- onclick属性后写js代码 -->
<button onclick="document.getElementById('p1').innerHTML='Hello JS'">点我一下</button>


<script type="text/javascript">
    // 在这儿写js代码
    // alert('你好吗')  //弹出一个提示框
    document.write('hi');
    document.getElementById('p2').innerHTML='我最棒';

</script>

</body>

</html>

// 1.语句
// a.js语法上，一条语句结束可以写分号也可以不写分号；但是根据习惯需要在每条的语句的后面添加分号。
// 如果一行要写多条语句，那么每条语句之间必须写分号！
// b.js中没有缩进的规范，但是在实际开发的时候还是要按照python的要求去规划缩进

// 2.注释
// a. 单行注释就是'//注释内容'
// b. 多行注释：'/注释内容/'

// 3.标识符：用来给变量和函数命名的....
// a.由字母数字和下划线以及美元符号( $)组成，并且数字不能开头（硬性要求） // b.不能是关键字（硬性要求） // c.下划线和$ 不开头
// d.见名知义

// 4.字面量(具体的值)
// a.数字：12, 12.3, 12e2
// b.字符串：'abc12' "231hj"
// c.数组：[1,2,3,4,'a','b']
// d.对象：{'a':1, 'c':32}
// e.布尔：true,false
// f.特殊值：null, undefined

// 1.变量：用来存储数据
/*
a.变量的声明：
格式: var 变量名; 或者 var 变量名 = 初值
var: js中声明变量的关键字
变量名: 标识符，驼峰式命名(除了第一个单词首字母小写，其他单词的首字母大写，例如:userName,peopleNumber)
初值: 字面量（表达式）

说明：js中声明变量的时候不用声明变量的类型。同一个变量可以存储不同类型的值
*/

// 声明变量：就是在内存中开辟空间存储数据;
// 变量赋值的时候：数字、字符串和布尔数据存的是值。数组和对象存的是地址

// 1.声明的时候可以给变量赋值，也可以不赋值
// 声明一个变量 num
var num = 20;
// 给num变量赋值
num = 10;
num = 'abc';
// 在控制台打印num的值（console.log相当于python的print）
console.log(num);

// 2.同时声明多个变量
var num1, num2 = true, num3;
console.log(num2);

var arr = [1, 2, 3, 4]
console.log(arr)

// 2.基本数据类型
// typeof 表达式; 查看表达式结果的数据类型
/*
JS中的基本数据类型有: Number(数字)、String(字符串)、Boolean(布尔)、Array(数组)、Object(对象)、null(清空变量的内容)、undefined(定义的变量没有赋值)

Number:a.包含所有的数字(整数、浮点数、科学计数, NaN->不合法的数字) -- 数字类型只有一种，值类型
b.Number() --> 可括号中的数据转换成Number类型。
将字符串转换成数字的时候，只有去掉字符串的引号后剩下的部分是一个数字的字符串才能转换成合法数字，否则结果是NaN
布尔true会转换成1，false转换成0

var num1 = 10
console.log(typeof num1)

var num2 = 2e3
num2 = Number(true)
console.log(num2)

// ================================
/*
String: ---> 值类型
a.可以使用单引号或者双引号引起来的字符集，就是字符串数据：'abc',"12gh"....
b.JS中也可以使用转义字符来表示有特殊功能和特殊意义的字符： \ ，' ，" ， \t ，\n等
c.JS字符也是Unicode字符
d.通过下标获取某个字符:下标范围是0~字符串长度-1.
注意：js中下标不能是负数;也不可以切片

e.通过 new String()去创建一个Object类型的字符串。
*/

var str1 = 'a"bc';
var str2 = "abc"d21";
var str3 = 'a'bc';
var str4 = 'abc\nhujn';
console.log(str4);

// 通过下标获取字符
console.log(str4[0]);

// 获取字符串的长度
console.log(str4.length);

// 创建一个对象类型的字符串123abc
var str5 = new String('123abc');

console.log(str1.charAt(0), typeof str1);
console.log(str5.charAt(0), typeof str5);

// ================================================
// Boolean: true，false
// 1.数字转换成Boolean值，0和NaN会转换成false,其他数字会转换成true
// 2.字符串转换成Boolean值，空串是false,其他的都会转换成true
// 3.null,undefined都会转换成false
var b1 = Boolean(undefined)
console.log(b1)

// ================================================
// Array: 数组类型就是python中的列表
// 1.存数组数据存的是地址
// 2.数组的元素可以是任何类型的数据，可以通过下标去获取对应的元素
// 3.下标的范围：0~长度-1
// 4.通过length可以获取数组元素的个数

var a1 = [1,2,3,'acd',true];
console.log(a1);
console.log(a1[2]);
console.log(a1.length);

// 添加元素
// push:在数组的最后添加一个或者多个元素，返回最新的数组的长度
a1.push(10);
count = a1.push('a','abab');
console.log(a1, count);

// 删除元素
// pop:将数组中的最后一个元素删除，并且返回被删除的元素
del = a1.pop();
console.log(a1, del);

// 切片
// slice(起始下标,结束下标):从数组的起始下标开始，到结束下标前的所有元素，作为一个新的数组的元素并且返回
newArray = a1.slice(0,3);
console.log(newArray);

// 删除指定下标的元素
// splice(下标，个数): 从指定下标开始删除指定个数元素
var a2 = [1,2,3,4,5];
a2.splice(1,2);
console.log(a2);

// 在指定位置添加元素
// splice(下标,0,元素1,元素2,元素3...):在指定的下标前插入指定的一个或者多个元素
var a3 = [1,2,3,4,5];
a3.splice(2,0,'a','b');
console.log(a3);

// 在数组的开头添加一个或者多个元素
a3.unshift('a','b');
console.log(a3);

// 修改元素
a2[0] = 100;
console.log(a2);

// ========================对象========================
// Object: 对象类型就是python中的字典
// 变量存储对象，存的是对象的地址
// 存的时候以键值对的形式去存储数据，这个键可以看成对象的属性

// 创建了一个变量，存的是一个对象的地址
var obj1 = {'a':1, 'b':2, 'c':'abc'};

// 取值: 通过key去取值
console.log(obj1['a']);
// 取值：通过点语法获取属性的值
console.log(obj1.c);

// 修改
obj1['a'] = 100;
obj1.c = '你好';
console.log(obj1);

// 增加: 给不存在的key或者属性去赋值
obj1['d'] = 1001;
console.log(obj1);
obj1.e = 'aaaa';
console.log(obj1);

// 删除指定的键值对/属性
delete obj1.b;
delete obj1['a'];
console.log(obj1);

// 声明对象的时候，属性名可以不用加引号
var obj2 = {name:'yuting', age:18, sex:'女'};
console.log(obj2['name']);
console.log(obj2.name);

// 算术运算符、比较运算符、逻辑运算符、赋值运算符
// 1.算术运算符（+,-,,/, %, ++, --）
// +，-，，/,%和python中的是一样的

// a. 任何数据和字符串相加，结果都是字符串拼接的操作
var str1 = 'aaa'+[1,2,3,4];
console.log(str1);

// b.两个数组相加，并不是数组元素的拼接。而是将数组转换成字符串，然后拼接成一个新的字符串
var arr1 = [1,2,3] + [4,5,6];
console.log([1,2,3])
console.log(arr1);

// c.操作只能作用于两个数字类型
var str2 = 'abc'2;
console.log(str2);

// e.++:自加1操作
var num1 = 10;
var num11 = 10;
num1++; //相当于: num1 += 1, num1 = num1+1
++num11
console.log(num1, num11);

// f.--:自减1操作
var num2 = 10;
num2--;
console.log(num2);

// 坑
var num3 = 10;
var num33 = 10
var num4 = num3++; // var num4 = num3; num3 += 1;
var num5 = ++num33; // num33 += 1; var num5 = num33;
console.log(num4, num5);

// 2.比较运算符：>, <, >=, <=, == , !=, ===, !==
// ==和===的区别：
// ==是只要两个数据的值相等，结果就是true,否则是false
// ===是只有两个数据的值相等，并且数据类型也相等的时候，结果才是true，否则是false

console.log(5==5) //true
console.log(5=='5') //true

console.log(5===5) //true
console.log(5==='5') //false

console.log(5!=5) //false
console.log(5!='5') //false

console.log(5!==5) //false
console.log(5!=='5') //true

console.log(5 >='5') //判断等的是判断值是否相等

console.log(12 > '16') //字符串和数字之间比较大小，会把字符串转换成数字

// 注意：比较大小的时候，一般数字就和数字进行比较；字符串和字符串进行比较

// 3.逻辑运算符：&&(与)，||(或)，!(非)
console.log(true && true,true && false,false && false); //true false false
console.log(true || true,true || false,false || false); //true, true, false
console.log(!true, !false); //false, true

// 4.赋值运算符: =, +=, -=, =， /=, %=
// 注意：赋值符号的左边是变量
// js中的分之结构有：if语句和switch语句两种
/
1.if语句
python:
if 条件:
语句块1
elif 条件:
语句块2
else:
语句块3

js:
if(条件){
语句块1
}
else if(条件){
语句块2
}
else{
语句块3
}

*/
// 写一个程序判断成绩的等级：80-100优秀，60-80：中等，60以下：不及格
// 不能连续判断：x<=a<=y 只能写成：a>=x && a<=y
var score = -55
if (score>=80 && score<=100) {
console.log('优秀');

}else if(score>=60 && score<80){
console.log('中等');

}else if (score>=0 && score<60) {
console.log('不及格')

}else{
console.log('error');
}

// 2.switch语句
/*
switch(表达式){
case 值1:
语句块1;
case 值2:
语句块2;
...
defult:
语句块3;
}

执行过程: a.从第一个case语句后的值开始和表达式的值进行判断，
如果相等，那么就将那个case作为入口，依次执行后面所有的语句块直到遇到break或者全部执行完为止。
b.如果所有的case后面的值，都和表达式的值不相等，那么就会去执行default后面的语句块。
c.case后面的值不能一样

*/
var a = 100;
switch(a){
case 10:
console.log('10');
case 1:
console.log('1');
case 2:
console.log('2');
break;
case 11:
console.log('11');
case 12:
console.log('12');
default:
console.log('13');
}

// 输入一个数字(1-7),根据数据打印结构为(周一~周天)
var num1 = 4
switch(num1){
case 1:
console.log('周一');
break;
case 2:
console.log('周二');
break;
case 3:
console.log('周三');
break;
case 4:
console.log('周四');
break;
case 5:
console.log('周五');
break;
case 6:
console.log('周六');
break;
case 7:
console.log('周天');
break;
default:
console.log('错误');

}

// 要求，num2的值是1，2，3，4，5的时候打印’不及格‘，6，7，8打印中等，9，10打印优秀。
var num2 = 4;
switch (num2){
case 1:
case 2:
case 3:
case 4:
case 5:
console.log('不及格');
break;
case 6:
case 7:
case 8:
console.log('中等');
break;
case 9:
case 10:
console.log('优秀');
break;
default:
console.log('成绩有误');
break;

}

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

day5--js基础

推荐阅读更多精彩内容