python - js的引入方式、注释变量、数据类型、强制转换、自动类型转换、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>













<div onclick="alert(11)" >点我1</div>



<a href="javascript:alert('你点我了么?')">点我2</a>

</body>

</html>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>流程控制 -> 分支结构 </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>
<!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>
<!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>
<!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>
<!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>