学习js的第n天

 

我记不清楚什么时候开始学js的了，所以就取得这个名字。

在敲vscode的时候发现script标签里面的type属性没有了，我以为是没有下载插件的原因，后来搜索发现，是因为HTML5中script标签的type变成默认的了。

原文在这：(34条消息) script标签的type属性是必须的吗？_只想发财的博客-CSDN博客_script type

类似的还有style属性和link属性

 

常用的vscode快捷键：

注释快捷键

单行注释：' ctrl + / ’

多行注释（块注释）：' Alt+Shift+A ’

 

 

1.编写代码时发现vscode每次创建新文件需要选择相应的语言，希望默认是html文件

刚开始用vscode感觉真没有Hbuilder X好用,可能是习惯了使用那个吧。还要慢慢来适应这个。

搜索一番后发现只要在新建文件是将文件名打完后加上.HTML的后缀即可。一开始因为我看见vscode给我提示不能带有小数点的名字我就没有接着打完。

这下好了快很多了，而且还学会了另外一招新建html文件：通过英文状态下的！+　Tab键就可以新建了

2 .vscode 的属性不可以查看浏览器的兼容性问题 在B站的视频里面老师的代码提示里面会提示几个主流浏览器是否支持当前方法 

 ---未解决  

 

 

 

看视屏学习然后不加复习的话，真的忘记的太快了，前两天看的正则表达式的视屏内容现在已经忘了很多了，需要好好复习

https://www.cnblogs.com/ghostgift/archive/2013/03/28/2980406.html

感觉这个博主写的很详细

 

 1.学习拖拽时我想将拖拽的div内加入一张图片，但是显示不出来，可能是因为图片太大了，在vscode中也打不开

 

2.老师在教拖拽时，说如果按了ctrl+a全选之后，再去拖拽div的话，会发现没有设置拖拽的另外一个盒子也会移动，老师解释说是因为浏览器为了方便用户直接选中文本在搜索引擎里面搜索设置的功能。导致拖动时，另外一个没有设置拖动的div也可以移动，而且加上一段文字这段文字也会一起移动。

但是，实际上我在chrome浏览器中使用Ctrl+a全选之后，不能移动得盒子还是不能移动，但是这个时候的div就会一直跟着鼠标移动，无论松开与否，也就是说onmouseup函数里面的取消onmouseup失效了。

 老师后续演示中，另一个div没有随着移动

 

 

 

Unable to initialize Git; AggregateError(2) Error: Unable to find git Error: Unable to find git

又碰到问题了。今天学习滚轮事件，老师说火狐不支持一个属性，我想视屏是2016年的，到2022年可能就支持了，但是用插件open in browser 发生了这个错误

搜索是因为没有git 就很怪 但是2022年这个属性确实还是不支持

 

 

今天学习js的键盘事件，在学习过程中，老师说使用onkeydown，加上return false 可以取消默认行为。通过这个特性可以来控制文本框内输入的内容为特定值。

老师举例子是不能输入数字。onkeydown返回是按下的按键的Unicode编码，数字0-9是48-57  

var input = document.getElementsByTagName("input")[0];
            input.onkeydown = function(event){
                event = event||window.event;
                if(event.keyCode >= 48 && event.keyCode<=57){
                    return false;
                };


            };

　　但是实际上在chrome中，效果不太一样的是，字母上面的数字内容不能输入，但是小键盘的数字输入不会被取消。

 

 

做自动切换图片的练习，vscode又犯了一个错误，地址都用的 \  正确写法应该是 / 是斜杠不是反斜杠

后来改完之后运行在浏览器上出不了图片，控制台报错为Not allowed to load local resource:。搜索了一下才发现是因为我使用的live serve这个插件打开的浏览器。地址栏显示http://127.0.0.1:5500/html/16切换图片练习.html

使用的服务器。

解释如下：

