鱼C论坛

 找回密码
 立即注册
查看: 4200|回复: 24

[见证历程] 自学前端,立贴见证.

[复制链接]
发表于 2020-7-30 11:13:02 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
一直在思考要不要开一个贴子记录学习的历程,顺便监督自己.

看了不少人一直在更新,也一直在坚持.

思来想去,就地开一贴,记录一下自学的过程.

每天早上5点起床,骑我的小电炉赶去图书馆,八点半开门,但是要排队.

每天为了争取到好充电的位置,真的是很拼命了.

目前html5和css3刚刚学完,从零入门javascript  

就从这里开始记起来,每天晚上睡觉前,写下今天所学的东西和感悟.

希望自己能坚持下去,做一个出色的程序媛!!
        
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2020-7-30 22:13:08 | 显示全部楼层
今天总算弄明白一点递归了,
其实,感觉递归函数和for循环很相似,
区别在于,递归函数可以一直调用自身.
如果不设置一个临界值的话,就会陷入死循环.
第二,触发点击事件
例如,点击一个按钮,改变某个div的样式.
  1. <body>
  2.     <input type="button" id="btn" value="按钮">
  3.     <div id="box">
  4.         AAAAA
  5.     </div>
  6.     <script>
  7.         btn.onclick=function(){
  8.             box.innerHTML='<h1>学习使我快乐!!</h1>'
  9.         }
  10.     </script>
  11. </body>
复制代码
第三.构造函数.
构造函数其实就是对象的模板,描述对象的基本结构.
可以生成多个对象,都有相同的结构.
  1. <script>
  2.         function Dog(name){  
  3.              //名字首字母大写,以作区分
  4.              //形参用来设置每个对象不同的地方
  5.             this.name = name ;
  6.              //this:指所有使用这个构造函数生成的对象,用来对多个对象生成相同部分
  7.             //  this.xxx:用来定义一个参数
  8.             this.wang = function(){
  9.                 // 构造函数内部也可以创建新的对象
  10.                 console.log(this.name+':汪汪')
  11.             }
  12.         }
  13.         var xiaohei = new Dog('小黑')
  14.         console.log(xiaohei)

  15.         var xiaobai = new Dog('小白')
  16.         console.log(xiaobai)

  17.         xiaobai.wang()
  18.     </script>
复制代码
今天的记录到此结束,明天图书馆不开门,去游泳吧.
望再接再厉!!

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-7-30 22:14:15 | 显示全部楼层
好像代码块排版出了一点问题,应该是我选择了居中对齐吧
明天改过来
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-8-1 14:14:06 | 显示全部楼层
今天生病了,偏头疼,也没有去医院
就在家里休息了一会,现在好得多了
看看晚上能不能起来学学东西,
不想就这么浪费了一天
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-8-3 11:00:23 | 显示全部楼层
昨天右边的头又有点疼.....
晚上就直接休息了,今天晚上如果身体没有异常的话就会补上昨天的
现在的图书馆排队越来越早了
逼得我五点起床占位置,然后骑电车回家睡觉
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-8-3 20:42:37 | 显示全部楼层
电闪雷鸣,秋高气爽
实在是太爽了!!

前两天差点把我闷死.

了解了一下 堆和栈    值传递还有引用传递
数组的冒泡排序,以及sort排序

  1. // 冒泡排序法
  2.     var arr = [3,4,6,1,2,9,0,5,8,7]

  3.     for(var i = 0; i<arr.length-1;i++){
  4.         //运行多少轮,比长度少一个
  5.         for(var j =0;j<arr.length-1-i;j++){
  6.             //每一轮能确定一个数,减去一个i,可以提高计算效率
  7.             if(arr[j]>arr[j+1]){
  8.                 //判断当前排序是否符合要求
  9.                 var t = arr[j]
  10.                 arr[j]= arr[j+1]
  11.                 arr[j+1]= t;
  12.             }
  13.         }
  14.     }
复制代码

  1. //sort 排序法

  2.     var btn = [3,6,9,8,2,1,4,5,0,7]

  3.     btn.sort(function(a,b){
  4.         return b - a;
  5.     })
复制代码



总结了一下,数组排序的核心思想

每当相邻的数比较后发现他们的排序与要求相反,就将他们互换

外面雨实在太大,这两天可能不回去图书馆了

