JS学习笔记

不念不忘少年蓝@ 2022-05-22 11:40 128阅读 0赞

之前刷过很多遍教程，效果总是不理想，学习笔记也做了，也跟着敲了代码，总是感觉像是新手，我想应该是平常缺乏练习，每天的代码量没有起来，导致几天就忘，那从侧面反映出我现在还有一丝懒惰的心理。希望突破自己！

废话不多说，开始再来一遍吧！

\-----------------------------------------------------正文-------------------------------------------------------------------

问题一：首先我在html页面的head部分引入了js，在js中写到，document.getElementById("p1").style.color="blue";    这句执行以后没有效果，打开控制台可以看到报错是 Cannot read property 'style' of null。之前自己一直以为报这样的错是因为程序不能识别我的style，应该是我的Jquery的js没引进来，太天真了哈，写的是原生js，所以应该是不引什么就能识别的。回到问题上，为什么会报错呢，是因为在执行js的时候人家程序没找到我的页面元素id=“p1”。这里补充一句，在之前遇到过这种问题很多次了，每次都会因为js放的位置导致出错，虽然不大，但是很多次还犯同样的错误就比较烦了，下次长点记性！接着来，所以出错原因就是页面还没有渲染，意思我的id都还不存在。所以js里面要对它进行操作自然找不到，就会报错。

解决办法：将引js的那一行放到body下面就好了。

补充：js作为一种脚本语言是可以放在html页面中的任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script代码就先被执行。比如进行页面显示初始化的js就必须放在head里面，因为初始化都要求提前进行。而如果是通过事件调用执行的function，那么对位置没什么要求。

问题二：变量的问题，变量必须使用字母，下划线或者美元符号开头。在之前的实践当中都是用字母开头，要记住，下划线和美元符号开头的变量也是可以的！且变量要先声明后使用。

问题三：消息弹出框，消息弹出框常见有两种，一种是alert，这种是在调试代码的时候常用的一种方式。还有一种是confirm，这种叫做消息对话框，其弹出的框中除了有输出的消息，还有两个按钮，一个是确定，一个是取消，分别对应的就是Boolean值的true和false。这个值可以被接受和进行判断，例：

var mymessage=confirm("你喜欢JavaScript吗?");
        if(mymessage==true)
        {   document.write("很好,加油!");   }
        else

\{ document.write("JS功能强大，要学习噢!"); \}

除了这两种，还有一种是prompt消息对话框（prompt(str1,str2)），这个比之confirm对话框增加了一个交互的输入框，用法与confirm类似。是将用户输入的内容作为返回值，将返回值拿来判断。例：

![70][]

问题四：打开新窗口，window.open('url','窗口名称','参数字符串')。url：是要显示的网址或者路径，如果省略这个参数，那么窗口就不会显示任何文档。窗口名称：\_blank（在新窗口显示目标网页，意思新打开一个网页）  \_self（在当前窗口显示目标网页，意思会覆盖当前网址）  \_top（框架网页中，在上部窗口中显示目标网页）   。参数字符串：top(窗口顶部距屏幕底部的像素值)  left(窗口左端离屏幕左端的像素值)  width(窗口的宽度)   height(屏幕的高度)   menubar(窗口有没有菜单)   toolbar（窗口有没有工具条）  scrollbars(窗口有没有滚动条)    status(窗口有没有状态栏)      例

![70 1][]

问题五：关闭窗口，关闭窗口直接调用close()方法就行了，可以直接用window.close()也可以用<窗口对象>.close();    例：

![70 2][]

以上就是对象.close()。也可以直接window.close()关闭当前窗口。

问题六：通过ID操作元素。我们知道原生js里面document.getElementById("id名")。这样一行语句就可以得到一个对象，注意是对象，对象，对象，重要的事情说三遍，而对象呢是不能作为页面元素显示出来的，如果要将一个p元素的内容获取到呢，就是对象.innerHTML。那如果要改变HTML的样式呢，对象.style.color/backgroundColor/...就这样改变所选元素的样式。同理，要改变HTML显示和隐藏，对象.style.display="none/block"。也可以通过对象来赋class的样式或者更改class样式哦，例  有一个样式名为one，此时我要将页面上id为p1的元素添加一个one的样式，我需要做的就是获取对象（var addclass = document.getElementById("p1")）,第二步就是addclass.className="one"。此时整个操作就完成了。更改样式也是一样，获得对象，再将对象的样式名一改，效果就ok了。

问题七：基础篇程序练习时有个问题，取消设置，拿着这个要求的我不知道应该下手，难道设置了颜色又让我设置回去，长宽什么的都设置回去，那这个工作量怕是有点儿大哟。后来看到人家写的代码，学到了一个方法。对象.removeAttribute("style")。这个方法就能把style的所有样式清除，好用好用！

好了，今天的基础篇就到这里，感觉比之前刷的那几次都更熟练了一点。加油加油！

[70]: /images/20220522/0e43dea786824158b7060e4fbe7eccb3.png
[70 1]: /images/20220522/601ed2455cac4cde84b584ef53cf9e23.png
[70 2]: /images/20220522/146de986092a4240bca90e0a280e7fc8.png