如果页面在服务器上，浏览器出于安全考虑是不允许html访问本地文件的。不会允许浏览器打开file://开头的本地图片的。

如果页面html文件是放在本地的，比如用浏览器打开桌面上的html文件，是可以访问本地图片文件的。但也不能访问所在根目录以外的文件夹下的图片。否则会报错： “not allowed to load local resource”。

 

好奇怪，做定时器的应用时，定义了好几个div，我忘了获取到这个div了，结果下面的js代码还是生效了

 

 

 

 

js中a标签的href属性不跳转方法

 

在使用javascript伪协议的时候：

javascript: 是一个伪协议，其他的伪协议还有 mail: tel: file: 等等。
<a id="jsPswEdit" class="set-item" href="javascript:;">修改密码</a>
javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。
一般在这种情况下，会给<a>绑定一个事件回调，来执行业务，如：
document.getElementById('jsPswEdit').addEventListener('click', function(e) {undefined
e.preventDefault();

// 当<a>触发click时，处理业务
}, false);

下面是整理的a标签的href属性的用法：

1.超链接

<a href="http://www.baidu.com" >百度一下</a> 这种事<a></a>标签的最常用的用法，超链接到一个页面

2.锚点：

定位到当前页面顶端：

<a href="#" >定位到顶端</a> 这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。

定位到当前页面的指定位置：

<a href="#001">跳到001</a>
...文字省略
<a name="001" id="001" ></a>
...文字省略

其实锚点只需name就可以可，加id是为了让它兼容性更好.
href的值要跟name \ i d 一致，前面必须加"#"，以上代码在ie6/7,ff中都可以兼容，但在ie8中就不行。
因为我们锚点的<a></a>值为空，为不影响美观我们加个空格就行了,

如以下代码，就可以兼容ie8
<a href="#001">跳到001</a>
...文字省略
<a name="001" id="001" > </a>
...文字省略
定位到其他页面:

a href="123.html#001">跳到001</a>
...文字省略
<a name="001" id="001" > </a>
...文字省略
例子：代码如下
<a name="A0" id="A0"></a>
<a href="#A1">网页第一部分</a>
<a href="#A2">网页第二部分</a>
<div style="height:900px; background:#CCCCCC"></div>
<a name="A1" id="A1"></a>1<a href="#A0">返回顶部</a>
<div style="height:900px; background:#999999"></div>
<a name="A2" id="A2"></a>2<a href="#A0">返回顶部</a>
<div style="height:900px; background:#666666"></div>

3. href不跳转

a href="javascript:void(0);" οnclick="js_method()"

这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。
a href="javascript:;" οnclick="js_method()"
这种方法跟跟2种类似，区别只是执行了一条空的js代码。
a href="#" οnclick="js_method()"
这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。
a href="#" οnclick="js_method();return false;"
这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。

综上：所以想实现在<a href=>中调用js推荐使用：

<a href="javascript:void(0);" οnclick="js_method()"></a>
<a href="javascript:;" οnclick="js_method()"></a>
<a href="#" οnclick="js_method();return false;"></a>

 

 

 

2022.4.5日

今天学习js 的时候老师讲到了一点css的知识，果然是温故而知新啊。我才知道css 的class属性可以同时指定多个class，书写时加上一个空格就好了

例如我有.b1{    }    .b2{     }    两个类选择器，这个时候，给div加上属性   class = "b1 b2";   代表同时应用两个类选择器，而且后面那个会将第一个中相同的覆盖。而后代选择器的空格是在css文件中书写选择器的时候才有的

不能搞混了，一个是css的选择器规则，一个是html的书写

 

 

 

2022.4.27

js中==和===区别

 

简单来说： == 代表相同， ===代表严格相同, 为啥这么说呢， 

这么理解： 当进行双等号比较时候： 先检查两个操作数数据类型，如果相同， 则进行===比较， 如果不同， 则愿意为你进行一次类型转换， 转换成相同类型后再进行比较， 而===比较时， 如果类型不同，直接就是false.

 