有一说一,看外面电闪雷鸣实在太爽了
要是能多下几天就好了

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-8-5 20:31:35 | 显示全部楼层
昨天的课程,音频除了问题,耳朵差点报废.
稀里糊涂,在别的地方把坏掉的几节课补上了
1.浮点数精度
  1. var t = parseFloat((0.2+0.2).toFixed(3))
  2.         document.write(t)
复制代码

具体原因就是计算机的二进制运算的问题
通过取浮点类型加保留小数位数来取得一个精确值

2.数组元素去重复
  1. var arr = [1,2,3,4,4,3,2,1,5,6,6,7,8]

  2.         for(var i = 0;i<arr.length;i++){
  3.             //第一轮循环,从第一个数开始,与后面的所有数对比
  4.             for(var j =i+1;j<arr.length;j++){
  5.                 //第二轮循环,从i+1开始与i对比
  6.                 if(arr[i] === arr[j]){
  7.                     //判断是否有与i重复的数字
  8.                     arr.splice(j,1)
  9.                     //遇到与i重复的j,就删除掉一个
  10.                     j--;
  11.                     //在数组中,如果删除掉了一个数,剩下的数会自动补齐,此时会提换掉上一个被删除的数字,所以每一个位置,都要对比两次
  12.                 }
  13.             }
  14.         }
  15.         console.log(arr)
复制代码


                               
登录/注册后可看大图


3.字符串的创建和方法

这个实在是有点多,但是跟数组比又简单太多,就不往这一点点粘贴了
回头有空了写到有道云上

今天出门想买牛奶,发现外面都已经淹了
水都到我膝盖了......

估计还得过两天才能去图书馆了
话说你们在家里学习效果好么
我感觉我老想睡觉,实在是有气无力
真想赶紧把javascript学完,这样我就能花一些时间去学python了
慢慢来吧
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-8-6 00:16:52 | 显示全部楼层
聊了一会天,顺便把今天的代码赶出来了
说自己懒看来还是不公正

直接放代码块吧

  1. <script type="text/javascript">
  2.         //字符串的创建与方法练习
  3.                                
  4.                     //slice : 从原字符串取出子字符串并返回,不改变原字符串
  5.                                
  6.                                         //1.第一个参数为开始,第二个参数为结束(不包括自己)
  7.                                  
  8.                                          console.log('javascript'.slice(0,4))
  9.                                  
  10.                                          //2.第二个参数不写,则一直取到最后
  11.                                         
  12.                                          console.log('javascript'.slice(4))
  13.                                         
  14.                                          //3.参数为负值时,从结尾开始数位置
  15.                                         
  16.                                          console.log('javascript'.slice(-6))
  17.                                         console.log('javascript'.slice(0.-6))
  18.                                         console.log('javascript'.slice(-2,-1))
  19.                                        
  20.                                        
  21.                         //indexOf:确定一个字符串在另一个字符串中第一次出现的位置,返回值为开始第几的位数
  22. //                                                        若返回-1,则表示没有这个元素

  23.                                         var a = 'hello world'.indexOf('o')
  24.                                         console.log(a);
  25.                                        
  26.                                         var b = 'javaScript'.indexOf('script')
  27.                                         console.log(b)  //   -1   注意区分大小写
  28.                        
  29.                         //lastindexOf:跟indexOf相反,从后面开始匹配
  30.                        
  31.                                         var c = 'hello world'.lastIndexOf('o')
  32.                                         console.log(c)
  33.                                        
  34.                                        
  35.                                         var d = 'hello world'.lastIndexOf('o',6)
  36.                                         console.log(d)
  37.                                        
  38.                        
  39.                         //trim :去除字符串两端的空格,返回新的字符串,不改变原字符串
  40.                        
  41. //                                        一般用时,都会要求改变原字符串,去除空格
  42.                                         var str = ' hello world '
  43.                                         str = str.trim()
  44.                                         console.log(str)
  45.                                        
  46. //                                        去除单边的空格
  47. //                                        trimleft()   trimright()
  48.                                        
  49.                                        
  50.                         //toLowerCase / toUpperCase : 将一个字符串全部转换为小写或者大写,返回新的
  51. //                                                                                                                字符串,不改变原字符串

  52.                                         console.log('HEllo WorlD'.toLowerCase())
  53.                                         console.log('HEllo WorlD'.toUpperCase())
  54.                                        
  55.                        
  56. //                        split : 按照既定规则分割字符串,返回新字符串组成的数组
  57.                                        
  58.                                         var t = ('a|b|c'.split('|'))
  59.                                         console.log(t)
  60.                                        
  61.                                         //如果规则为空的字符串,则将原字符串的每一个元素返回数组
  62.                                        
  63.                                         console.log('a|b|c'.split(''))
  64.                                        
  65.                                         //与数组中的join可以互相转化
  66.                                         //将字符串用sort排序的方法
  67.                                         var arr = '3,7,1,5,'
  68.                                         console.log(arr.split(',').sort(function(a,b){
  69.                                                 //先将字符串转换为数组,再用sort排序
  70.                                                 return a - b;
  71.                                         }).join(',')) //最后再转换为字符串返回
  72.                                        
  73.                                        
  74.                         //replace : 替换匹配的字符串,一般只替换第一个(除带有g修饰符的正则表达式)
  75.                                         console.log('aaa'.replace('a','b'))
  76.                                        
  77.                                         console.log('aaa'.replace(/a/g,'b'))
  78.                                        
  79.                                         //用replace消除敏感词
  80.                                         var res = '你是垃圾吗,你是傻逼吗'
  81.                                         //第一种:
  82.                                         while(res.indexOf('垃圾') !== -1){
  83.                                                 res = res.replace('垃圾','**')
  84.                                         }
  85.                                        
  86.                                         //第二种:
  87.                                         console.log(res.replace(/傻逼/g,'**'))
  88.                                        
  89.                         </script>
