JavaScript书写格式
-
和CSS书写格式一样, JavaScript也有三种书写格式, 分别是"行内式"、"内嵌式"、"外链式"
-
和CSS书写格式一样, JavaScript三种书写格式中也推荐大家使用"外链式", 遵守结构、样式、行为分离
-
1.行内式格式(不推荐)
<div onclick="alert('hello world');">我是div</div>
- 2.内嵌式格式
</body>
... ...
<script type="text/javascript">
alert("hello world");
</script>
</body>
- 3.内嵌式注意点
通常将js代码放在body的最后, 因为HTML是从上至下加载, 而js代码通常是给标签添加交互(操作元素), 所以需要先加载HTML, 否则如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素);
HTML页面中出现<script>标签后，就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续, 所以如果把js代码写在head中, 那么js代码没有执行完毕之前后续网页无法查看
如果不愿意把js代码放在body的最后, 也可以放在head标签中, 但是为了保证执行js代码时HTML一定已经被加载了, 那么需要添加一些额外代码.(不推荐)
- 如果写在标签之前，你将会获取到一个空的值，就会报错，因为页面还没加载完这个标签，就是返回null
<head>
<script>
// 告诉浏览器在整个页面加载完成后才执行
window.onload = function () { // 必须添加这句
alert("hello world");
}
</script>
</head>
- 外链式格式
<script type="text/javascript" src="01-js书写格式.js"></script>
- 外链式注意点
外链式的script代码块中不能编写js代码, 即便写了也不会执行
<script type="text/javascript" src="01-js书写格式.js">
alert("hello world"); // 不会被执行
</script>
- 由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件合成为一个JS文件,以提升网页的性能和加载速度
JS中的常见输出方式
- 在浏览器弹窗中显示内容
alert("hello world");
prompt("请输入内容：");
confirm("你好吗?");
*`在页面中显示内容
document.write("hello world2");
- 在控制台中显示内容
console.log("hello world3");
console.error("错误信息");
console.warn("警告信息");
image.png
- 注意点：
和C语言一样, JS中严格区分大小写
alert("hello world"); // 正确
Alert("hello world"); // 错误
- 和C语言一样, 每一条JS语句以分号(;)结尾
如果不写分号，浏览器会自动添加，但是会消耗一些系统资源
并且有些时候浏览器会加错分号，所以在开发中分号必须写
- JS中会忽略多个空格和换行
alert
(
"hello world"
);
1.获取到需要操作的标签的权力
给一个方法/api 传递一个名字，这个方法会通过这个名字去找到对应的标签，确定标签存在时，就返回这个标签的操作权力
document.getElementById("box") 通过id获取标签的操作权力
div 有一个点击事件 = 小纸条b把要做的事情全部记录下来
image.png
2.变量名的命名规范：
1.不能纯数字
2.不能以数字开头
3.严格区分大小写
4.不能使用关键字和保留字
5.可以使用符号（最好是英文符号）
6虽然可以使用中文作为名字，但是非常不推荐使用
应该是以为英文符号或者英文字母开头，中间可以有数字。但是开头不能有数字或者全部纯数字
3. innerText 和 innerHTML的区别：
1.innerText是标签内的文本,输入输出的是字符串;可以解析标签 就是纯文本，不会解析标签
2.innerHtml是<标签内的文本,输入输出到该DOM内部纯HTML代码;可以解析标签
3.value是表单元素特有的属性,输入输出的是字符串;
4. var let const 的作用
- 已经声明的变量不需要再声明一次
- var 全局变量 会 自动的 成为 window的属性
let 和 const 声明的全局变量 不会成为window的属性
let 和 const的区别
et 声明的叫做变量，可以重新赋值
const 声明的叫做常量， 恒定 不能重新赋值
-
都是需要先声明后使用
-
注意：
- es6： 全IE基本不兼容
5. 如何获取一个标签的ID值
- 点号代表选择它下面的
对象直接点号（.）选中的style是行内style;
不写等号=就是获取；写了=就是赋值
写了"" 表示选择的是这个字符串，不加就是选择的是对象！
<div id="box" style="background-color: blue"></div>
<script>
let name = document.getElementById("box");
let desc = document.getElementById("desc");
name.onmouseenter = function(){
/* 通过找到这个变量，
这个变量拿到的是这个标签本身，
然后再通过.获取到它下面的id值
*/
console.log(name.id);
/* 通过找到这个变量，
这个变量拿到的是这个标签本身，
然后再通过.获取到它下面的style中的blue值
background-color里面的blue
*/
console.log(name.style.backgroundColor);
/*
可以直接给它指定属性值
找到这个变量，通过这个变量找到这个标签本身
再找这个标签下面的style的下面的width
再给width设置为 500px;
*/
name.style.width = "500px";
// 还可以找到其他对象，只要获取到对应的对象就行了
p1.innerText = "这是一段文字";
// 通过找到变量名打印日志
console.log(desc.innerText = "这是文本");
// 声明一个变量，然后打印时候调入这个对象就可以了。
let source = desc.innerText = "我是文字";
/*
再自定义变量就会把source给重置了。
source = 123;
*/
console.log(source);
}
name.onmouseleave = function(){
// 鼠标离开这个元素width为300px
name.style.width = "300px";
}
</script>
6. 需要注意：
1.写在
window.load中的信息会在body后面的信息。放在body中的信息会优先加载。因为window.load是在监听这个页面加载完之后才会执行的。
<script>
window.onload = function (){
console.log("这是文字");
}
</script>
// 优先加载
<script>
console.log("我也是文字");
</script>
- 引入外部js文件时，如果同时输出一段内容，写在外部js的文件会优先加载，因为
window.load是在整个窗口加载完成后才执行的，所以引入的文件先执行.
<script>
window.onload = function (){
console.log("我是文字1");
}
</script>
// 先执行.
<script src="01.js"></script>
- 一般写外部js都写在
window.load中
window.onload = function (){
let divbox = document.getElementById("box");
divbox.onmouseenter = function (){
console.log("这是文字");
}
}
4.给引入js文件后面加一个
defer属性,defer属性会在页面加载完之后，window.onload之前 执行。
-
defer只对外部js文件有效
<script src="01.js" defer></script>
5.声明多个变量可以用逗号隔开，这样我们就不用每次都写 定义变量符号了。
let box1 = document.getElementById("box1"),
box2 = document.getElementById("box2"),
defaultColor = "pink",
popColor = "blue";
- 如果想通过js来设置样式的话，可以使用
cssText
cssText的写法相当于我们平时在写css行内样式的写法
如果需要同时添加多条属性，我们可以调用
cssText这个函数。
box2.style.cssText = "width: 300px;height: 400px;background-color: red;transition-duration: 2s;";
如果只需要添加某一条样式的话
box1.style.backgroundColor = "red";
网友评论