python 学习_第五模块 javascripts
1 js的基本数据类型
// 1number 数值类型 var a = 3; var b = 1.23; var c = -123; var d = 0; alert(typeof a); //number alert(typeof b); //number alert(typeof c); //number alert(typeof d); //number // 2 string 类型 var a = "aaaaa"; alert(typeof a); // Boolean var c = 3<=4; alert(c) // true alert(typeof c) // boolean //undefined var x; alert( x) //undefined alert(typeof x) //undefined //空对象 var y = null; alert(y); // null alert(typeof y); //object
2 js的加 减 乘 取余 除
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>运算符</title> </head> <body> <script type="text/javascript"> var x = 10; var y = 3; var sum = x + y; alert(sum) // 13 // + - * % / // 加 减 乘 取余 除 var test1 = x % y; alert(test1) //1 </script> </body> </html>
3 js的递增 递减
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>递增递减</title> </head> <body> <script type="text/javascript"> var x = 4; // x = x + 1; // x +=1; x++; alert (x);// 5 var c = 10; c += 5; c -= 2; c *= 4; c /= 3; alert(c); </script> </body> </html>
4 js的字符串
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>字符串</title> </head> <body> <script type="text/javascript"> var str1 = "one"; var str2 = "two"; var joined = str1 + ' ' + str2 + 'san' alert(joined) //one twosan </script> </body> </html>
5 js的数值与字符串
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>数字和字符串</title> </head> <body> <script type="text/javascript"> //1 当数字和字符串相加时， 数字也会转换成字符串 var a = "123" + 456 alert(a) // 123456 alert(typeof a) // string // 2 隐式 var num = 234; var myStr = num + ''; alert(typeof myStr ); // string // 3 toString() 数字转字符串 var myStr2 = num.toString(); alert(typeof myStr2); // string // 字符串转数值 var a = "123" var myNum = Number(a); alert(typeof myNum) //number </script> </body> </html>
6 js的数组
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>数组Array</title> </head> <body> <script type="text/javascript"> var shopping = ['香蕉','苹果','牛奶','红牛']; // alert(typeof shopping) //object var rand = ['tree','345',[1,2,3]]; // 访问 var item1 = rand[0]; console.log(item1); // tree rand[0] = '榴莲'; console.log(rand); var a = rand[2][2]; console.log(a); //3 // 访问数组的长度 for console.log('数组的长度是:' + rand.length); // 数组的长度是:3 </script> </body> </html>
7 js的条件判断
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>条件判断</title> </head> <body> <script type="text/javascript"> var weather = 'rainy'; if (weather ==='rainy' ) { console.log('天气下雨了,在家里呆着'); } else if (weather ==='sunny' ) { console.log('天气非常棒,可以出去玩耍') } else if (weather ==='snowing' ) { console.log('天气下雪了,可以出去滑雪') } else { console.log('输入的天气有错,重新输入'); } </script> </body> </html>
8 js的比较运算符
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>比较运算符</title> </head> <body> <script type="text/javascript"> // === !== == != var a = 5; var astr = '5'; var isequal = a === astr; console.log(isequal) // false console.log(4 <= 4); </script> </body> </html>
9 js的逻辑运算符
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>比较运算符</title> </head> <body> <script type="text/javascript"> var weaher = 'sunny'; var temp = 22; // && 逻辑或 并且 || 逻辑或 ！true // && if (weaher ==='sunny' && temp >30) { console.log('在家里吹空调,吃西瓜'); } else if (weaher ==='sunny' && temp <=30){ console.log('天气不错 可以出去玩') } // || var mathscore = 77; var englishscore = 80; if (mathscore >=80 || englishscore >=85) { console.log('可以出去玩') } else { console.log('在家写作业')} // false var islogin = false; alert(!islogin); if (!islogin) { console.log('用户已登录') } </script> </body> </html>
10 switch 语句
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>switch语句</title> </head> <body> <script type="text/javascript"> var weather = 'rainy'; switch(weather) { case 'summy': alert(1); break; case 'rainy': alert(2); // 编写 switch语句 小心break case 穿透 break; case 'snowing': alert(3); break; default: alert(4); break; } </script> </body> </html>
11 三元运算符
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三元运算符</title> </head> <body> <script type="text/javascript"> var result = 1 < 2 ? '真的' : '假的'; alert(result) </script> </body> </html>
12 for循环
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>for 循环</title> </head> <body> <script type="text/javascript"> var i; var sum = 0; for (i =1; i <= 100; i++){ sum += i; } console.log(sum); //5050 var shopping = ['香蕉','苹果','牛奶','红牛']; var j; for (j = 0; j <shopping.length; j++) { var htmlstr = '<h1>' + shopping[j] + '</h1>' console.log(htmlstr); document.write(htmlstr); } </script> </body> </html>
13 break和continue
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>break和continue</title> </head> <body> <script type="text/javascript"> // break var x = 0; for (;;){ if (x > 100){ break } x++; } alert(x); //continue var sum = 0; for (var i = 1; i <=10; i++) { if (i ===8) { continue; } sum = sum + i; } alert(sum) </script> </body> </html>
14 while循环
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>while循环</title> </head> <body> <script type="text/javascript"> var sum = 0; //计算的和 var n = 99; //初始的奇数 while (n > 0) { sum += n; n -= 2; } alert(sum); // do while 先执行一次， 再判断 var sum = 0; var i = 1; do { sum = sum + i; i ++; console.log(sum); alert(sum); } while (i <=1); </script> </body> </html>
15 函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>函数</title> </head> <body> <script type="text/javascript"> function test(isbad ){ alert(isbad); if (isbad){ alert('点个外卖'); } else { alert('做饭了') } } var bad = false; test(bad); </script> </body> </html>
16 函数返回值和函数表达式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>函数返回值和函数表达式</title> </head> <body> <script type="text/javascript"> function add(a,b){ var sum = a+b; return sum } function sub(a,b){ return a-b; } function mult(a,b){ return a*b; } // function div(a,b){ // return a/b; // } // 函数表达式 var div = function(a,b) { return a/b; } var r= add(3,2); var r2= sub(3,2); var r3= mult(3,2); var r4= div(3,2); console.log(r); console.log(r2); console.log(r3); console.log(r4); </script> </body> </html>
17 函数作用域
1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>函数作用域</title> </head> <body> <script type="text/javascript"> var a = 1; function add(){ var b = 3; console.log(a); } add(); // console.log(b); </script> </body> </html>
2
first.js
(function(){ var name = 'ysl'; var hello = function (){ alert('hello ' + name); } window.first = hello; })();
second.js
(function(){ var name = 'jack'; var hello = function(){ alert('hello ' + name); } window.second = hello; })();
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>函数作用域</title> </head> <body> <script type="text/javascript" src="js/first.js"></script> <script type="text/javascript" src="js/second.js"></script> <script type="text/javascript"> console.log(window); first(); second(); </script> </body> </html>
18 对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>object</title> </head> <body> <script type="text/javascript"> var person = { name: 'ysl', age: 18, sex:'男', fav : function(a) { alert('爱好姑凉') return '姑凉' + a + '岁' } } console.log(person); console.log(person.name); console.log(person.fav(18)); </script> </body> </html>
19 js内置函数
<!DOCTYPE html> <html> <head> <title>js常用的内置对象</title> </head> <body> <script type="text/javascript"> var colors = new Array(); // var colors = []; var colors2 = []; document.write('1111'); // js 提供构造函数 var colors = new Array(); var colors2 = []; if (Array.isArray(colors)) { colors[0] = 'red'; colors[1] = 'blue'; colors[2] = 'yellow'; var a = colors.toString(); console.log(a); console.log(typeof a); console.log(colors); } </script> </body> </html>
20 数组的方法
1 map filter forEach
<!DOCTYPE html> <html> <head> <title>map filter forEach</title> </head> <body> <script type="text/javascript"> // filter 方法 var numbers = [1,2,10,7,5,11,44]; var filterResult = numbers.filter(function(item,index,array){ console.log(item); console.log(index); console.log(array); return item > 10; }); console.log(filterResult); // map() 方法 var mapresult = numbers.map(function(item,index,array){ return item *2; }) console.log(mapresult); for (var i = 0; i < mapresult.length; i++){ console.log(mapresult[i]); } // forEach mapresult.forEach(function(item,index){ console.log(item); }) </script> </body> </html>
2） 数组常用的方法
<!DOCTYPE html> <html> <head> <title>数组常用的方法</title> </head> <body> <script type="text/javascript"> var arr = [1,2,3]; var a = arr.toString(); // 变成string 1,2,3 var b = arr.toLocaleString(); //1,2,3 console.log(a); console.log(b); var person1 = { toLocaleString: function(){ return 'mjj'; }, toString:function(){ return '么挤挤'; } } var person2 = { toLocaleString: function(){ return '隔壁老王'; }, toString:function(){ return '隔壁老李'; } } var people = [person1,person2]; console.log(people); console.log(people.toString()); //么挤挤,隔壁老李 console.log(people.toLocaleString()); //mjj,隔壁老王 </script> </body> </html>
3）数组常用的方法
<!DOCTYPE html> <html> <head> <title>数组常用的方法</title> </head> <body> <script type="text/javascript"> // 分割字符串 var colors = ['red','blue','green']; var a = colors.join('|'); console.log(a); //red|blue|green // 栈 lifo push() pop() 队列方法 // push 相当于 Python的append var newlength = colors.push('purple'); console.log(newlength); //4 console.log(colors); // (4) ["red", "blue", "green", "purple"] // pop() 从数组末尾删除最后一项 var lastItem = colors.pop(); console.log(lastItem); //purple console.log(colors); // (3) ["red", "blue", "green"] // 队列fifo 先进先出 unshift() shift() newlength = colors.unshift('yellow'); console.log(newlength); //4 console.log(colors); //(4) ["yellow", "red", "blue", "green"] var firstItem = colors.shift(); console.log(newlength); //4 console.log(colors); // (3) ["red", "blue", "green"] // 数组倒序 var values = [0,3,2,16,15,10]; function compare1(a,b){ return a -b; }; function compare2(a,b){ return b -a ; }; values.sort(compare1); //升序 console.log(values); //[0, 2, 3, 10, 15, 16] values.sort(compare2);//降序 console.log(values); //[16, 15, 10, 3, 2, 0] </script> </body> </html>
4 ）数组常用的方法
<!DOCTYPE html> <html> <head> <title>数组常用的方法</title> </head> <body> <script type="text/javascript"> // 操作方法 concat() slice() splice() // 1 concat 数组合并 var colors = ['red','blue']; // var newColors = colors.concat('green'); newColors = colors.concat({name:'zhangsan'}); console.log(newColors); // 2 slice() var colors = ['red','blue','yellow']; newcolors = colors.slice(1,2); // ["blue"] console.log(newcolors); // 3 splice() 删除 插入 替换 // 3.1 删除 var names = ['张三','李四','mjj','alex']; // names.splice(0,2); // console.log(names); //["mjj", "alex"] // 3.2 插入 // names.splice(1,0,'熊大大','jack'); // console.log(names); //["张三", "熊大大", "jack", "李四", "mjj", "alex"] //3.3 替换 names.splice(1,1,'xiongdada'); console.log(names); //["张三", "xiongdada", "mjj", "alex"] // 4 位置方法 indexOf() lastIndexOf() var names = ['张三','mjj','王五','mjj','赵六']; alert(names.indexOf('mjj')); //1 alert(names.lastIndexOf('mjj')); //3 alert(names.indexOf('mjj',2)); //3 alert(names.lastIndexOf('mjj',2)); //1 alert(names.lastIndexOf('mjjxxxx',2)); //如果查不到结果 返回-1 </script> </body> </html>
21 map方法应用
<!DOCTYPE html> <html> <head> <title>map方法应用</title> </head> <body> <script type="text/javascript"> var oldArray = [ { name:'张三', age: 17 }, { name:'mjj', age: 29 }, { name:'李四', age: 30 } ] var newNames = oldArray.map(function(item,index){ return item.name }) var newAges = oldArray.map(function(item,index){ return item.age }) console.log(newNames); console.log(newAges); </script> </body> </html>
22 字符串常用方法
<!DOCTYPE html> <html> <head> <title>字符串的常用方法</title> </head> <body> <script type="text/javascript"> var str = 'hello world'; console.log(str.length); // 11 console.log(str.charAt(1)); //e console.log(str.charCodeAt(1)) //101 获取指定的字符对应的编码 console.log(str.concat(' mjj',' jack')); //拼接字符串 通常情况不适用它来做拼接,使用 +来做多个字符的拼接 console.log(str.slice(2)); // llo world console.log(str.substring(2)); // llo world console.log(str.substr(2)); // llo world console.log(str.slice(2,4)); // ll console.log(str.substring(2,4)); // ll var str = 'hello world'; console.log(str.indexOf('o')); //4 console.log(str.lastIndexOf('o')); //7 console.log(str.indexOf('o',6)); //7 console.log(str.lastIndexOf('o',6)); //4 // trim()清除当前 字符串的前后后格 var str = ' hello world '; console.log(str.trim()); //hello world console.log(str); // hello world var str = 'Hello Mjj'; console.log("------",str.toLowerCase()); //hello mjj </script> </body> </html>
23 字符串查找
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>查找当前字符e在字符串中的所有位置</title> </head> <body> <script type="text/javascript"> // 查找e 在str中的所有的位置 var str = 'He unfolded the map and set it on the floor.'; var arr = []; var pos = str.indexOf('e'); //1 console.log(pos); while(pos > -1){ // 找到当前e字符对应的位置 arr.push(pos); pos = str.indexOf('e',pos+1); } console.log(arr); </script> </body> </html>
24 date
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>date日期对象</title> </head> <body> <script type="text/javascript"> /* // 1.四种方式创建 var now = new Date(); console.log(now); //Tue Jul 23 2019 11:48:08 GMT+0800 (中国标准时间) var xmas = new Date('December 25,1995 13:30:00'); console.log(xmas); //Mon Dec 25 1995 13:30:00 GMT+0800 (中国标准时间) var xmas = new Date(1995,11,25); console.log(xmas); //Mon Dec 25 1995 00:00:00 GMT+0800 (中国标准时间) var xmas = new Date(1995,11,25,14,30,0); console.log(xmas); //Mon Dec 25 1995 14:30:00 GMT+0800 (中国标准时间) */ var now = new Date(); // 常用方法 console.log(now.getDate()); //获取月份的第几天 (1~31) console.log(now.getMonth()); //获取月份 (0~11) console.log(now.getFullYear()); //获取年份 console.log(now.getDay()); //获取一星期中的第几天(0 ~ 6) console.log(now.getHours()); //获取小时(0~23); console.log(now.getMinutes()); //获取分钟(0~59); console.log(now.getSeconds()); //获取秒(0~59); // 日期格式化方法 console.log(now.toDateString()); //星期几 月 日 年 console.log(now.toTimeString()); //时 分 秒 时区 // 常用 console.log(now.toLocaleDateString()); // console.log(now.toLocaleTimeString()); // console.log(now.toLocaleString()); console.log(now.toUTCString()); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回用数字时钟格式的时间</title> </head> <body> <script type="text/javascript"> // 6:27:35 P.M. // 6:30:01 P.M. // 6:04:01 A.M. // :0 4 // : 30 function nowNumTime(){ var now = new Date(); var hour = now.getHours(); //0 ~ 23. //19 var minute = now.getMinutes(); var second = now.getSeconds(); // 18 > 12 ? 18-12 : 8 var temp = '' + (hour > 12 ? hour - 12 : hour); if(hour === 0){ temp = '12'; } temp = temp +(minute < 10 ? ':0': ":")+ minute; temp = temp +(second < 10 ? ':0': ":")+ second; temp = temp + (hour >= 12 ? ' P.M.': " A.M."); return temp; } var nownum = nowNumTime(); console.log(nownum); </script> </body> </html>
25 字符串和数值相互转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字符串和数值相互转换</title> </head> <body> <script type="text/javascript"> var str = '13131.9090013'; // 字符串转数值类型 console.log(parseInt(str)); //13131 console.log(parseFloat(str)); //13131.9090013 console.log(typeof parseFloat(str)); //number var a = Number(str); console.log(isNaN(a)); //NaN false var num = 1313.179; // 强制类型转换 console.log(num.toString()); //string console.log(typeof num.toString()); //1313.179 console.log(String(num)); //1313.179 // 隐式转换 console.log('' + num); //1313.179 console.log(''.concat(num)); //1313.179 console.log(Number(num.toFixed(2))); //1313.18 </script> </body> </html>
26 Globle对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Globle对象</title> </head> <body> <script type="text/javascript"> // URI var uri = 'http://www.apeland.cn/web index.html?name=zhangsan'; // encodeURIComponent()编码 使用最多的方法 console.log(encodeURI(uri)); console.log(encodeURIComponent(uri)); // 解码 decodeURIComponent() // decodeURI(encodeuri); // decodeURIComponent(encodeuri); </script> </body> </html>
27 Math对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Math对象</title> </head> <body> <script type="text/javascript"> // Math // var a = 3; // 方法 min() max() var max = Math.max(3,34,56,21); var min = Math.min(3,34,56,21); var arr = [1,2,32,23,45,21]; var max = Math.max.apply(null,arr); var min = Math.min.apply(null,arr); // var max= Math.max(arr[0],arr[1],arr[2]); console.log(max); console.log(min); // ceil() floor() round() var num = 24.8; console.log(Math.ceil(num)); //天花板函数 向上取整 console.log(Math.floor(num)); //地板函数 向下取整 console.log(Math.round(num)); //标准的四舍五入 // 随机数 random() 0 <= random<1 console.log(Math.random()); // 1.获取min到max之间的整数 // 2.获取随机颜色 rgb(0~255,0~255,0~255); // 3.随机验证码 四位 数字+ 字母 (大写) </script> </body> </html>
28 练习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>练习</title> </head> <body> <script type="text/javascript"> // 1.获取min到max之间的整数 (1~100) function random(max,min){ return Math.floor(Math.random() * (max-min) + min); } // 2.获取随机颜色 rgb(0~255,0~255,0~255); function randomColor(){ // var result var r = random(0,256),g = random(0,256),b = random(0,256); // 模板字符串 `` var result = `rgb(${r},${g},${b})`; return result; } var rc = randomColor(); console.log(rc); document.body.style.backgroundColor = rc; // 3.随机验证码 四位 数字+ 字母 (大写) 65Yz function creatCode(){ // 设置默认的空的字符串 var code = ''; // 设置长度 var codeLength = 4; var randomCode = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z']; for(var i = 0; i < codeLength; i++){ // 设置随机范围 0~36 var index = random(0,36); code += randomCode[index]; } return code; } var rndcode = creatCode(); console.log(rndcode); document.write(`<h1>${rndcode}</h1`) </script> </body> </html>