引入方式
内嵌式
在head中通过对一对script标签定义脚本代码 （推荐在 head 中 写 script）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn1{
width: 150px;
height: 40px;
font-size: 24px;
font-family: '隶书';
background-color: yellow;
color:rgb(1151,8,8);
border:3px solid;
}
</style>
<!--
js 的引入方式
1. 内嵌式 在head中通过对一对script标签定义脚本代码
-->
<script>
/*
1. js 如何声明函数 function suprise(){}
2. 函数如何和点击鼠标的行为绑定到一起?
在按钮button中指定onclick(单机按钮后的行为)
ondblclick(双机按钮后的行为)
*/
function suprise(){
//弹窗提示
alert("hello 我是惊喜1")
}
</script>
</head>
<body>
<button class="btn1" onclick="suprise()">点我有惊喜</button>
</body>
</html>
通过外部文件引入
外部文件为 .js 文件，不需要 script 标签框住
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn1{
width: 150px;
height: 40px;
font-size: 24px;
font-family: '隶书';
background-color: yellow;
color:rgb(1151,8,8);
border:3px solid;
}
</style>
<!--
js 的引入方式
2. 引入外部脚本文件
-->
<!--方式2-->
<script src="button01.js"type="text/javascript"></script>
</head>
<body>
<button class="btn1" onclick="suprise()">点我有惊喜2</button>
</body>
</html>
变量
js是弱类型赋值（int 是强类型），但不代表赋的值没有类型
在js中 统一用 var （var a = 1;） 来赋值，通过值来觉得类型
循环结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 空格 用 " " 换行 用"<hr>"
// 简单来说就是用 html 的语法来改变显示结果
for(var i = 1; i <= 9; i++){
for(var j = 1; j <= i; j++){
document.write(i+"*"+j+"="+(i*j)+" ")
}
document.write("<hr>");
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var arr =["北京","上海"]
//普通for
document.write("<ul>");
for(var i = 0; i < 2; i++){
document.write("<li>"+arr[i]+"</li>");
}
document.write("</ul>");
//加强for 但与java不同的是， ":" -> "in"
// 并且 i 的值是下标，并不是arr[]
document.write("<ul>");
for(var i in arr){
document.write("<li>"+arr[i]+"</li>");
}
document.write("</ul>");
</script>
</head>
<body>
</body>
</html>
函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
函数声明的语法
1. function 函数名(){}
2. var 函数名=function(){}
和Java有如下几点不同
1.无访问修饰符
2.没有返回类型也没有void，需要返回值时直接ruturn即可
3.没有异常列表
4.调用方法时，实参和形参在数量上可以不一致
sum(1,2,3); a = 1,b = 2;
sum(1); a = 1, b = null; a + b = NaN;
5.函数也可以作为一个参数传递到另一个方法
*/
var sum = function(a,b){
return a + b;
}
var add = function(getsum) {
return getsum(20,30);
}
var result = add(sum);
document.write(result);
</script>
</head>
<body>
</body>
</html>
对象的初始化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 定义方法时需要提供 function 来进行标记
//第一种定义对象
var person = new Object();
//添加属性
person.name="张三";
person.age=10;
//添加方法 注意属性需要用 this 连接
person.eat=function(food){
document.write(this.age+"岁的"+this.name
+"正在吃"+food);
}
person.eat("汤粉");
//第二种定义对象 (属性名用双引号框起来,用" : " 进行赋值)
var person = {
"name" : "李四",
"age" : 10,
"eat":function(food){
document.write(this.age+"岁的"+this.name
+"正在吃"+food);
}
}
person.eat("火锅");
</script>
</head>
<body>
</body>
</html>
JSON的概念
在前端中，对于JSON的操作 （JS）
//通过 JSON.parse() 可以将 JSON指令转为对象
var person = JSON.parse(personStr);
//将对象转为JSON串
var personStr2 = JSON.stringify(person);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/* JSON的格式（字符串）
外面用单引号 里面的属性名一定要用双引号
为了好看换行，但实际操作需要写在一行内！！
var personStr = '{"属性名":"属性值",
"属性名":{},
"属性名":["",""],
"属性名":{}
"属性名":[{},{}]}'
字符串需要用""，数字不用
*/
//这是一个JSON字符串指令 不是对象
var personStr = '{"name":"张三","age":10,"dog":{"dname":"小花"},"loveSingers":["1","2","3"]}';
//通过 JSON.parse() 可以将 JSON指令转为对象
var person = JSON.parse(personStr);
console.log(person);
console.log(person.name);
console.log(person.dog.dname);
console.log(person.loveSingers[0]);
//将对象转为JSON串
var personStr2 = JSON.stringify(person);
</script>
</head>
<body>
</body>
</html>
在后端中，对于JSON的操作（JAVA）
需要导入jar包
public void testWriteJson() throws JsonProcessingException {
Dog dog = new Dog("小花");
Person person = new Person("张三",10,dog);
// 将Person对象转换为一个字符串
ObjectMapper objectMapper = new ObjectMapper();
String personStr =
objectMapper.writeValueAsString(person);
System.out.println(personStr);
}
public void testReadJson() throws JsonProcessingException {
String personStr = "{"name":"张三","age":10,"dog":{"name":"小花"}}";
// 将JSON语言转为person对象;
ObjectMapper objectMapper = new ObjectMapper();
Person person =
objectMapper.readValue(personStr, Person.class);
}
JS中的事件发生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*1 事件的绑定方式
1 通过元素的属性绑定
2 通过DOM编程动态绑定
注意事项：
1 一个事件可以同时绑定多个函数
2 一个元素可以同时绑定多个事件
2 常见的事件
1 鼠标事件 onclik ondbclick onmouseover onmousemove onmouseleave
2 键盘事件 onkeydown onkeyup
3 表单事件 onfocus onBlur onchange onsubmit onreset */
//鼠标事件 1-6
function fun1(){
console.log("单击了1");
}
function fun2(){
console.log("单击了2");
}
function fun3(){
console.log("双击了");
}
function fun4(){
console.log("鼠标悬停了");
}
function fun5(){
console.log("鼠标移动了");
}
function fun6(){
console.log("鼠标移开了");
}
//键盘事件 7-8
function fun7(){
console.log("键盘按下");
}
function fun8(){
console.log("键盘按键抬起");
}
//表单事件 9-
function fun9(){//在输入框中获得 小光标
console.log("获得焦点");
}
function fun10(){
console.log("失去焦点");
}
function fun11(value){
//需要框内元素发生改变后并且焦点失去才算是内容改变
console.log("内容改变为：" + value);
}
function fun12(){
/*
弹窗的三种方式
alert()信息提示框
prompt()信息输入框
confirm()信息确认框
*/
var flag = confirm("确认要提交表单吗");
if(!flag) event.preventDefault();
//阻止表单的提交 (不让表单进行跳转)
//event.preventDefault();
}
function fun13(){
alert("表单要重置了")
}
</script>
</head>
<body>
<form action="01js引入方式.html"method="post"
onsubmit="fun12()" onreset="fun13()">
用户名：<input type="text" name="username"
onfocus="fun9()" onblur="fun10()" onchange="fun11(this.value)"> <br>
登录账号:<input type="text" name="logoinname"> <br>
<input type="submit" value="注册">
<input type="reset" value="清空">
选择籍贯:
<select onchange="fun11(this.value)">
<option>北京</option>
<option>上海</option>
<option>江西</option>
</select>
</form>
<input
type="button"value="按钮"
onclick="fun1(),fun2()"
ondblclick="fun3()"
>
<br>
<img src="1.jpg" width="1447px"height="1080px"
onmouseover="fun4()"
onmousemove="fun5()" onmouseleave="fun6()">
<br>
键盘操作:<input type="text" onkeydown="fun7()" onkeyup="fun8()">
</body>
</html>
JS 中的BOM编程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/* window
三种弹窗方式
alert prompt confirm
定时任务
window.setTimeout(funtion(){
},2000) //(2000ms)
history
forward 下一页 ->
back 上一页 <-
go(数字) 正数代表向前，负数代表向后
location
location.href="";
sessionStorage 用于存储一些会话级数据（浏览器关闭数据清除）
localStorage 用于存储一些持久级数据（浏览器关闭数据不清除)
*/
//history
function fun1(){
history.forward();
}
function fun2(){
history.back();
}
//location
function fun3(){ // 修改当前地址栏的 URL
location.href="https://www.baidu.com";
}
//存储数据 sessionStorage localStorage 通过键值对进行操作
function fun4(){
sessionStorage.setItem("keya","ValueA");
//localStorage.setItem("keya","ValueA");
}
function fun5(){ //读取数据
console.log(sessionStorage.getItem("keya"));
}
function fun6(){ //清空数据
sessionStorage.removeItem("keya");
}
</script>
</head>
<body>
<button onclick="fun1()">上一页</button>
<button onclick="fun2()">下一页</button>
<a href="https://www.baidu.com">百度</a>
<button onclick="fun3()">百度</button>
<button onclick="fun4()">存储数据</button>
<button onclick="fun5()">读取数据</button>
<button onclick="fun6()">清空数据</button>
</body>
</html>
JS 中的DOM编程
DOM(Document Object Model)编程就是使用document对象的API完成对网页HTML文档进行动态修改。已实现网页数据和样式动态变化效果的编程。
DOM动态更改的代码并不会对于源代码进行更改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/* 1 获得document dom树
window.document
2 从document中获取要操作的元素
1. 直接获取
2. 间接获取 */
//直接获取方法 1-4
function fun1(){
//1 获得document
//2 通过document获得元素
// 通过id值获取页面上唯一的一个元素
var el1 = document.getElementById("username");
console.log(el1);
}
function fun2(){
// 根据标签名获得多个元素
var els = document.getElementsByTagName("input");
for(var i = 0; i < els.length;i++){
console.log(els[i]);
}
}
function fun3(){
// 根据name属性值来获取多个元素
var els = document.getElementsByName("aaa");
for(var i = 0; i < els.length;i++){
console.log(els[i]);
}
}
function fun4(){
// 根据class属性值来获取多个元素
var els = document.getElementsByClassName("a");
for(var i = 0; i < els.length;i++){
console.log(els[i]);
}
}
//间接获取方法 5-
function fun5(){
// 根据父元素获取子元素
// 先获取父元素
var div01 = document.getElementById("div01");
//根据父元素获取子元素
// var els1 = div01.children 获取全部子元素
// var els2 = div01.firstElementChild 获取第一个子元素
// var els3 = div01.lastElementChild 获取最后一个子元素
}
function fun6(){
// 根据子元素获取父元素
// 先获取子元素
var child = document.getElementById("password");
//根据子元素获取父元素
console.log(child.parentElement);
}
function fun7(){
// 通过当前元素获取兄弟元素（同级别的前一个为兄，后为弟）
var el = document.getElementById("password");
//根据子元素获取父元素
console.log(el.previousElementSibling);//获取同级别的前一个
console.log(el.nextElementSibling);//获取同级别的后一个
}
</script>
</head>
<body>
<div id="div01">
<input type="text" class="a"id="username" name="aaa"/>
<input type="text" class="b"id="password" name="aaa"/>
<input type="text" class="a"id="email"/>
<input type="text" class="b"id="address"/>
</div>
<br>
直接获取按钮：
<input type="button" value="根据id获取指定元素" onclick="fun1()"id="btn01"/>
<input type="button" value="根据标签名获得多个元素" onclick="fun2()"id="btn02"/>
<input type="button" value="根据name属性值来获取多个元素" onclick="fun3()"id="btn03"/>
<input type="button" value="根据class属性值来获取多个元素" onclick="fun4()"id="btn04"/>
<br>
间接获取按钮：
<input type="button" value="根据父元素获取子元素" onclick="fun5()"id="btn05"/>
<input type="button" value="根据子元素获取父元素" onclick="fun6()"id="btn06"/>
<input type="button" value="通过当前元素获取兄弟元素" onclick="fun7()"id="btn07"/>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/* 3 对元素进行操作
1. 操作元素的属性
2. 操作元素的样式
3. 操作元素的文本 */
//1. 操作元素的属性 语法： 元素.属性名="";
function fun1(){
var id1 = document.getElementById("id1");
id1.type="button";
id.value="hi";
}
//2. 操作元素的样式 语法： 元素.style.样式名="";
function fun2(){
var id1 = document.getElementById("id1");
id1.style.color="green";
//更改样式时需要注意！！ border-radius 需要转换为驼峰式 borderRadius
id1.style.borderRadius="10px";
}
//3. 操作文本
/* 语法：区别：Text不能识别html语句，但HTML可以识别
元素.innerText="" 只识别文本
元素.innerHTML="" 同时可以识别html语句 */
function fun3(){
var id2 = document.getElementById("id2");
id2.innerText="好你";
id2.innerHTML="<h1>好你</h1>"
}
</script>
<style>
#id1{
color: red;
border-radius: 5px;
}
</style>
</head>
<body>
<input id="id1" type="text" value="hello">
<br>
<div id="id2">
你好
</div>
<br>
<button onclick="fun1()">操作属性</button>
<button onclick="fun2()">操作样式</button>
<button onclick="fun3()">操作文本</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*3 对元素进行操作
4. 增删元素
var csli = document.createElement("li") 创建元素
增加
1.父元素.appendChild(子元素) 在父元素中追加子元素
2.父元素.insertBefore(新元素,参照元素); 添加到参照元素之前
替换
父元素.replaceChild(新元素,被替换元素);
删除
元素.remove(); */
//增加1-2
//功能： 为UL中的子标签中添加一个 <li id="cs">长沙</li>
function fun1(){
//创建一个新的元素
var csli = document.createElement("li")//<li></li>
//设置子元素的属性和文本
csli.id="cs";csli.innerText="长沙";
//获取父元素
var cityul = document.getElementById("city");
//将元素放入父元素中 （放在最后）
cityul.appendChild(csli);
}
// 指定在某个元素前插入
function fun2(){
var csli = document.createElement("li")//<li></li>
csli.id="cs";csli.innerText="长沙";
var cityul = document.getElementById("city");
var cl = document.getElementById("sh");
//放在 cl 元素之前
cityul.insertBefore(csli,cl);
}
//替换3
function fun3(){
var csli = document.createElement("li")//<li></li>
csli.id="cs";csli.innerText="长沙";
var cityul = document.getElementById("city");
var cl = document.getElementById("sh");
cityul.replaceChild(csli,cl);
}
//删除4-5
function fun4(){
var cl = document.getElementById("sh");
cl.remove();
}
function fun5(){
var city = document.getElementById("city");
//方法一:
var fc = city.firstChild;
while(fc!=null){
fc.remove();
fc = city.firstChild;
}
//方法二
city.innerHTML="";
//方法三
city.remove(); //注意：这个方法与上面两个方法有所不同，
//因为这个删除相当于把<ul></ul>也给删除了
//而上面两种方法只是把<li></li>删除了
}
</script>
</head>
<body>
<ul id="city">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li id="gz">广州</li>
<li id="js">江西</li>
</ul>
<button onclick="fun1()">在城市列表最后增加子元素</button><br>
<button onclick="fun2()">指定在某个元素前插入</button><br>
<button onclick="fun3()">替换指定元素</button><br>
<button onclick="fun4()">删除指定元素</button><br>
</body>
</html>
