第三天
网页布局
网页头部
网页内容部分
网页尾部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米</title>
<link rel="stylesheet" type="text/css" href="./mi.css">
</head>
<body>
<!-- 头部开始 -->
<div class="header">
<div class="header-top">
<div class="center header-top-content"></div>
</div>
<div class="center nav"></div>
</div>
<!-- 头部结束 -->
<!-- 主体部分开始 -->
<div class="min">
<div class="center banner"></div>
<div class="center banner-item"></div>
</div>
<!-- min end -->
<!-- footer start -->
<div class="footer"></div>
<!-- end footer -->
</body>
</html>
*{margin:0;padding:0;list-style:none;}
a{
text-decoration:none;
}
/*清除浮动*/
.clearf:after{
content:'';
display:block;
clear:both;
}
/*居中的样式*/
.center{
width:1226px;
margin:0 auto;
}
/*================*/
/*header样式*/
.header{
min-width:1226px;
/*height:40px;*/
}
.header-top{
background-color:#000;
}
.header-top-content{
height:40px;
background:green;
}
.nav{
height:88px;
background:red;
margin-top:12px;
}
/*main*/
.banner{
height:460px;
background:blue;
}
.banner-item{
height:170px;
background:pink;
margin-top:15px;
}
JavaScript入门
Javascript简介
Javascript是一个客户端脚本语言
是运行在客户端 由浏览器内核来去解析
BOM 浏览器对象模型
DOM 文档对象模型
ECMAScript JS规范
Js特点
弱类型语言
解释型语言
基于对象
安全性高
兼容性问题
浏览器大战
Javascript的三种引入方式
1、行间事件 将js代码写入标签的行间
2、外链式
通过script标签的src属性引入外部的js文件
如果使用script引入外部js文件 那么此标签的js代码将不会在执行
3、内嵌式
通过script标签将js代码嵌入到html文档
<body>
<!-- 行间事件 -->
<button onclick="alert('来快活啊')">点我一下试试</button>
<a href="JavaScript:alert('好的我来了')">来吧</a>
<a href="JavaScript:;" onclick="alert('等我一起')">马上到</a>
<!-- 嵌入式
通过script标签将js代码嵌入到html文档中
-->
<script type="text/javascript">
alert('ok')
</script>
<!-- 外链式
通过script标签的src属性引入外部的js文件
如果使用script引入外部js 文件 那么此标签的js代码将不会在执行
-->
<script type="text/javascript" src="./js.js">
alert('我是啦啦啦啦啦')
</script>
<!-- 常用的js的输出方式 -->
<script type="text/javascript">
alert('将信息以弹窗的形式输出，会阻塞程序')
console.log('将信息输出到浏览器的控制台')
document.write('将信息输出到网页当中')
</script>
</body>
Javascript的输出方式
alert(‘将信息以弹窗的形式输出，会阻塞程序’)
console.log(‘将信息输出到浏览器的控制台’)
document.write(‘将信息输出到网页当中’)
Javascript的变量
使用关键字var 声明变量
变量命名规范：
1、由数字字母下划线组成
2、不能以数字开头
3、尽量要有意义
4、不能使用关键字
5、严格区分大小写
Javascript的基本数据类型
1、数值类型 数字 小数 NaN（not a number）
2、字符串 只要是使用引号引起来的都是字符串
3、布尔类型 true false
4、对象类型 var obj = {key:val,key:val}
数组： var arr = [1,2,3]
5、函数类型 function fun(形参){代码段}
6、未定义 undefined
检测数据类型的方法 typeof()
检测一个数据是否是由指定的系统实例构造而成 instanceof
注意： 基本数据类型必须使用new 实例化出来的结果才能检测成功
var num1 = new Number(123);
console.log(num1 instanceof Number)
<script type="text/javascript">
//数值类型 number
var num1=1;
var num2=1.2;
// 检测数据类型
var res=typeof(num1);
console.log(res)
// 字符串 string
var str1='123';
var str2="123"
var str3='我是你'
// 布尔值boolean
var bool=true;//false
console.log(bool,typeof(bool))
//对象类型 object
var obj={
name:'小孩',
age:18,
say:function(){
alert("大海");
}
}
var arr=[1,2,3]
console.log(obj,typeof(obj));
console.log(arr,typeof(arr));
console.log(null,typeof(null));
//函数类型function
var func=function(){
console.log("我是函数类型");
}
console.log(func,typeof(func));
// 未定义类型 undefined
var v=undefined;
var x;
console.log(v,typeof(v));
console.log(x);
//instanceof 检测是否是指定的 类 来实例出来的对象
//基本数据类型必须使用new 实例化出来的结果才能检测成功
console.log(arr instanceof Array);
var num1=new Number(123);
console.log(num1 instanceof Number);
</script>
数据类型转换
强制数据类转换 是人为的
数值类型的强制转换 Number()
1.将字符串类型转换成属值类型
(1)、Number() 只能转纯数字表示的字符串 否则直接返回NaN
(2)、parseInt() 整型 从前往后读，一直取到非数值表示的字符为止
如果第一字符就是非数字表示的字符 直接返回NaN
(3)、parseFloat() 和parseInt()一样 但是会检测第一个小数点
隐式数据类型转化 是程序自发的 程序人员无法干扰
<script type="text/javascript">
//将字符串 强制转换成数值
//Number 只要字符串中有一个非数字的字符 就返回NaN 不包含小数点 只能有一个小数点
var str1='123';//123
// var str1='123abc';//NaN
// var str1='123.1';//123.1
// var str1='123.1.1';//NaN
// var str1='a123';//NaN
var res=Number(str1);
console.log(res,typeof(res));
//parseInt()
//从前往后读，从第一个数字取到非数字为止；如果第一个字符是非数字表示的字符直接返回NaN
//parseFloat和parseInt 类似 只是会多检测一个小数点
console.log(parseInt(str1),typeof(parseInt(str1)));
console.log(parseFloat(str1),typeof(parseFloat(str1)));
//装换成布尔型为false 0 0.0 NaN '' null undefined
//Boolean()
var num1=0.0;
// var num1=0;
// var num1=NaN;
// var num1=''
// var num1=null
// var num1=undefined;
console.log(Boolean(num1));
</script>
常用运算符
算术运算 + - * / % ++ –
字符串运算 +
赋值运算符 = += -= *= %=
比较运算符 > < >= <= == != === 全等 !==
逻辑运算符 && || !
<script type="text/javascript">
// ++ --
// a+=1;//a=a+1
a++;//自增1
++a;
a--;//a=a-1 a-=1
--a;
console.log(res);
//===全等 不仅比较值 还要比较类型是否相等
</script>
分支和循环
<body>
<script type="text/javascript">
//单分支
//var age=8;
// if(age>18){
// alert('你已经陈年');
// }else{
// alert('你还未成年');
// }
// 多分支
var age='25';//会自动将字符串转化为数字
if(age<12){
console.log("你好");
}else if(age<18){
console.log("你超好")
}else if (age<40){
console.log("你老了")
}else{
console.log('下棋吧')
}
//switch case 当判断成功后 后面的条件不在判断直接执行，所以需要在后面加break
// 条件判断使用的是===
var num='1';//所以就算转换后值相等，但是类型不同所以执行default
switch(num){
case 1:
console.log('你刚出生');
break;
case 18:
console.log("成年了");
case 90:
console.log('快百岁了');
default:
console.log('你是神仙');
}
// 循环
while(num<=10){
console.log(num);
num++;
}
// for in 一般使用来遍历对象
// 当遍历对象时 临时变量变量拿到的是对象的属性
// 如果遍历的是数组 临时变量拿到的是索引值
var obj={name:'张三',age:18,gender:'男'};
for(i in obj){
console.log(obj[i]);
}
var arr=[1,2,3];
for(i in arr){
console.log(arr[i]);
}
// 单纯的for循环
var arr=[1,2,3,4]
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
// do while 不论循环条件是否成立 先执行一次然后再去判断是否循环
var a=0;
do{
console.log(a);
a++
}while(a>10);
</script>
</body>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
