day16 web前端之JavaScript

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

页面布局补充

样例页面：

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.left{
float: left;
}
.right{
float:right;
}
.pg-header{
height: 48px;
background-color: #2459a2;
}
.pg-body .pg-menu{
width:10%;
height: 1000px;;
background-color: antiquewhite;
position: absolute;
top: 48px;;
left:0;
/*bottom:0;*/
}
.pg-body .pg-content{
width:90%;
position: absolute;
top: 48px;
right:0;
bottom:0;
overflow: auto;
background-color: #3300cc;
z-index: 9;
}
.pg-header .logo {
color: black;
text-align: center;
width:10%;;
line-height: 48px;
background-color: wheat;
}
.pg-header .userinfo img{
border-radius: 50%;
}
.pg-header .userinfo{
border:1px solid red;
margin-top: 4px;
width: 140px;
}
.pg-header .userinfo .infolist {
display: none;
}
.pg-header .userinfo:hover .infolist{
display: block;
color: red;
}
.pg-header .userinfo .infolist{
position: absolute;
background-color: #009933;
top: 43px;
right: 36px;
}
.pg-header .userinfo .infolist a{
position: relative;
display: block;
color: white;
width: 140px;
text-align: center;
} </style>
</head>
<body>
<div class="pg-header"> <div class="logo left">
<span>welcome</span>
</div> <div class="userinfo right" style="position: relative;">
<a href=""><img src="1.png" alt="" width="42" height="40" ></a>
<div class="infolist" style="position: absolute;top: 43px;right:20px;z-index:10">
<a>我的信息</a>
<a>登陆</a>
</div>
</div>
</div>
<div class="pg-body">
<div class="pg-menu">
这是侧边栏
</div>
<div class="pg-content">
<p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>
<p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>
<p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>
<p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>
<p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>
<p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>
<p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>
<p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>
<p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>
<p>这是内容</p> <p>这是内容</p> <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>
</div>
</div>
</body>
</html>

JavaScript介绍

JavaScript诞生缘由

1. 网景公司(安德森)94年发布了第一款比较成熟的浏览器，但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。

2. 95年5月，网景公司做出决策，未来的网页脚本语言，必须"看上去与Java足够相似"，但是比Java简单

3. Brendan Eich 34 years old schema语言

4. 10天创造出了JavaScript，两种语言风格的混合产物----（简化的）函数式编程+（简化的）面向对象编程

5. JavaScript 的官方名称是 “ECMAScript”。

JavaScript介绍：

什么是javascript及其能做什么？

1.JavaScript 被设计用来向 HTML 页面添加交互行为。
2.JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
3.JavaScript 由数行可执行计算机代码组成。
4.JavaScript 通常被直接嵌入HTML 页面。
5.JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。

JavaScript书写方式

第一种书写方式：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{}
</style>

<script>
//alert("hello world");

console.log("hello world")

</script>
</head>
<body>
</body>
</html>

基于先加载页面再加载js的过程来实现友好展示页面

第二种书写方式：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{}
</style>
</head>
<body>
<div>dbnbdasnbndabnsbna</div>
<h1>dsadasdakds</h1>
<div>dasd</div>
<div>dasd</div>
<div>dasd</div>
<div>dasd</div>
</body>

<script src="a.js"></script>
</html>

注释：
- 单行注释

// 我是单行注释

多行注释

/*内容*/ 我是多行注释

变量：

var 声明变量

var name=”assaa ” #局部变量

name = “ssdas” #全局变量

命名规则：
- 严格区分大小写
- 不能以数字开头
- 余下的可以是其他符号

数据类型：
- 数字

var num=10
var num2=10.
var num3=.1

parseInt ( )
函数可解析一个字符串，并返回一个整数。如果中间遇到不合法的字符，马上停止剖析，返回已经剖析过的数值。
如果开始就遇到不合法的字符，返回NaN。

例：

parseInt(“23”)值为23
parseInt(“23xyz”)值为23
parseInt(“xyz23”)值为NaN

parseFloat ( )
剖析参数字符串并返回浮点数。如果遇到不合法的字符串，马上停止剖析，返回已经剖析过的数值。用法类似于paraseInt

字符串

创建方式：

① 变量 = “字符串”
② 字串对象名称 = new String (字符串)

常见的方法：

跑马灯效果实例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="wel">
欢迎光临
</div>
</body>
<script>
function test(){
var mywel = document.getElementById('wel');
var content = mywel.innerText;
var f_content = content.charAt(0);
var l_content = content.substring(1,content.length);
var new_content = l_content+f_content;
mywel.innerText = new_content;
}
// 执行函数
setInterval("test()",1000)
</script>
</html>

第二种实现形式：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<marquee behavior="" direction="">我爱北京天安门</marquee>
</head>
<body>
</body>
</html>

列表

循环：
- 第一种循环方式：

for(var i=0;i<arr.length;i=i+1){
console.log('dadsa')
}

第二种循环方式：循环字典列表等形式的数据类型

for(var i in arr){
console.log(i + '----' + arr[i])
}

字典（json）

var dict={“name”:”hello”,“age”:“12”}

元组
集合
bool
对象
运算符

算术运算符：
    +   -    *    /     %       ++        --
比较运算符：
    >   >=   <    <=    !=    ==    ===   !==
逻辑运算符：
     &&   ||   ！
赋值运算符：
    = +=   -= *=   /=
字符串运算符：
    + 连接，两边操作数有一个或两个是字符串就做连接运算

流程控制：
- 顺序结构：代码按行执行
- 分支结构：单分支；双分支；多分支

switch。。。。case案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body></body>
<script>
var num = 66;
switch (num) {
case 66:
console.log("快了。。")
break
case 73:
console.log("挂了")
break
case 84:
console.log("真死了")
break
}
</script>

