前端HTML+JS
Js (Java Script):解释器语言，脚本语言，没有编译过程与Java语言无关，必须进入html页面里面执行，建一个.html文件,可以加在标签里
回调属性：以on开头或者以in开头：
<div on style="height: 100px; width: 100px;background-color: aqua;">div>
触发之前预先设置好的动作
onclick:点击后会出现的操作
点击后警告1：
<div onclink="alther("1")" style="height: 100px; width: 100px;
background-color: aqua;">div>
js语言写在JavaScript：
<body>
<div style="height: 100px; width: 100px;background-color: aqua;">div>
<script>script>
body>
script标签可以放在任何地方，他也是一个盒子：
<script>
alert('1');//阻塞式的操作,打开网页警告1
script>
<script>
window.document.write("")//写入，坠在当前文档流的最后，尽量不用
script>
向控制台输出日志，可以将内容打印到控制台：
优点：1、不影响控制布局2、不阻塞界面加载
不需要中断过程时用
<script>
console.log('shgdsvsdy');
script>
var：
用于声明变量，并可选地将其初始化为一个值；语法格式“var varname [=value];”，参数value可以是任何合法的表达式，默认值为“undefined”。
<script>
var a = 3;
a = 'abc';
a = [];
a = {};
a = 3.14;
script>
var没有类型，值是什么类型他就是什么类型
也可以用for和while与java使用方法相同：
<script>
var a = 3;
for(var i = 0; i<Thing.length;i++){
Thing.length = 10;
}
script>
<script>
var a = 3;
while(a < 10){
console.log(a++);
}
script>
var arr = [];//数组大小可变
<script>
// alert('1');//阻塞式的操作
// window.document.write("")//写入，坠在当前文档流的最后，尽量不用
// console.log('shgdsvsdy');
var a = 3;
var arr = [];
arr.push(true);
arr.push("guo");
arr.push(123);
arr.push([124,456,888,"false",false]);
console.log(arr);
script>
对象名叫 JSO即JavaScriptObject
变量名叫var
以k-v形式执行
<script>
var obj = {
age : 13,
gender : "男",
name : "哈哈哈"
};
console.log(obj);
script>
定义一个方法（function）：
不需要写返回值类型
最小原型js方法：
不需要写属性
function test(a,b){
}
传值是必须有触发
function test(a,b){
}
test();//触发
没有规定的返回值属性，return什么类型他就输出什么类型这样可以省略声明属性
也可以省略方法名
<body>
<div onclick = "method(10,5)" style="height: 100px; width: 100px;background-color: aqua;">div>
<script>
function test(a,b){
console.log(a + b);
return true;
}
var method = function(a,b){
console.log(a*b);
return true;
}
script>
body>
js对象导航：JSON:接到一个对象然后就用
<body>
<div onclick = "obj.foo("sdvdbhj")" style="height: 100px; width: 100px;background-color: aqua;">div>
<script>
var obj = {
age : 13,
gender : "男",
name : "哈哈哈",
foo : function(a){
alert(a);
},//设置一个foo对象此时foo属性的值是一个方法
};
// console.log(obj);
function test(a,b){
console.log(a + b);
return true;
}
script>
body>
写一个练习，做一个按钮点三次一下没反应，点三次以上输出点击次数，点几次输出数字就是几：
<body>
<div style="height: 100px; width: 100px;background-color: aqua;">div>
<input type="button" value="test" onclick="foo()"/>
<script>
var a = 1;
function foo(){
if(a <= 3){
}else{
alert(a);
}
a++;
}
script>
body>
文档流的模型就是树形模型
document：
取数据：
.html:
<script>
var containner = document.getElementById("content")
console.log(containner);
//console.log(containner.style);查询出css的层级样式表
console.log(containner.getAttribute("style"))
//变成字符串
containner.setAttribute("style", "background-color : red ");
//改变属性将style属性改为background-color
containner.setAttribute("class" ,"second");
//通过改变class类来切换数据
script>
.css：
/* #content{
height: 100px;
width: 100px;
background-color: aqua;
} */
.first{
height: 100px;
width: 100px;
background-color: red;
}
.second{
height: 100px;
width: 100px;
background-color: blue;
}
给现在的节点里面创造一个新节点不删除原有内容
.js:
var containner = document.getElementById("content");
console.log(containner);
console.log(containner.getAttribute("style"));
containner.setAttribute("class" ,"second");
// console.log(containner.innerHTML);
// containner.innerHTML = "<div> bhasvjdsv div>";//不能跨行写输出bhasvjdsv
containner.innerText = "<div> bhasvjdsv div>";//""全部输出
var temp = document.createElement("span");
temp.setAttribute("style","color : yellow");
temp.innerText = "仍会仍您看";
containner.append(temp);//将数据串联
.html:
<body>
<div id="content" class="first">
<span style="color: black;">苏打水是案发报辅导班功能概span>
div>
body>
<script src="../js/jstest.js">
script>
.html:
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<link rel="stylesheet" href="../css/Main.css"/>
<link rel="stylesheet" href="../css/jstest.css"/>
head>
<body>
<div id="content" class="first">
<span style="color: black;">苏打水是案发报辅导班功能概span>
div>
<input type="button" value="test" onclick="foo()"/>
<script>
// alert('1');//阻塞式的操作
// window.document.write("")//写入，坠在当前文档流的最后，尽量不用
// console.log('shgdsvsdy');
// var a = 3;
// var arr = [];
// arr.push(true);
// arr.push("guo");
// arr.push(123);
// arr.push([124,456,888,"false",false]);
// // console.log(arr);
// var obj = {
// age : 13,
// gender : "男",
// name : "哈哈哈",
// foo : function(a){
// alert(a);
// },//设置一个foo对象此时foo属性的值是一个方法//3
// };
// // console.log(obj.age);
// var str = "Hello HTML World";
// function test(a,b){
// console.log(a + b);
// return true;
// }//1
// var method = function(a,b){
// console.log(a*b);
// return true;
// }//2
// var a = 1;
// function foo(){
// if(a <= 3){
// }else{
// alert(a);
// }
// a++;
// }
script>
body>
body>
<script src="../js/jstest.js">
script>
html>
.css:
/* #content{
height: 100px;
width: 100px;
background-color: aqua;
} */
.first{
height: 100px;
width: 100px;
background-color: red;
}
.second{
height: 100px;
width: 100px;
background-color: blue;
}
鼠标悬停在哪里弹出来一个颜色块，不悬停不出来
.html:
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<link rel="stylesheet" href="../css/Main.css"/>
<link rel="stylesheet" href="../css/jstest.css"/>
head>
<body>
<div id="content" class="first" style="float: left;" onmouseenter="foo()" onmouseout="test()">
<span style="color: black;">苏打水是案发报辅导班功能概span>
div>
<div id="nextcontent"class="first" style="float : left;background-color: red; display:block;">div>
body>
<script src="../js/jstest.js">script>
html>
.js:
function foo(){
// console.log("nihao")
var next = document.getElementById("nextcontent");
next.setAttribute("style","float : left;background-color: red; display:block;")
}
function test(){
var next = document.getElementById("nextcontent");
next.setAttribute("style","float : left;background-color: red; display:none;")
}
自动跳转：
在.js中写入：
window.open("http://www.baidu.com");//bom浏览器选项
设置一个开关按钮点击跳转网页：
.html:
<body>
<div id="content" class="first" style="float: left;" onmouseenter="foo()" onmouseout="test()">
<span style="color: black;">苏打水是案发报辅导班功能概span>
div>
<div id="nextContent"class="first" style="float : left;background-color: red; display:block;">div>
body>
<input type="button" value="打开" onclick="tempopen()"/>
body>
<script src="../js/jstest.js">script>
.js:
function tempopen(){
window.open("http://www.baidu.com");
//window.close();
}
将这个页面的东西传到另一个页面(参数传递)：
方法一from：
.js:
console.log(window.location.href);
var t = window.location.href;
var params = t.split("?")[1];
params = params.split("&");
for(var i = 0; i , params.length;i++){
var key = params[i].split("=")[0];
var value = params[i].split("=")[1];
console.log(key + ":" + value);
}
.html:
<body>
<a href="jstest.html?name = myy & password=123456">走你a>
body>
点击走你：
正常跳转
方法二to:
IPC进程间通讯
在同一个域里面的页面都是相通的共享的
cookie：用于与后台传输数据
传输一from：
from.html:
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<button onclick="setCookie()">走你~button>
body>
<script>
function setCookie(){
console.log(document.cookie);//拿内容
document.cookie = "user=hahaha";//加入数据，特殊字符只能一个一个的加
document.cookie = "pass=888";//不会覆盖，会在后面加入
}
script>
html>
传输二to：
to.html:
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
body>
<script>
var sto = window.localStorage;
console.log(sto.getItem("name"));
script>
html>
from.html:
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<button onclick="setLs()">走你~button>
body>
<script>
function setCookie(){
console.log(document.cookie);//拿内容
document.cookie = "user=hahaha";//加入数据，特殊字符只能一个一个的加
document.cookie = "pass=888";//不会覆盖，会在后面加入
}
function setLs(){
// console.log(window.localStorage);
var sto = window.localStorage;
sto.setItem("name","hahah");
}
script>
html>