发表于： 2019-11-18 21:06:40
1 1027
今日完成:
总结,区分,清晰认知学到的js
为什么学习 JavaScript?
1.HTML 定义了网页的内容
一个页面中都有哪些内容
2.CSS 描述了网页的布局(样式)
内容的颜色,距离,排布等
3.JavaScript 网页的行为
内容触发某个事件,就展示某个效果(执行某个代码)
------------------------------------------------------------------------------------------------------------------
在html中插入js都必须写在<script> 标签之间,js脚本可以放在<body>和<head>都可以,都是生效的
浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码
js外部文件
包含被多个网页使用的脚本代码,可以把脚本保存到外部文件中
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，在 <script> 标签的 "src" 属性中设置该 .js 文件：
ex:
<body>
<script src="myScript.js"></script>
</body>
与将脚本放置于 <head> 或者 <body>中脚本运行效果完全一致
ps:外部 javascript 文件不使用 <script> 标签，直接写 javascript 代码
-----------------------------------------------------------------------------------
遇到问题:
var x=document.getElementById("intro");
x=document.getElementById("intro");
有什么区别?
解决:
1.
var x是声明x是一个变量,变量是一个名称,等号赋值,而document.getElementById("intro")是它的值
x=是等于号直接为x赋值,x的值是document.getElementById("intro"),没有声明x是个变量
2.它们之间的区别待思考查询
--------------------------------------------------------------------------------
遇到问题:
id名,和类名,id唯一,在js语句domid绑定对象和类名绑定对象的应用中有区别吗?如果有,有哪些区别?
-------------------------------------------------------------------------------
js中的引号相关注意(通用)
所有js语句中,带引号的可以用单引号,也可以用双引号,但是有一点,在用了双引号(单引号)包裹内容(类名,id,字符串等)后;
其内容中出现需要用到引号的的情况,只能用单引号(双引号),必须与包裹用的引号异同,否则会造成js语句的混乱,
如果有必须用到相同引号的情况,就用特殊符号,其中反斜杠(\)的应用,\"会被认为是内容的引号,而不是包裹用的引号
(注意:引号成对出现,那么\必须每个都添加,ex:\"内容\" 显示输出:"内容",同样如果有其他冲突符号,\同样适用)
js语句严格区分大小写 (通用)
ex:
html中aaa和AAA是两个类,或两个id
js语句中:getElementByid链接就是失效的,必须是getElementById
---------------------------------------------------------------------------
遇到问题:
怎么确认(操作)js是在加载时执行的,还是加载后执行的?
(ex:如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。)
解决:
1.不设置目标对象(dom绑定),直接写入,就随着html的代码一起被编译,加载时执行,不会覆盖html页面;
或者仅仅设置有目标(绑定)对象,也是加载时执行,仅仅直接覆盖目标内容
2.待思考查询
-------------------------------------------------------------------------------------------------
遇到问题:
什么叫代码的打印功能?
------------------------------------------------------------
js语句之间用分号(;)隔开
DOM
ex:document.getElementById("some id")
这个方法是 HTML DOM 中定义的。
DOM (DocumentObject Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。
用来连接(确认)js语句作用对象的
三种方法
1.id名
2.标签名
3.类名
确认后,js语句能给html中的目标添加的效果(作用)
1.JavaScript 能够改变页面中的所有 HTML 元素
2.JavaScript 能够改变页面中的所有 HTML 属性
3.JavaScript 能够改变页面中的所有 CSS 样式
4.JavaScript 能够对页面中的所有事件做出反应
ps:什么是事件?
ex:
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击
等
以上都是事件,当触发这些事件时可以通过js执行一些代码
总结(详解):
1.id名(最常用)
通过document.getElementById("aaa");
连接(确认)html中一个标签中带有相同id名的标签,
带有document.getElementById("aaa");的js语句,就会对id为"aaa"的标签执行设定好的代码(根据实际需求),
ps:document.getElementById用于锁定id名,id名,必须用括号和引号双重包裹("任意目标id名"),
2.标签名
getElementsByTagName("目标标签名")
ps:如果没有限制,就是html中的所有目标标签,有限制,就是限制范围内的所有目标标签
3.类名
getElementsByClassName("目标类名")
ps:如果没有限制,就是html中的所有相同类名,有限制,就是限制范围内的所有相同类名
总结:
1.连接用的前缀分为getElementBy和getElementsBy不相同,根据作用目标不同的选择方式分为Id,TagName,ClassName
TagName,ClassName带s--getElementsBy,id不带s--getElementBy
注意:首字母都为大写,小写js无效
2.如需从 JavaScript 访问某个 HTML 元素,完整句式(id举例)document.getElementById(id)
/-------------------------------------------------------------
在javaScript中不提供任何的内建的打印或者输出函数。但是js仍然为我们提供了一些输出的方案
1.使用 window.alert() 弹出警告框。
2.使用 document.write() 方法将内容写到 HTML 文档中。
3.使用 innerHTML 写入到 HTML 元素。
4.使用 console.log() 写入到浏览器的控制台。
------------------------------------------
1.使用 window.alert() 弹出警告框
.ex:
<script>
window.alert(5 + 6);
</script>
显示:
事件是页面加载就触发的,
显示为提示框,内容为window.alert(5 + 6)中的(5 + 6)的结果,
总结(扩展):
1.window.alert(5 + 6)的括号中,是因为两个数字中间"+"连接,所以数字之间的空格才被忽视,呈现效果(可以说数字字面量和表达式字面量不需要引号,);
当把加号"+"去掉,两个数字之间,(5空格6)这种,就会造成js语句失效,但是两边有空格(空格56空格)会被浏览器忽略,显示效果:56;
2.window.alert(5 + 6)的括号中,直接填写内容,只有数字,或者数字的运算才会生效,改为或者添加字母或者文字都是无效的
ex:window.alert(aaa)或者window.alert(1112e)或者window.alert(啦啦啦)js语句输出都是无效的
必须把输出的内容外添加上引号,ex:window.alert("aaa")或者window.alert("1112e")或者window.alert('啦啦啦')
js语句才会有效,输出填写的内容,
ps:
1.把括号去掉,直接用引号包裹内容是无效的
2.只要是写在引号内的js输出内容,都会被浏览器识别并输出包括空格
ex:空格window空格.空格alert空格(空格"空格 1 空格 啦啦啦 空格 1 ")
如上例子,引号""之外的空格都不会影响js语句的输出(失效),浏览器会忽略掉这些空格,
而括号里面的空格同样不会影响js语句的输出(失效),但是浏览器会识别所有的每一个空格,完整的显示出来
ex:
-------------------------------------------------
3.这种js语句,没有id绑定,事件就是html加载的时候,直接运行生效
4.dom中定义的绑定方式,与输出语句之间用点(.)隔开
ex:document.getElementById("demo").innerHTML
/---------------------------------------------------------
innerHTML 来获取或插入元素内容, 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
总结:
1.显示效果直接就在载入时,就覆盖了原本的内容,用dom,id锁定修改对象
2.修改的内容直接用等于号和引号包裹,不需要括号,且引号内的空格和外部的空格都不会影像输出(失效),但都会被浏览器忽略
/------------------------------------------------------------------------------
HTML 输出流中使用 document.write，相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档。
ex:
<script>
document.write(1+2);
</script>
<p>我的第一个段落。</p>
<script>
document.write(123);
</script>
显示:
3
我的第一个段落
123
总结:
1.不运用id绑定的情况下,就类似一个标签,插入一段话,位置,由语句本身在html中位置来定
2.括号内输出的内容总结规则,与上述使用 window.alert() 弹出警告框总结(扩展)类似,
区别:与之不同的是document.write引号中的空格识别但只识别一次,即:不管中间加了多少空格,浏览器读取默认只有一个空格
并且,引号内,引号与内容中间的空格也是忽略的
遇到问题:
学到东西太多,等做的时候,发现搞的有点混,比如什么带括号,什么不带括号
var 声明的值, =直接赋予的值,好像都有效,之类的有点蒙
收获:
1.第二遍,在有初步了解的基础上看,又多了一些清晰的感悟
2.在一些例子中增删改查,失效不失效,也提前避免了一些可能会踩的坑
明日计划:
应该是可以尝试去做js任务一了
返回列表
评论