复制代码


控制台效果

                               
登录/注册后可看大图


今天的作业还没写,又得拖到明天了

真想改改自己的拖延症

明天再想吧

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-8-7 21:17:07 | 显示全部楼层
今日份学习笔记
  1. <script type="text/javascript">
  2.                        
  3.                         //新增的数组方法:
  4.                        
  5.                                 //forEach: 遍历数组,回调函数,参数是一个函数
  6.                                                 var arr = [1,2,3,4,5,6,7]
  7.                                                 arr.forEach(function(value){
  8.                                                         console.log(value)
  9.                                                 })
  10.                                
  11.                                
  12.                                 //map : 映射,把一个数组,按照一定规则,映射为另一个数组,不改变原数组
  13.                                                 var arr2 = [1,2,3,4,5,6,7]
  14.                                                 var res = arr2.map(function(v,i){
  15.                                                         //return   后面写映射的规则
  16.                                                         return  v+0.5
  17.                                                 })
  18.                                                 console.log(res)
  19.                                                
  20.                                                
  21.                                 //filter : 过滤,搜索 参数是一个函数,参数会被执行多次,每次都会拿到一个返回值
  22.                                                         //当返回值等于true 当前元素加到新数组
  23.                                                 var arr3 = [1,2,3,4,5,6,7]
  24.                                                 var res2 = arr3.filter(function(v){
  25.                                                         return v>0;
  26.                                                         //所有满足return的元素加到新数组res2
  27.                                                 })
  28.                                                 console.log(res2)
  29.                                                         //过滤,搜索  对象
  30.                                                 var arr5 = [{name:'张三',age:19},{name:'李四',age:18},{name:'王麻子',age:20}]
  31.                                                 //删选出所以年龄大于19岁的对象
  32.                                                 var arr5 = arr5.filter(function(v){
  33.                                                         //return v.age>19
  34.                                                         return v.name.indexOf('张')!==-1
  35.                                                         //查找所有name包含'张'的对象    indexOf()  !==1 : 包含括号里的
  36.                                                 })
  37.                                                 console.log(arr5)
  38.                                                
  39.                                 //reduce : 累计求值,参数是一个函数,函数有两个参数
  40.                                                 //1.累积变量 ,默认为数组的第一个元素,  sum
  41.                                                 //2.当前变量,默认为数组的第二个元素,  v
  42.                                                 var arr4 = [1,2,3,4,5,6,7]
  43.                                                 var arr4 = arr4.reduce(function(sum,v){
  44.                                                         return sum + v
  45.                                                 //return sum * v
  46.                                                 //return sum / v
  47.                                                 //return sum - v
  48.                                                 })
  49.                                                 //初始值可以不写,默认为第一个元素
  50.                                                 console.log(arr4)
  51.                                                
  52.                                 //find : 查找,参数是一个函数,函数的返回值是查找条件
  53.                                                 var arr6 = [{name:'张三',age:19},{name:'李四',age:18},{name:'张三他爸',age:20}]
  54.                                                 var res3 = arr6.find(function(v){
  55.                                                         return v.name = '张三他爸'
  56.                                                 })
  57.                                                 console.log(res3)
  58.                                                
  59.                                 //findIndex : 找到满足条件的元素的下标,找到的:-1
  60.                                 var arr7= [{name:'张三',age:19},{name:'李四',age:18},{name:'张三他爸',age:20}]
  61.                                                 var res4 = arr7.findIndex(function(v,i){
  62.                                                         return v.name == '李四'
  63.                                                         //必须是两个 ==  
  64.                                                 })
  65.                                                 var res5 = arr7.findIndex(function(v,i){
  66.                                                         return v.age == '30'
  67.                                                         // 必须是两个 ==
  68.                                                 })
  69.                                                 console.log(res4)
  70.                                                 console.log(res5)
  71.                                                
  72.                                 //some : 判断数组中是否有一些元素满足条件 及果实true 说明至少有一个满足条件
  73.                                                 var arr8= [{name:'张三',age:19},{name:'李四',age:18},{name:'张三他爸',age:20}]
  74.                                                 var flag = arr8.some(function(v){
  75.                                                         return v.age >=18
  76.                                                         //判断是否至少有一个age大于18,有一个结果就为true
  77.                                                 })
  78.                                                
  79.                                                 var flag2 = arr8.some(function(v){
  80.                                                         return v.name == '王二麻子'
  81.                                                 })
  82.                                                 console.log(flag)
  83.                                                 console.log(flag2)
  84.                                                
  85.                                 //every : 判断数组中是否所有的元素都满足条件
  86.                                                 var arr9= [{name:'张三',age:19},{name:'李四',age:18},{name:'张三他爸',age:20}]
  87.                                                 var flag3 = arr9.every(function(v){
  88.                                                         return v.age>15
  89.                                                 })
  90.                                                 console.log(flag3)
  91.                                                
  92.                                                 var flag4 = arr9.every(function(v){
  93.                                                         return v.age>21
  94.                                                 })
  95.                                                 console.log(flag4)
  96.                                                
  97.                 </script>
