JavaScript¶
JS核心语法¶
引入方法¶
为什么放在body底部?
因为解析需要时间.如果放在开头,那么1.解析js代码花费时间过长,就会导致页面加载慢.2.由于某些标签没有解析,那么可能会导致js报错.
alert('hello');//分号可加可不加,但一般要么都加,要么都不加 这是弹出一个弹框的.
js代码可以定义在页面的任意位置.但还是建议放在body底部.如果通过外部引入,那么也放在body底部.
变量¶
console.log(PI);
输入结果在f12的控制台里.
也有种:
也就是直接改变页面内容.
alert全称是window.alert,但是window可以省略不写.
数据类型¶
alert(typeof null) 返回的是object(表示对象为空)
模版字符串
function¶
不需要指定返回值类型(因为是弱类型语言)
如果传入的参数比形参多,那么多传的就会被抛弃.
匿名函数:
实际上箭头函数更多使用
自定义对象¶
this指向对象本身
最后一个属性结尾的逗号可写可不写.
注意:对象当中的函数使用箭头函数容易有bug,因为箭头函数当中this指向的是当前对象的父级.
因此不推荐
JSON¶
这两者只是看起来像而已.
两者可以互相转化:
可以这样显示:
转成对象可以这样:(注意JSON中用的是双引号,因此示例中定义string时用的是单引号)
DOM¶
形成的树就是DOM树
innerHTML:修改HTML方法
下面是和上面相同的效果
以下这些方法已经被抛弃了,因为都可以被querySelector覆盖
事件监听¶
早期写法:
第一种方法:可以多次绑定同一事件,所有函数都会被执行
第二种方法:如果多次绑定同一事件,后面的会把前面的覆盖掉.
因此推荐第一种.
常见的:mouseenter mouseleave
常见事件¶
焦点:比如点进去输入框就是"获得焦点",离开就是"失去焦点"
模块化¶
记得引入:
假如我把公共函数抽取出来到util.js
那么需要在eventDemo.js里引入util.js
但这样还是不行,既然外部引用了,那么就需要暴露出去:(使用export)
但是这样还是不行.由于我们已经把js模块化了,因此我们需要告诉浏览器才行.需要加一个type="module":
