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>