复制代码


效果图:

                               
登录/注册后可看大图


有没有大神教教我消除敏感词的函数
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-8-10 07:00:31 | 显示全部楼层
敏感词学会了  留言加敏感词

敏感词:
  1. function print(str){
  2.                                 var arr = ['sb','nt','fw']
  3.                                 for(var v of arr){
  4.                                         while(str.indexOf(v)!==-1){
  5.                                                 str = str.replace(v,'**')
  6.                                         }
  7.                                 }
  8.                                 return str;
  9.                         }
复制代码


留言框:
  1. btn.onclick=function(){ //按钮点击事件
  2.             var str = ipt.value;
  3.             //首先获取输入框的值
  4.             var nar = `<li>${str}</li>`
  5.             //接着把值拼成<li>
  6.             list.innerHTML=list.innerHTML+nar
  7.             //获取<ul>的值并把拼的<li>加进去
  8.             ipt.value=''
  9.             //把输入框的值清空,以便重新输入
  10.         }
复制代码


只需要把封装好的敏感词的函数调用一下:
str=print(str)
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-8-10 15:29:12 | 显示全部楼层
  1. //深拷贝练习
  2.         function deepCopy(obj){
  3.                 var o = {}
  4.                 //新建一个空的对象用作返回值
  5.                 for(var prop in obj){
  6.                         if(typeof obj[prop] == 'object'){
  7.                                 //如果形参中有嵌套的对象 ,就必须要再次遍历,否则
  8.                                 //就会形成浅拷贝,利用递归调用自身即可
  9.                                 var tes = deepCopy(obj[prop])
  10.                                 //从新调用自身,再对obj含有嵌套对象的值进行遍历
  11.                                 //并赋值给新变量
  12.                                 o[prop] = tes
  13.                                 //把值赋给空对象o
  14.                         }else{
  15.                                 o[prop] = obj[prop]
  16.                                 //如果没有嵌套的对象 直接把值赋值给空对象o
  17.                         }
  18.                 }
  19.                 return o;
  20.                 //返回值为空对象o,调用时只需要重新赋值即可.
  21.                 //例: var str = deepCopy(obj)
  22.                 //console.log(str)
  23.         }
复制代码


