day3 前端JavaScript（交互）（2022-02-23
2022-02-23 本文已影响0人
胖胖胖虎
JavaScript 基础语法
动态脚本语言：负责前端界面交互
过程
- 前端事件是设置以on开头的标记中的属性
- 执行的js函数是以on开头的标记的属性值
- js函数代表一段动态变化的js代码
- js函数分为内部函数和自定义函数
1.内部函数是js语言已经提供好的函数，可以直接通过名字使用
2.自定义函数是我们需要自己完成代码的编写，它可以实现我们需要的个性化的变化
js代码编写方式
- 嵌入编写 将js代码编写在html代码文件中，需要编写在script（脚本）标记中，script标记可以出现在html任意位置，建议写在body标记后面
- 外部编写 单独写在js文件中 html需要通过script引入js文件
- 自定义函数的语法
function 函数名（）{
函数代码
}
嵌入式编写范例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 先给h1标记设置id属性 -->
<h1 id="a1">点我变色</h1>
<button onclick="alert('点我了')">点我</button>
<button onclick="window.close()">不点我</button>
<button onclick=f()>我</button>
</body>
<script type="text/javascript">
//js注释
//自定义函数
function f(){
//1.找到h1标记
//2.修改h1标记内容的颜色
document.getElementById('a1').style.color='blue'
//document 所有标记的总和
// . 里面的
//getElementById 内部函数 通过标记的id属性值找到一个标记
//style 标记的样式
//color 具体的样式属性
//= 在js中是赋值的含义
}
</script>
</html>
外部编写范例
- 外部编写js.js
function f1(){
document.getElementById('a4').style.color='orange'
}
function f2(){
document.getElementById('a4').style.fontSize='100px'
}
function f3(){
document.getElementById('a4').style.textAlign='center'
}
- js外部使用.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入外部js文件 -->
<script src="外部js.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1 id="a4">变化多端</h1>
<button onclick=f1()>变色</button>
<button onclick=f2()>变大</button>
<button onclick=f3()>居中</button>
<button onclick=f1();f2();f3()>全都有</button>
</body>
</html>