循环结构

do … while:先干一次再说

函数：js的三种书写方式

1：function test(){
console.log('sdadsadsa');
}
2：var func= function(){
console.log('sasassa');
}
3：(function() {
console.log('sdasda');
})() #直接运行

前两种方式都需要后期调用才能执行

系统函数:

eval()是python中的exec和eval的合集,可以编译代码也可以获取返回值
eval("x=7;y=90;console.log(x+y)")

序列化:
- JSON.stringify(obj) 序列化
- JSON.parase(obj) 反序列化
转义：
- decodeURI() URI中未转义的字符
- decodeURIComponent（） URI组件中的未转义字符
- encodeURI（）转义URI中的字符
- encodeURIComponent（）转义URI组件中的字符
- URIError（）由编码和解码跑出的错误
js的事件对象：

时钟案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#clock{
color: #3300cc;
font-size: 30px;
}
</style>
</head>
<body>
<div id="clock"></div>
</body>
<script>
function clock() {
var mydate=new Date()
// console.log(mydate)
var myyear = mydate.getFullYear()
var mymonth = mydate.getMonth()
var myday = mydate.getDate() var myhour = mydate.getHours()
var myminute = mydate.getMinutes()
var mysec = mydate.getSeconds() var res = myyear + "-" + mymonth + "-" + myday + " " + myhour + ':'+myminute+":" + mysec
console.log(res)
var myclock = document.getElementById("clock")
myclock.innerText=res
}
setInterval("clock()",1000)
</script>
</html>

JavaScript之DOM操作

什么是HTML DOM？

1.HTML Document Object Model（文档对象模型）

2.HTML DOM 定义了访问和操作HTML文档的标准方法

3.HTML DOM 把 HTML 文档呈现为带有元素、属性和文本

的树结构（节点树）

Javascript之DOM操作：

获取元素节点：

1.直接查找：或得到的元素都是数组，可以通过数组的提供的方法进行相应的操作

document.getElementById(“idname”)
document.getElementsByTagName(“tagname”)
document.getElementsByName(“name”)
document.getElementsByClassName(“name”)

2.间接查找

parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素

表格案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="selectAll()">
<input type="button" value="反选" onclick="ReverseAll()">
<input type="button" value="取消" onclick="cancelAll()">

<table border="1">
<thead>
<tr>
<th>操作</th>
<th>ip</th>
<th>端口</th>
</tr>
</thead>
<tbody id="info">
<tr>
<td><input type="checkbox"/></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</body>
<script>
function selectAll(){
var myTbody = document.getElementById('info')
// console.log(myTbody)
var myTrs = myTbody.children
// console.log(myTrs)
for(var i=0; i< myTrs.length;i++){
var myInput = myTrs[i].children[0].children[0]
myInput.checked=true
}
}
function cancelAll() {
var myTbody = document.getElementById('info')
// console.log(myTbody)
var myTrs = myTbody.children
// console.log(myTrs)
for(var i=0; i< myTrs.length;i++){
var myInput = myTrs[i].children[0].children[0]
myInput.checked=false
}
}
function ReverseAll() {
var myTbody = document.getElementById('info')
// console.log(myTbody)
var myTrs = myTbody.children
// console.log(myTrs)
for(var i=0; i< myTrs.length;i++){
var myInput = myTrs[i].children[0].children[0]
if(myInput.checked){
myInput.checked=false
}else{
myInput.checked=true
}
}
}
</script>
</html>

执行效果：

属性节点的操作：

对节点的类进行操作：

tag.className => 直接整体做操作
tag.classList.add('样式名') 添加指定样式
tag.classList.remove('样式名') 删除指定样式

模态框实例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:darkgrey;
opacity: 0.6;
}
.info{
width: 400px;
height:400px;
position: fixed;
top: 50px;
left:400px;
right:400px;
background-color: white; }
.hide{
display: none;
}
.show{
display: block;
}
</style>
</head>
<body>
<div>
<input type="button" value="点击" onclick="showModel()">
</div>

<div class="one hide"></div>
<div class="info hide">
<p>
<input type="text"><p></p>
<input type="text"><p></p>
<input type="button" value="取消" onclick="cancel()">
<input type="button" value="确定">
</p>
</div>
</body>
<script>
function showModel(){
var myone=document.getElementsByClassName("one")[0]
var info=document.getElementsByClassName("info")[0]
// console.log(myone)
myone.classList.remove('hide')
info.classList.remove('hide')
}
function cancel(){
var myone=document.getElementsByClassName("one")[0]
var info=document.getElementsByClassName("info")[0]
myone.classList.add('hide')
info.classList.add('hide')
}
</script>
</html>

获取文本节点的值：

innerText innerHtml
value获取当前选中的value值
1.input value获取当前标签中的值
2.select （selectedIndex）
3.textarea
innerHTML 给节点添加html代码：
该方法不是w3c的标准，但是主流浏览器支持
tag.innerHTML = “<p>要显示内容</p>”;

案例：输入框搜索关键字(focus, blur)

使用js操作css属性的写法是有一定的规律：

1、对于没有中划线的css属性一般直接使用style.属性名即可。如：

obj.style.margin，obj.style.width，obj.style.left，obj.style.position等

2、对于含有中划线的css属性，将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。如：

obj.style.marginTop，obj.style.borderLeftWidth，obj.style.zIndex，obj.style.fontFamily等。

创建节点实例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="myinput"> </div></body>
<script>
var myinput = document.getElementById('myinput')
// var tag = "<input type='text'>"
// myinput.insertAdjacentHTML('before',tag)
var myipt = document.createElement("input")
myipt.setAttribute("type","button")
myipt.setAttribute("value","点击")
myinput.appendChild(myipt)</script>
</html>