想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-8-15 12:25:11 | 显示全部楼层
学习的劲头总是一逝而过
自制力太弱的我  总是被生活的琐事影响
几天才能学完一天的课程
怎么样才能提高自己的学习自制力呢
这个帖子 只有我在默默地更下去
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-8-17 08:52:03 | 显示全部楼层
Date:
  1. //获取当前时间
  2.         var time = new Date()
  3.         console.log(time)

  4.         //获取时间戳
  5.         var times =new Date().getTime()
  6.         //console.log(newtime.getTime())
  7.         console.log(times)

  8.         //返回对应时间(时间戳`时间实例,转换)
  9.         var tt = new Date(1597207295532)
  10.         var ttt = new Date('2020-8-12')
  11.         console.log(tt)
  12.         console.log(ttt)

  13.         //日期计算:
  14.         var newtime = new Date()//当前时间
  15.         var oldtime = new Date(1597207295532)//旧时间
  16.         console.log(Math.abs(newtime.getTime() - oldtime.getTime())/1000/60)

  17.         //日期处理:
  18.         //一个月中的某一天(1-31)
  19.         console.log(newtime.getDate())
  20.         //一周中的某一天(0-6) 0:周日
  21.         console.log(newtime.getDay())
  22.         //月份(0-11)
  23.         console.log(newtime.getMonth())
  24.         //四位数的年份
  25.         console.log(newtime.getFullYear())
  26.         //当前小时(0-23)
  27.         console.log(newtime.getHours())
  28.         //当前分钟(0-59)
  29.         console.log(newtime.getMinutes())
  30.         //当前秒(0-59)
  31.         console.log(newtime.getSeconds())
  32.         //1970.1.1至今的毫秒数
  33.         console.log(newtime.getTime())

  34.         //日期的修改
  35.         // 将get转换为set即可对应修改
  36.         console.log(newtime.setMonth(5))
  37.         
  38.         //这些参数如果超过了正常范围,会自动折算
  39.         var day = new Date(2020,1,1)
  40.         day.setDate(day.getDate()+10)
  41.         console.log(day)
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-8-17 08:52:41 | 显示全部楼层
Date补充:
  1.   //创建指定时间对象
  2.         var str = new Date("2020,8,15 12:33:00")
  3.         console.log(str)

  4.         //获取当前时间戳
  5.         var time = Date.now()
  6.         console.log(time)
  7.         //时间戳的日期转换
  8.         console.log(time/1000/60/60/24)
  9.         //1970年到今天的天数

  10.         //利用时间戳计算程序运行的时间
  11.         var start = Date.now()
  12.         for(var i = 0;i<100;i++){
  13.             console.log('哈啊哈哈')
  14.         }
  15.         var end = Date.now()
  16.         console.log('运行了:'+(end-start)+'毫秒')

  17.         //比较两个时间的大小
  18.         var today, someday, text;
  19.         today = new Date();
  20.         someday = new Date();
  21.         someday.setFullYear(2049, 0, 16);

  22.         if (someday > today) {
  23.         text = "今天在 2049 年 1 月 16 日之前";
  24.         } else {
  25.         text = "今天在 2049 年 1 月 16 日之后";
  26.         }
  27.         document.getElementById("demo").innerHTML = text;
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-8-17 08:53:40 | 显示全部楼层
定时器与延时器
  1. //定时器与延时器
  2.                         setInterval(function(){
  3.                                 console.log('每隔两秒执行一次')
  4.                         },2000)
  5.                         setTimeout(function(){
  6.                                 console.log('计时3秒,只执行一次')
  7.                         },3000)
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-8-24 15:14:50 | 显示全部楼层
加油~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-9-2 20:35:55 | 显示全部楼层
想找个小伙伴监督我 救救孩子吧
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-10-16 20:10:03 | 显示全部楼层
python_live 发表于 2020-8-10 07:00
敏感词学会了  留言加敏感词

敏感词:

敏感词过滤可以这么写

  1. function filter(str) {
  2.         var arr = ['sb', 'nt', 'fw']
  3.         var reg = new RegExp(arr.join('|'), 'ig')
  4.         return str.replace(reg, '**')
  5. }
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-2-18 08:44:54 From FishC Mobile | 显示全部楼层
还在更新嘛
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2021-2-22 08:36:20 | 显示全部楼层

因为我现在在培训班学习了  所以没有更新了 没有时间  
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 12:57

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表