Python全栈之学习JS(1)
作者:熬夜泡枸杞 发布时间:2021-09-30 03:43:23
标签:Python,全栈,JS
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>
来源:https://blog.csdn.net/weixin_46818279/article/details/122645121
0
投稿
猜你喜欢
- 本人自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的,淡入淡出切换的。现在想做一个酷一点的
- 任务背景:调用API接口数据,抽取我们所需类型的数据,并写入指定mysql数据库。先从宏观上看这个任务,并对任务进行分解:step1:需要学
- 本文实例讲述了Python网络编程之使用TCP方式传输文件操作。分享给大家供大家参考,具体如下:TCP文件下载器客户端需求:输入要下载的文件
- python实现银行管理系统,供大家参考,具体内容如下有的地方用的方法的比较复杂,主要是为回顾更多的知识test1用来存类和函数#test1
- Python实现AES算法密码学课程老师留的作业,我觉得用python实现更简单,就用python写了一个加解密的程序。程序分成三个部分,一
- 命令解释@echo on开户回显,默认开启@echo off关闭回显这个命令一般写在第一行,意思就是当你开启回显的时候,执行命令时,会先把你
- 有关pygal的介绍和安装,大家可以参阅《pip和pygal的安装实例教程》,然后利用pygal实现画世界地图。代码如下:#coding=u
- 常见的双倍边距类问题都遇到过,但很少遇到这种有意思的,所以记录一下。这个BUG是发生在Standards模式下(就是包含XHTML或者HTM
- 前期准备首先,使用Python内置的Turtle绘图库需要在程序前添加以下代码:import turtle也可以写成这样:from turt
- 1)忘记在 if , elif , else , for , while , class ,def 声明末尾添加 :(导致 “SyntaxE
- 索引是快速搜索的关键。MySQL索引的建立对于MySQL的高效运行是很重要的。下面介绍几种常见的MySQL索引类型。在数据库表中,对字段建立
- 本文实例讲述了go语言实现猜数字小游戏的方法。分享给大家供大家参考。具体分析如下:随机生成一个数字,输入一个数字看是否匹对,匹配则结速,反之
- python3.0 模拟用户登录,三次错误锁定的实例实例如下所示:# -*- coding:utf-8 -*-#需求模拟用户登录,超过三次错
- 求:机房、线上有多台主机,为了保障安全,需要定期修改密码。若手动修改,费时费力易出错。程序应该满足如下需求 :1、在现有的excel密码表格
- 同事在学mybatis时,遇到了一个问题就是,使用char类型字段作为查询条件时一直都查不出数据,其他类型的则可以。 使用的数据库
- 思路:使用socket传输文件过程中,如果单次传输每次只能发送一部分数据,如果针对大文件,一次传输肯定是不行的,所以需要我们在传输的时候提前
- golang并没有像C语言一样提供三元表达式。三元表达式的好处是可以用一行代码解决原本需要多行代码才能完成的功能,让冗长的代码瞬间变得简洁。
- 前言在 Go 语言没有泛型之前,接口可以作为一种替代实现,也就是万物皆为的 interface。那到底 interface 是怎么设计的底层
- 1. 复制表结构及其数据:create table table_name_new as select * from table_name_o
- DiscoArt 是一个很牛的开源模块,它能根据你给定的关键词自动绘画。绘制过程是完全可见的,你可以在 jupyter 页面上看见这个绘制的