Python全栈之学习JS(1)
目录
- 1. js的数据类型
- 1.1 js引入方式
- 1.2 注释变量
- 1.3 数据类型
- 2. js类型转换_运算符
- 2.1 强制转换_Number
- 2.2 强制转换_String
- 2.3 强制转换_Boolean
- 2.4 自动类型转换_Number_Boolean_String三者之间转换
- 2.5 js运算符
- 3. js流程控制
- 3.1 分支结构
- 3.2 分支结构_switch_case
- 3.3 循环结构
- 4. js函数
- 4.1 函数
- 4.2 函数的调用
- 总结
1. js的数据类型
1.1 js引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js的引入方式</title>
</head>
<body>
<!-- js的第一种引入方式 -->
<!-- <script>
alert("js的第一种引入方式")
</script> -->
<!-- js的第二种引入方式 -->
<!-- <script src="myjs.js"></script> -->
<!-- js的第三种引入方式 -->
<!-- onclick单击事件 -->
<div onclick="alert(11)" >点我1</div>
<!-- js的第四种引入方式 -->
<a href="javascript:alert('你点我了么?')">点我2</a>
</body>
</html>
小提示：
js三大对象 1. 本地对象：js语法 2. bom对象：浏览器相关的成员（针对于浏览器的控制）brower object model 3. dom文档对象：关于html文件节点相关的数据、相关的值（针对于html的控制） document object model js是单线程的异步程序 定时器是单线程的异步程序（例子）
1.2 注释变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注释/变量</title>
</head>
<body>
<script>
// ###1 注释分为两类: (1) 单行注释 (2) 多行注释
// 我是单行注释
/* 我是多行注释 */
// ###2 变量
/* var的用作是划分当前变量的作用域 不写var,默认声明全局的变量 */
var a = 1;
var a=1,b=2,c=3
console.log(a);
console.log(b,c)
// ###3 变量的命名
var $ = "特殊的变量名";
var $abc = 111;
console.log($);
console.log($abc);
</script>
</body>
</html>
1.3 数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据类型</title>
</head>
<body>
<script>
/*
数据类型: 分为两大类 (基本数据类型 + 引用数据类型)
基本数据类型: Boolean , Number , String , undefined , null
引用数据类型: Object(Array , function , Date ... )
*/
// ###1. Boolean 布尔类型
var a1 = true;
var a1 = false;
console.log( a1 , typeof(a1) )
// ###2. Number 数字类型
var num = 0b101;
var num = 0o127;
var num = 0xff;
var num = 1000;
var num = 3.13;
var num = 3.13e2;
// Infinity 无穷大
var num = 3.13e999999999999999999999999999999999999;
// -Infinity 负无穷大
var num = -3.13e999999999999999999999999999999999999;
console.log(num , typeof(num) )
// NaN => not a number 不是一个数字
/*
1.NaN和任何数字计算都是NaN
2.与NaN做比较,除了NaN!=NaN为真,剩下都是false
*/
var num = 10 - "abc";
var num = NaN + 1
var num = NaN == NaN
var num = NaN != NaN; // true
var num = NaN > 100; // false
var num = isNaN(NaN); // true
console.log(num , typeof(num))
// ###3.String 字符串类型
// 单引号''
var string = 'I love js';
// 双引号""
var string = "i love python very much";
// 在转义字符前面加\,防止转义原型化输出
var string = "我爱你,\\n 中国"
console.log(string)
// 反引号`` 1.支持跨行 2.解析变量
// 1.支持跨行
var string = `
<ul>
<li>111</li>
</ul>
`
// 2.解析变量 ${变量名}
var name = "赵沈阳";
var string = `${name}`;
console.log(string , typeof(string))
// ###4.Object 对象类型
// 1.定义一个空对象
var obj = new Object()
var obj = {}
console.log(obj,typeof(obj))
// 2.js对象(字典格式)
var obj = {"a":1,"b":2}
console.log(obj , typeof(obj))
// 3.js对象,可以在类外添加成员
obj.name = "张三";
console.log(obj , typeof(obj));
// 4.js对象(数组格式)
var arr = new Array();
var arr = [];
arr[0] = 10;
arr[1] = 11;
arr[2] = 12;
var arr = [10,11,12,13];
console.log(arr , typeof(obj));
// ###5 function 函数类型(归属于object)
function func(){
console.log("我是函数");
}
func()
console.log(func,typeof(func))
// ###6 undefined 未定义类型
var a;
console.log(a , typeof(a))
// 注意: null 可以理解成关键字 (等价于python中None)
var a = null
console.log(a , typeof(a))
</script>
</body>
</html>
2. js类型转换_运算符
2.1 强制转换_Number
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>强制转换 - Number</title>
</head>
<body>
<script>
// 1. parseInt 强制转换成整型
/* 要求: 必须数字开头; */
var num = 1.934567; //1
var num = "abc"; //NaN
var num = "123"; //123
var num = "123abc"; //123
var num = "abc123"; //NaN
var num = "1.34abc" //1
var num = [] //NaN
var num = false //NaN
var res = parseInt(num);
console.log(res ,typeof(res))
// 2.parseFloat 强制转换成浮点型
/* 要求: 必须数字开头; */
var num = 100; //1
var num = "abc"; //NaN
var num = "123"; //123
var num = "123abc"; //123
var num = "abc123"; //NaN
var num = "1.34abc"; //1.34
var num = {}; //NaN
var num = true;
var res = parseFloat(num);
console.log(res ,typeof(res))
// 3.Number类型强转
/* 要求:必须是存纯数字或者布尔类型*/
var a = false
var a = "123.456"; //123
var res = Number(a)
console.log(res ,typeof(res))
</script>
</body>
</html>
2.2 强制转换_String
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>强制转换 - String</title>
</head>
<body>
<script>
/*
字符串的强转是在原有类型的两边套上引号,表达字符串类型;
*/
var a = 100;
var a = 4.89;
var a = "abc";
var a = [];
var a = undefined;
var a = null;
var a = NaN;
var res = String(a);
console.log(res , typeof(res))
</script>
</body>
</html>
2.3 强制转换_Boolean
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>强制转换 - Boolean</title>
</head>
<body>
<script>
/*
//布尔类型为假的七中情况:
0 0.0 '' NaN undefined null false
*/
var a = false;
var a = null;
var a = 0;
var a = 0.0;
var a = '';
var a = NaN;
var a = undefined;
// 注意点 空数组 空对象都是true
var a = []; // true
var a = {}; // true
var res = Boolean(a);
console.log(res , typeof(res));
</script>
</body>
</html>
2.4 自动类型转换_Number_Boolean_String三者之间转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自动类型转换 Number Boolean String 三者之间的转换</title>
</head>
<body>
<script>
// 1.Number+Boolean
var res = 10 + true;
var res = 3.4 + true;
var res = 10 + 3.1;
console.log(res ,typeof(res))
// 2.Number+Boolean+String (对于字符串来说 +号意味着拼接)
var res = true + "100";
var res = 100 + "101" + 100;
console.log(res,typeof(res))
// 3.除了+号,剩下的都可以做运算(必须是数值)
var res = 100 - "101";
var res = 100 - "99abc";
console.log(res,typeof(res))
</script>
</body>
</html>
2.5 js运算符
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js中的运算符</title></head><body> <script> // (1) ++ -- 递增,递减 // num++ 先赋值在自增 var num = 100; var res = num++; console.log(res , typeof(res)); var res = num++; console.log(res , typeof(res)); // num++ 先自增在赋值 var num = 100; var res = ++num; var res = ++num; console.log(res , typeof(res)); // (2) === !== (全等于,不全等于)比较两样东西1.比较值的大小 2.比较值的类型 var res = "1" == 1; console.log(res , typeof(res)); var res = "1" === 1; var res = "1" !== 1; console.log(res , typeof(res)); // (3) && => and , || => or , ! => not var num = 8 if(num > 5 && num <10){ console.log("ok1~"); } if(num>10 || num < 3){ console.log("ok2~"); } var num = 0 if(!num){ console.log("ok3~"); } // (4) 三元(目)运算符 [ js: 表达式?真值:假值 ] [ python :res = 正确 if 条件表达式 else 错误 ] var age = 18; var res = age >= 18 ? "成年人":"儿童"; console.log(res) </script></body></html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js中的运算符</title>
</head>
<body>
<script>
// (1) ++ -- 递增,递减
// num++ 先赋值在自增
var num = 100;
var res = num++;
console.log(res , typeof(res));
var res = num++;
console.log(res , typeof(res));
// num++ 先自增在赋值
var num = 100;
var res = ++num;
var res = ++num;
console.log(res , typeof(res));
// (2) === !== (全等于,不全等于)比较两样东西1.比较值的大小 2.比较值的类型
var res = "1" == 1;
console.log(res , typeof(res));
var res = "1" === 1;
var res = "1" !== 1;
console.log(res , typeof(res));
// (3) && => and , || => or , ! => not
var num = 8
if(num > 5 && num <10){
console.log("ok1~");
}
if(num>10 || num < 3){
console.log("ok2~");
}
var num = 0
if(!num){
console.log("ok3~");
}
// (4) 三元(目)运算符 [ js: 表达式?真值:假值 ] [ python :res = 正确 if 条件表达式 else 错误 ]
var age = 18;
var res = age >= 18 ? "成年人":"儿童";
console.log(res)
</script>
</body>
</html>
3. js流程控制
3.1 分支结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流程控制 -> 分支结构 </title>
</head>
<body>
<script>
var mashengni = "美女";
//1.单项分支
// if(mashengni == "美女"){
// alert("给他买好吃的~");
// }
//2.双项分支
// if(mashengni == "野兽"){
// alert("给他一榔头~");
// }else{
// alert("跳起来给他一榔头~");
// }
//3.多项分支
// 不推荐判断条件连续比较,有可能失效;
var salary = 1000;
if(10000 < salary && salary < 12000){
console.log("正常薪资范围~");
}else if(12000 <= salary && salary < 15000){
console.log("超过一般水平~");
}else if(15000 <= salary && salary <18000){
console.log("大神级毕业生~");
}else if(salary >= 18000){
console.log("王牌毕业生~");
}else{
console.log("回炉重生~")
}
//4.巢状分支
var youqian = true;
var youfang = true;
if(youqian){
if(youfang){
console.log("老子要嫁给你~!");
}
}
</script>
</body>
</html>
3.2 分支结构_switch_case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分支结构 : switch case </title>
</head>
<body>
<script>
var date = new Date();
console.log(date);
// 获取星期 getDay
var week = date.getDay();
console.log(week)
week = "1"
// 注意点: switch case中的判断(全等于): (1) 值的比较(2)类型的比较 全部符合才能满足条件;
switch (week){
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;
default:
console.log("星期日!");
break;
}
</script>
</body>
</html>
3.3 循环结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分支结构 : 循环结构 </title>
</head>
<body>
<script>
// ### 1.for循环
/*
语法特征:
1号 2号 3号
for(初始值;判断条件;自增自减的值){
code1
code2..
}
先执行1,2满足后执行代码体
然后执行3,2满足后在执行代码体
以此类推...
直到不满足条件终止循环;
*/
// 打印 1~100
for(var i = 1;i<=100;i++){
console.log(i);
}
// 打印1~100 遇到50,自动跳过;
for(var i = 1;i<=100;i++){
if(i == 50){
continue;
}
console.log(i);
}
// ### 2.while 循环
//遇到5,终止循环
i = 0
while(i<10){
if( i == 5){
break;
}
console.log(i);
i++;
}
console.log("<===============第一组===================>")
// ### 3.for( var i in Iterable ) 获取的是数组中的索引号;
var arr = ["孟浩然","赵子龙","康乃馨","张飞","汪精卫"];
for(var i in arr ){
console.log(i);
console.log(arr[i]);
}
console.log("<===============第二组===================>")
// 获取的是js对象中的键
var dic = {"a":"王同培","b":"马村你","c":"张宇"};
for(var i in dic){
console.log(i)
console.log(dic[i]) ;
}
console.log("<===============第三组===================>")
// ### 4.for( var i of Iterable ) 获取的是数组中的值; [等价于python中 for i in Iterable:]
for(var i of arr){
console.log(i);
}
console.log("<===============第四组===================>")
// 注意点: for(var i of dic) 不能遍历js对象[字典] error
/*
var dic = {"a":"王同培","b":"马村你","c":"张宇"};
for(var i of dic){
console.log(i)
}
*/
// 字符串的遍历:
for(var i of "abcdefg"){
console.log(i)
}
</script>
</body>
</html>
4. js函数
4.1 函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数</title>
</head>
<body>
<script>
func1()
// ###1 函数
// 方式一 普通函数 (存在预加载机制,提前把函数加载到内存中,然后代码整体在执行)
func1()
function func1(){
console.log(111);
}
// 方式二 匿名函数(匿名函数没有预加载价值,必须先定义在调用)
// func2() error
var func2 = function(){
console.log('我是func2~');
}
func2();
// 方式三 不推荐 (了解)
// var func3 = new Function("alert('我是func3~');alert('woshi3333');");
// console.log(func3,typeof(func3));
// func3();
// var func4 = new Function("x","y","alert(x+y)");
// func4(5,6);
// 方式四 闭包函数
function func5(){
var a = 100;
function func6(){
console.log(a,"<===>");
return "我是闭包函数";
}
return func6;
}
func = func5();
res = func();
console.log(res);
// 方式五 箭头函数
function mysum(x,y){
return x+y;
}
res = mysum(5,6)
console.log(res,"<=======11122233=======>");
var mysum = (x,y) => {return x+y;}
var res = mysum(5,6);
console.log(res,"========3334444=========");
// ###2 函数参数 (普通位置参数,默认参数)
// js中的形参实参不匹配不会报错
function func7(a,b,c=3){
console.log(a,b,c);
}
func7(10,11);
func7(10,11,12);
func7(10,11,12,13);
console.log("<==============================>")
// arguments 自动收集所有的实参
// 计算任意个数值的累加和;
function func8() {
// console.log(a,b)
// console.log(arguments)
var total = 0;
for(var i of arguments){
total += i;
console.log(i);
}
return total;
}
res = func8(1,100,2,3,4,5,56,6);
console.log(res);
</script>
</body>
</html>
4.2 函数的调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数的调用</title>
</head>
<body>
<script>
function func(){
console.log("函数正在执行 ... ");
}
// 1.正常调用
func();
// 2.函数的立即执行
(function func2(){
console.log("函数正在执行2 ... ")
})();
// 3.匿名函数的立即执行
(function(){
console.log("匿名函数正在执行3 ... ")
})();
// 4.其他立即执行的方法;
!function(){
console.log("我在执行4 ... ");
}();
~function(){
console.log("我在执行5 ... ");
}();
</script>
</body>
</html>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!
相关推荐
-
Python全栈之线程详解
目录 1. 线程的概念 1.1 Manager_进程通信 1.2 线程的概念 2. 线程的基本使用 3. 自定义线程_守护线程 3.1 自定义线程 3.2 守护线程 4. 线程安全问题 4.1 线程安全问题 4.2 Semaphore_信号量 5. 死锁_互斥锁_递归锁 6. 线程事件 总结 1. 线程的概念 1.1 Manager_进程通信 # ### Manager ( list 列表 , dict 字典 ) 进程之间共享数据 from multiprocessing import Proc
-
Python全栈之作用域和闭包
目录 1. return返回值 2. 全局变量_局部变量 3. 函数名的使用 4. 函数的嵌套 4.1 函数的嵌套 4.2 nonlocal的使用 5. 闭包函数的定义 6. 闭包的特点_意义 小提示: 7. 小练习 总结 1. return返回值 # ### return 自定义函数的返回值 """ 概念:return 把函数内部的数据返回到函数的外面,返回到函数的调用处 1.return + 六大标准数据类型 , 除此之外还可以返回函数 或者 是类对象 2.return
-
Python全栈之协程详解
目录 1. 线程队列 2. 进程池_线程池 3. 回调函数 4. 协程 总结: 1. 线程队列 # ### 线程队列 from queue import Queue """ put 存放 超出队列长度阻塞 get 获取 超出队列长度阻塞 put_nowait 存放,超出队列长度报错 get_nowait 获取,超出队列长度报错 """ # (1) Queue """先进先出,后进先出"""
-
Python全栈之学习CSS(1)
目录 1. 表单框类型 文件上传: 2. 表单属性 3. css引入 my.css 4. 选择器 4.1 常用选择器 4.2 选择器的优先级 4.3 关系选择器 4.4 属性选择器 4.5 伪类选择器_颜色设置 4.6 伪对象选择器 5. 字体属性设置 cursor属性: 6. 文本属性 7. 盒子模型 order-style: 8. 学习工具 总结 1. 表单框类型 <!DOCTYPE html> <html lang="en"> <head> &
-
Python全栈之队列详解
目录 1. lock互斥锁 2. 事件_红绿灯效果 2.1 信号量_semaphore 2.2 事件_红绿灯效果 3. queue进程队列 4. 生产者消费者模型 5. joinablequeue队列使用 6. 总结 1. lock互斥锁 知识点: lock.acquire()# 上锁 lock.release()# 解锁 #同一时间允许一个进程上一把锁 就是Lock 加锁可以保证多个进程修改同一块数据时,同一时间只能有一个任务可以进行修改,即串行的修改,没错,速度是慢了,但牺牲速度却保证了数据
-
Python全栈之学习CSS(2)
目录 1. css背景图 1.1 背景属性 1.2 背景图片引入 2. 相对_绝对_固定 2.1 相对定位 2.2 绝对定位 2.3 固定定位 3. float浮动 3.1 display转换元素 3.2 float浮动 4. html里面的bug 4.1 float内容塌陷问题 4.2 margin-top失效问题 4.3 overflow 总结 1. css背景图 1.1 背景属性 <!DOCTYPE html> <html lang="en"> <h
-
Python全栈之学习JS(1)
目录 1. js的数据类型 1.1 js引入方式 1.2 注释变量 1.3 数据类型 2. js类型转换_运算符 2.1 强制转换_Number 2.2 强制转换_String 2.3 强制转换_Boolean 2.4 自动类型转换_Number_Boolean_String三者之间转换 2.5 js运算符 3. js流程控制 3.1 分支结构 3.2 分支结构_switch_case 3.3 循环结构 4. js函数 4.1 函数 4.2 函数的调用 总结 1. js的数据类型 1.1 js引
-
Python全栈之学习JS(3)
目录 1. dom节点 1.1 dom节点获取 1.2 节点元素层级关系 1.3 修改_清空内容 1.4 隐藏显示密码效果 2. 全选_反选_不选 2.1 全选_反选_不选 2.2 js控制css的相关属性 2.3 js事件 3. 模态框 1. dom节点 1.1 dom节点获取 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met
-
Python全栈之学习JS(2)
目录 1. js对象 1.1 object对象 1.2 json对象 2. js字符串函数 3. js数组相关方法 4. js数学对象相关方法 5. BOM对象 5.1 定时器 5.2 获取年月日时分秒 5.3 Navigator 5.4 历史对象 6. BOM对象location 7. 小提示 ceshi.html: 总结 1. js对象 1.1 object对象 <!DOCTYPE html> <html lang="en"> <head> &l
-
Python全栈之学习HTML
目录 1. vscode相关配置 2. html认识 2.1 html认识 2.2 html结构 2.3 html语法特征 3. 标签种类_列表 3.1 常见标签 3.2 标签种类 3.3 列表 3.4 超链接标签 3.5 a链接跳锚点 3.6 img图片标签 3.7 table表格标签 3.8 iframe子窗口 4. 音视频_表单 4.1 音视频标签 4.2 form标签 5. 小练习 总结 1. vscode相关配置 w3c school 手册: https://www.w3school.
-
Python全栈之学习JQuery
目录 1. lable标签补充 2. jquery引入和简单使用 3. 选择器 3.1 基础选择器 3.2 组合选择 3.3 层级选择器 3.4 属性选择器 3.5 表单对象属性选择器 3.6 表单选择器 3.7 筛选器方法 4. 文本操作 4.1 选择器优先级和类值操作 4.2 值操作 4.3 创建标签 4.4 文档操作 4.5 删除和清空标签 4.6 字符串占位符 总结 1. lable标签补充 <!DOCTYPE html> <html lang="en">
-
Python全栈之学习MySQL(3)
目录 1. pymysql的基本操作 2. sql注入攻击 3. sql增删改查 4. mysql的数据恢复 5. sql语句优化 总结 1. pymysql的基本操作 # ### python 操作mysql import pymysql # ### 1.基本语法 """ # (1) 创建连接对象 host user password database 这四个参数必写 conn = pymysql.connect( host="127.0.0.1" ,
-
Python全栈之学习MySQL(2)
目录 1. mysql_where子句_聚合函数 2. mysql_其他子句语法 3. mysql_子查询 4. exists关键字 5. 练习所需表数据 6. 小练习 (1)表结构: (2)黏贴如下sql,直接建表 (3)练习题目 总结 1. mysql_where子句_聚合函数 # ### part 单表查询 """ select ... from ... where ... group by ... having ... order by ... limit ... &
-
Python全栈之学习MySQL(1)
目录 1. mysql约束 2. 外键_联合主键_唯一索引 3. 存储引擎_表关系 总结 1. mysql约束 # ### char varchar (补充) char 字符长度 255个 varchar 字符长度 21845个 # ### part1 时间类型 date YYYY-MM-DD 年月日 (节假日,纪念日) time HH:MM:SS 时分秒 (体育竞赛,记录时间) year YYYY 年份 (历史,酒的年份) datetime YYYY-MM-DD HH:MM:SS 年月日 时分