操作数1 == 操作数2，  操作数1 === 操作数2

比较过程：

　　双等号==： 

　　（1）如果两个值类型相同，再进行三个等号(===)的比较

　　（2）如果两个值类型不同，也有可能相等，需根据以下规则进行类型转换在比较：

　　　　1）如果一个是null，一个是undefined，那么相等

　　　　2）如果一个是字符串，一个是数值，把字符串转换成数值之后再进行比较

　　

　　三等号===:

　　（1）如果类型不同，就一定不相等

　　（2）如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，那么不相等。（判断一个值是否是NaN，只能使用isNaN( ) 来判断）

　　（3）如果两个都是字符串，每个位置的字符都一样，那么相等，否则不相等。

　　（4）如果两个值都是true，或是false，那么相等

　　（5）如果两个值都引用同一个对象或是函数，那么相等，否则不相等

　　（6）如果两个值都是null，或是undefined，那么相等

 

 

 

2022.5.10

学习js高级已经一段时间了，之前老师讲解的有一些已经忘记了或者记错了。这里重复强调一下。

函数中的 arguments

每个函数（非箭头）在被调用时都会自动取得两个特殊变量：this 和 arguments。内部函数在搜索这两个变量时，只会搜索到其活动对象为止。
arguments 是一个类数组对象，里面保存着调用函数时传入的实参，第一个参数索引为0。

(function(age,name){
console.log(arguments); //[23,"XD"]
console.log(arguments.length); //2
console.log(arguments[0]); //23
console.log(arguments[1]); //XD
})(23,"XD");

修改 arguments 会影响参数。

(function(age){
console.log(arguments[0]); //23
console.log(age); //23
arguments[0] = 18;
console.log(age); //18
})(23);

arguments 虽然可以通过下标获取其中的元素，也有 length 属性，但是却不是一个数组，因此不能使用数组的方法。

(function(){
console.log(arguments.reverse()); //报错
})(23,"XD");

arguments 还有一个 callee 属性，这个属性指向 arguments 所在函数本身。

(function fun(){
console.log(arguments.callee === fun); //true
})();

用 arguments 对象判断传递给函数的参数个数，即可模拟函数重载：

function fun(){
if(arguments.length === 1){
console.log(arguments[0]);
}else if(arguments.length === 2){
console.log(arguments[0] + arguments[1]);
}
}

fun(18); //18
fun(18,23); //41

可以使用Array.prototype.slice.apply(arguments)和Array.prototype.concat.apply([], arguments)将arguments转化为真正的数组。

转载自(24条消息) 函数中的 arguments_瓜冬瓜的博客-CSDN博客_函数arguments

 

 

 

2022.5.10

js作用域和执行上下文的区别

之前，我以为作用域和执行上下文是同一个概念，其实并不是，这里很多人都会把它们混淆了。

上下文 vs 作用域
每个函数调用都有与之相关的作用域和上下文。从根本上说，范围是基于函数(function-based)而上下文是基于对象(object-based)。换句话说， 作用域是和每次函数调用时变量的访问有关，并且每次调用都是独立的。上下文总是关键字 this 的值，是调用当前可执行代码的对象的引用。
作用域是函数定义的时候就确定好的了，函数当中的变量是和函数所处的作用域有关，函数运行的作用域也是与该函数定义时的作用域有关。
而上下文，主要是关键字this的值，这个是由函数运行时决定的，简单来说就是谁调用此函数，this就指向谁。

转载自(24条消息) js作用域和执行上下文的区别_chiuwingyan的博客-CSDN博客_作用域和执行上下文

 

 

2022.5.15 

chorme版本过高也会导致很多问题啊，chorme不允许加载本地文件。使用web worker的时候会报错。

解决办法，使用服务器来运行该程序

借鉴博客：https://blog.csdn.net/henrybalabl/article/details/110848925