<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>博乐园</title> <link rel="stylesheet" href="blog.css"> </head> <body> <div class="blog-left"> <div class="blog-avatar"> <img src="222.jpg" alt=""> </div> <div class="blog-title"> <p>Jason的博客</p> </div> <div class="blog-info"> <p>这个人很帅,帅的什么都没有</p> </div> <div class="blog-link"> <ul> <li><a href="">关于我</a></li> <li><a href="">微博</a></li> <li><a href="">微信公众号</a></li> </ul> </div> <div class="blog-tag"> <div>#Python</div> <div>#Java</div> <div>#GoLang</div> </div> </div> <div class="blog-right"> <div class="article"> <div class="article-title"> <span class="title">大力金刚指</span> <span class="date">2019/09/06</span> </div> <div class="article-body"> <p>只要有恒心,铁杵磨成针</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#JavaScript</span> </div> <div></div> </div> <div class="article"> <div class="article-title"> <span class="title">大力金刚指</span> <span class="date">2019/09/06</span> </div> <div class="article-body"> <p>只要有恒心,铁杵磨成针</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#JavaScript</span> </div> <div></div> </div> <div class="article"> <div class="article-title"> <span class="title">大力金刚指</span> <span class="date">2019/09/06</span> </div> <div class="article-body"> <p>只要有恒心,铁杵磨成针</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#JavaScript</span> </div> <div></div> </div> <div class="article"> <div class="article-title"> <span class="title">大力金刚指</span> <span class="date">2019/09/06</span> </div> <div class="article-body"> <p>只要有恒心,铁杵磨成针</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#JavaScript</span> </div> <div></div> </div> <div class="article"> <div class="article-title"> <span class="title">大力金刚指</span> <span class="date">2019/09/06</span> </div> <div class="article-body"> <p>只要有恒心,铁杵磨成针</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#JavaScript</span> </div> <div></div> </div> <div class="article"> <div class="article-title"> <span class="title">大力金刚指</span> <span class="date">2019/09/06</span> </div> <div class="article-body"> <p>只要有恒心,铁杵磨成针</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#JavaScript</span> </div> <div></div> </div> <div class="article"> <div class="article-title"> <span class="title">大力金刚指</span> <span class="date">2019/09/06</span> </div> <div class="article-body"> <p>只要有恒心,铁杵磨成针</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#JavaScript</span> </div> <div></div> </div> <div class="article"> <div class="article-title"> <span class="title">大力金刚指</span> <span class="date">2019/09/06</span> </div> <div class="article-body"> <p>只要有恒心,铁杵磨成针</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#JavaScript</span> </div> <div></div> </div> <div class="article"> <div class="article-title"> <span class="title">大力金刚指</span> <span class="date">2019/09/06</span> </div> <div class="article-body"> <p>只要有恒心,铁杵磨成针</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#JavaScript</span> </div> <div></div> </div> <div class="article"> <div class="article-title"> <span class="title">大力金刚指</span> <span class="date">2019/09/06</span> </div> <div class="article-body"> <p>只要有恒心,铁杵磨成针</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#JavaScript</span> </div> <div></div> </div> <div class="article"> <div class="article-title"> <span class="title">大力金刚指</span> <span class="date">2019/09/06</span> </div> <div class="article-body"> <p>只要有恒心,铁杵磨成针</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#JavaScript</span> </div> <div></div> </div> <div class="article"> <div class="article-title"> <span class="title">大力金刚指</span> <span class="date">2019/09/06</span> </div> <div class="article-body"> <p>只要有恒心,铁杵磨成针</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#JavaScript</span> </div> <div></div> </div> <div class="article"> <div class="article-title"> <span class="title">大力金刚指</span> <span class="date">2019/09/06</span> </div> <div class="article-body"> <p>只要有恒心,铁杵磨成针</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#JavaScript</span> </div> <div></div> </div> <div class="article"> <div class="article-title"> <span class="title">大力金刚指</span> <span class="date">2019/09/06</span> </div> <div class="article-body"> <p>只要有恒心,铁杵磨成针</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#JavaScript</span> </div> <div></div> </div> <div class="article"> <div class="article-title"> <span class="title">大力金刚指</span> <span class="date">2019/09/06</span> </div> <div class="article-body"> <p>只要有恒心,铁杵磨成针</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#JavaScript</span> </div> <div></div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<script> 直接写--> <!-- alert(123)--> <!--</script>--> <script src="myjs.js"></script> </head> <body> </body> </html>
console.log('hello'); // js 注释 单行 // print('hello world') // js 多行注释 /* asd;askd sadk;askd a sd;as;ldk;*/
/* 这是博乐园页面的样式文件*/ /*通用样式*/ body { margin: 0; background-color: #eeeeee; } a { text-decoration: none; } ul { list-style-type: none; padding-left: 0; } /*左侧样式*/ .blog-left { float: left; width: 20%; height: 100%; position: fixed; background-color: #4e4e4e; } .blog-avatar { height: 200px; width: 200px; border: 5px solid white; border-radius: 50%; margin: 20PX auto; overflow: hidden; } .blog-avatar img { max-width: 100%; } .blog-title,.blog-info { color:darkgray; font-size: 18px; text-align: center; } .blog-link,.blog-tag { font-size: 24px; } .blog-link a,.blog-tag a { color: darkgray; } ul { text-align: center; margin-top: 80px; } /*右侧样式*/ .blog-right { float: right; width: 80%; height: 100%; } .article{ background-color: white; margin: 20px 40px 10px 10px; box-shadow: 5px 5px 5px rgba(0,0,0,0.4); } .title { font-size: 36px; font-weight: bold; } .date { float: right; font-size: 20px; margin: 20px 20px; } .article-title { border-left: 10px solid red; text-indent: 16px; } .article-body { font-size: 28px; text-indent: 28px; border-bottom: 1px solid black; } .article-bottom{ font-size: 20px; padding: 20px 20px; }
console.log("hello") // hello //1.变量 // var 声明一次就好 ,不用 声明也不会报错,但是渲染页面的时候回报错 var name = 'jason' name //"jason" let name = 'egon' name // egon // 常量 const pi = 3.141544554 var i=10 undefined for(var i=0;i<5;i++){ console.log(i)} 0 1 2 3 4 undefined i 5 let n = 10; undefined for(let n=0;n<5;n++){ console.log(n) } VM2505:2 0 VM2505:2 1 VM2505:2 2 VM2505:2 3 VM2505:2 4 undefined n 10 let m = 10; undefined m 10 //2.数据类型 js属于动态类型 var m underfind var m = 1 var m = 'n' 数值类型 包含 Python int float NaN:是数值类型,但表示的类型不是一个数字 parseInt('123') //123 // 数字转整型 parseInt('abs') //NaN // 意思非数字转不了 例: parseInt('abs') NaN parseInt('a12344564') NaN parseInt('123aaassd') 123 parseFloat('11.11') 11.11 parseFloat('123.123') 123 // 定义字符类型 可以是 '' "" 不支持""""""" var l = "hello world" undefined l "hello world" `` 定义多行 esc下面 `` var s7 = ` 123 sdafdf sdfdds` undefined s7 " 123 sdafdf sdfdds" // 查看类型 typeof(l) "string" typeof(123.123) "number" // 避免烂七八糟错误 方法: 用pycharm 建一个html终端, 再到页面演示 ES6 新出的模板自字符串,及支持写多行文本,也支持文本替换 var name = 'llx' undefined var age = 18 undefined var s1 = ` my name is $(name) my age is $(age) ` undefined s1 " my name is $(name) my age is $(age) " // 常用方法 length返回长度 trim() 移除空白 trimLeft 移除左边的空白 trimRight 移除右边的空白 charAt(n) 返回第n个字符 concat(value...) 拼接 indexOf(substring.start) 子序列位置 substring(from,to) 根据索引获取子序列 不支持负数,推介 slice slice(start,end) 切片 toLowerCase() 小写 toUpperCase() 大写 split(delimiter,limit) 分割 例: s2.split('s',1) # 's' 切割点 1 几个 ["egon"] s2.split('s',2) (2) ["egon", "dfd"] s2.slice(0,5) "egons" s2.indexOf('f') // ton过字母获取索引 6 var s2 = 'egonsdfd' undefined s2.length 8 s2.charAt(4) "s" # 返回索引为似的字符 var s1 = 'fdsdf' undefined s1.concat(s2) # 拼接 "fdsdfegonsdfd" //3.布尔值 var a = true undefined var c = false undefined typeof(a) "boolean" typeof(c) "boolean" // 4.对象类型 null 对比 用完 意为 赋值为空 undefined 没放 意为 未赋值 var a; undefined var b = null typeof(a) object typeof(b) 数组 [] var l = [1,2,3,4] undefined l[1] 2 l.length // 数组的大小 4 l.push(555) // append 尾部追加数组 5 l (5) [1, 2, 3, 4, 555] l.pop() //删除数组 ,并返回给他 555 l.unshift(11) // insert 头部增加 5 l (5) [11, 1, 2, 3, 4] l.shift() 头部移除 11 l (4) [1, 2, 3, 4] l.slice(0,5) 切片 [0;5] (4) [1, 2, 3, 4] l.reverse() 反转 (4) [4, 3, 2, 1] l.join('') 数组 转字符串 内部自动转成相同类型 不报错 "4,3,2,1" l.join('|') "1|2|3|4" l.concat() 字符串转数组 extent (4) [4, 3, 2, 1] l.concat([1,2,3,4]) (8) [1, 2, 3, 4, 1, 2, 3, 4] l.sort() 排序 (4) [1, 2, 3, 4] l.splice(5) 删除元素 并 + 新元素 [5] l.forEach(function(arg1){console.log(arg1)}); VM1994:1 1 VM1994:1 2 VM1994:1 3 VM1994:1 4 undefined l.forEach(function(arg1,arg2){console.log(arg1,arg2)}); VM2050:1 1 0 VM2050:1 2 1 VM2050:1 3 2 VM2050:1 4 3 undefined l.forEach(function(arg1,arg2,arg3){console.log(arg1,arg2,arg3)}); VM2125:1 1 0 (4) [1, 2, 3, 4] VM2125:1 2 1 (4) [1, 2, 3, 4] VM2125:1 3 2 (4) [1, 2, 3, 4] VM2125:1 4 3 (4) [1, 2, 3, 4] undefined
今日内容 JavaScript(JS) 前端编程语言 JS跟Java没有半毛钱关系，纯粹是为了蹭当时红极一时java的热度 引入js的两种方式 script标签内直接写 script src属性导入外部文件 js注释 单行注释 // 多行注释 /**/ js语言是以分号(;)作为语句的结束符 一般情况下不加分号也不会报错 变量 在js中声明变量需要使用关键字声明 var 声明变量 var name = 'jason' ECMA6最新语法 let 声明变量 let name = 'jason' var与let的区别 var作用的是全局 let作业的是局部，可以保证变量的不被随意的修改 Python无常量,只是默认意义 在js中 是有真正意义上的常量 声明常量关键字 const (常数) const pi = 3.1415926 js中变量的命名 数字 字母 下划线 $ 数字不能开头，关键字不能作为变量名 变量的命名规范 js中推荐你使用驼峰式命名 userName dataOfDb ageOfJason python中推荐使用下划线 age_of_jason python 操作pycharm js 操作 任意网页 检查 后 console 然后 点 删除 书写 console.log("") 回车键 就可以打印在下方 检查页右上角 有一个竖的3点 点出来选择 两个方框套一起 然后 直接跳出来个页面 ,不影响看网页 在点下,就缩回去了 数据类型 数值类型(整型和浮点型) js中将整型和浮点型统称为数值类型 NaN：是数值类型但是表示的意思是不是一个数字 字符类型(字符串) js中字符串的拼接推荐你使用加号(python不推荐使用加号因为效率极低) undefined(大白话类似none) 对象 null 数组 [] 自定义对象 {} 布尔值 js中的布尔值都是全小写 true false 布尔值为flase的有 ""(空字符串)、0、null、undefined、NaN Symbol ECM6新出的,了解 运算符 :typeof + - * ++ -- var x = 10 var res1 = x++ 先赋值 再自增 var res2 = ++x 先自增 再赋值 res1 10 res2 12 比较运算符 > >= < <= != == === !=== js 是 弱类型语言 推介使用 === 强等于 防止出现错误 5 == '5' # True 5 === '5' # False || 或 or 5 || 0 # 5 5&&'5' and "5" !5 || 0 # 0 not 流程控制 if (判断语句) {打印print}else {print} var age=24; undefined if (age >24) { console.log('长大了') }else{ console.log('还是个孩子') } VM2346:4 还是个孩子 undefined var 你 = 3; undefined switch(m){ case 0: console.log('1') break; case 1: console.log('2') break; case 2: console.log('3') break; case 3: console.log('4') break; case 4: console.log('5') break; case 5: console.log('6') break; case 6: console.log('7') break; case 7: console.log('8') break; } 7 不加 break 会从当前匹配位置一直往后执行 for (let a=0;a<10;a++){ console.log(a) } 0,1,2,3,4,5,6,7,8, while (i<10){ console.log(i); i++; } 三元表达式: 如果? 条件成立 结果是 : 前边的值,反之相反 var c = 5>10 ? 666:222 undefined c 222 函数 function func() { console.log('无参那函数') } undefined func() VM3089:2 无参那函数 undefined function func(a,b) { console.log(arguments) console.log(a,b) } func(1,2) 1 2 Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ] 1 2 undefined Arguments(2) 参数个数,可以通过他实现函数调用时参数的限制 var res = func(2,2) 2 2 undefined js中函数不写返回值 返回值默认返回undefined function func(a,b) { console.log(arguments) console.log(a,b) return a,b } var res = func(5,6) VM3190:2 Arguments(2) [5, 6, callee: ƒ, Symbol(Symbol.iterator): ƒ] VM3190:3 5 6 undefined ps: 当有多个返回值的时候 返回值 默认只返回最后一个 想返回全部,可以使用括号打包成一个数组返回 匿名函数:立即执行函数 var sum = function(a,b){ return a + b } 箭头函数:会用到 var f = (v,u) => (v,u); var f = v => v; // 等同于 var f = function(v){ return v } 内置对象 1.自定义对象: 新建类型一: var d = {'name':'llx','age':28} d['name'] typeof(d) "object" d.name "llx" d['name'] "llx" 新建类型二: 关键字new var d1 = new Object(); d1 {} d1.name = 'llx' d1 {'name':'llx'} for(var k in d){console.log(k,d[k]);} for(var k in d){console.log(k,d[k]);} VM3484:1 name llx VM3484:1 age 28 undefined Date 对象 var dd = new Date(2021/11/12); var dd = new Date(5000); var dd = new Date(); // Wed Jul 21 2021 01:47:49 GMT+0800 (中国标准时间) console.log(dd.toLocaleDateString()) VM3625:1 2021/7/21 undefined dd.getFullYear() // 拿年 dd.getMonth() // 拿月(0,11) dd.getDate // 日 getHours 时 getMinutes 分 getDay 周 JSON 对象 parse loads stringify dumps var str1 = "{'name':'llx','age':28}"; var obj1 = {'name':'llx','age':28}; // json字符串转换成对象 var obj = JSON.parse(str1) // 对象转换成 json 字符串 var str = JSON.stringify(obj1) 正则: var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}"); var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}&/; reg1.test("jason666") reg2.test("jason666") var s1='egondsb dsb dsb' s1.match(/s/) s1.match(/s/g) # g 类似 全部的意思 reg2.lastIndex // 7 索引 计数 Python 往列表中 添加元素的方法 append insert extend 减少 pop(index) remove(target) del js 往数组中 添加元素的方法 push unshift 减少 pop shift
# l = [1,2,3,5] # res = '|'.join(l) # print(l) # js 不报错 ,内部转化字符串了 # map zip filter reduce sort sorted 区别 l = [1,2,3,4,5] print(list(map(lambda x:x+1,l))) # [2, 3, 4, 5, 6] # map 映射,一般和匿名函数 一起用 l1 = ['a','b','c'] print(list(zip(l,l1))) # [(1, 'a'), (2, 'b'), (3, 'c')] """ zip() 函数用于将可迭代的对象作为参数，将对象中对应的元素打包成一个个元组，然后返回由这些元组组成的列表。 如果各个迭代器的元素个数不一致，则返回列表长度与最短的对象相同，利用 * 号操作符，可以将元组解压为列表。 """ "filter 过滤" p = [1,2,3,4,5,5,6,7,8] print(list(filter(lambda x:x+5,p))) # [1, 2, 3, 4, 5, 5, 6, 7, 8] print(list(filter(lambda x:x>5,p))) # [6, 7, 8] 'reduce' """ reduce() 函数会对参数序列中元素进行累积。 函数将一个数据集合（链表，元组等）中的所有数据进行下列操作：用传给 reduce 中的函数 function（有两个参数）先对集合中的第 1、2 个元素进行操作，得到的结果再与第三个数据用 function 函数运算，最后得到一个结果 """ s = [2,3,4] from functools import reduce print(reduce(lambda x,y:x**y,s)) print(reduce(lambda x,y:x+y,s)) # 9 print(reduce(lambda x,y:x+y,s,100)) # 109 'sorted 排序' k = [7,1,2,3,4,5,6] # print(list(sorted(k))) # [1, 2, 3, 4, 5, 6, 7] print(k.sort()) k.sort() print(k) # [1, 2, 3, 4, 5, 6, 7]
111.png
222.jpg
