网页布局 javascript简介三种引入方式变量基本数据类型数据类型转换常用运算符流程控制循环结构

最新推荐文章于 2020-08-01 13:25:34 发布

missing walker

最新推荐文章于 2020-08-01 13:25:34 发布

阅读量242

点赞数

本文链接：https://blog.csdn.net/langdei/article/details/99660265

版权

1.网页布局

网页头部 Header
网页内容部分 min
网页尾部 Footer

布局结构范例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>布局结构</title>
	<link rel="stylesheet" href="./mi.css">
</head>
<body>
	<!-- 头部开始 -->
	<header class="header">
		<div class="header-top">
			<div class ="center header-top-content"></div>
		</div>
		<div class="center nav"></div>
	</header>
	<!-- 头部结束 -->



	<!-- 主体部分开始 -->
	<section class="min">
		<div class="center banner"></div>
		<div class=" center banner-item"></div>

		
	</section>
	<!-- minend -->


	<!-- foooter start -->
	<div class="footer"></div>
	<!-- endfooter -->
</body>
</html>

Html5新增的语义化标签

语义化标签可以让页面的结构更清晰，主要是给搜索引擎来去使用
一般低版本浏览器不支持目前应用最多的是在移动端
常用结构化标签

Header 头部
Nav 导航条
Articel 独立完整内容块（例如一篇文章）
Section 章节，页眉页脚等
aside 非正文内容
Footer 尾部
常用属性
阴影效果 关键字box-shadow
水平偏移位置垂直偏移位置模糊程度扩散范围阴影的颜色 inset内阴影分别对应下列代码中的数值或属性
```
box-shadow:3px 3px 10px 10px gold inset; 
```

过度动画： css属性值的起始值和结束值之间的平滑过渡效果关键字：transition

box-shadow:3px 3px 10px 10px gold inset; 3秒钟慢慢过渡到想要达到的效果

transition-property         指定css属性的name，transition效果
transition-duration         transition效果需要指定多少毫秒或秒才能完成
transition-timing-function         指定 transition效果的转数曲线
transition-delay         定义transition效果开始的时候

旋转旋转多少度（deg）

		transform: rotate(150deg);

位移

		transform: translate(100px,100px);

缩放缩小多少倍

		transform: scale(3);

2.Javascript简介

Javascript是一个客户端脚本语言
是运行在客户端 由浏览器内核来去解析
BOM 浏览器对象模型
DOM 文档对象模型
ECMAScript   JS规范

3.Js特点

弱类型语言
解释型语言
基于对象
安全性高
兼容性问题

4.Javascript的三种引入方式

行间事件： 将js代码写入标签的行间

<button onclick="alert('出来')">点我试一试</button>

外链式：
通过script标签的src属性引入外部的js文件；如果使用script引入外部js文件；那么此标签的js代码将不会再执行

<script src="./1.js">
 		alert('我是啦啦啦啦');  不会执行此代码
 </script>

内嵌式： 通过script标签将js代码嵌入到html文档

<script>
	alert('ok');
</script>

5.Javascript的输出方式

alert('将信息以弹窗的形式输出，会阻塞程序的执行');
console.log('将信息输出到浏览器的控制台');
document.write('将信息输出到网页当中');

6.Javascript的变量

使用关键字var 声明变量
变量命名规范：

由数字字母下划线$组成,不能以数字开头
驼峰命名法
尽量要有意义
不能使用关键字和保留字
严格区分大小写
尽量使用英文单词命名，不要使用拼音

7.Javascript的基本数据类型

数值类型 number

数字小数 NaN（not a number）

字符串 string

只要是使用引号引起来的都是字符串

布尔类型 boolean

true false
对象类型 object

var obj = {key:val,key:val}

其中还有
数组： var arr = [1,2,3]
null 空

函数类型 function

function fun(形参){代码段}

未定义 undefined

检测数据类型的方法 typeof()

检测一个数据是否是由指定的系统实例构造而成 instanceof

注意： 基本数据类型必须使用new 实例化出来的结果才能检测成功

var num1 = new Number(123);
console.log(num1 instanceof Number);

8.数据类型转换

1. 强制数据类转换是人为的

数值类型的强制转换 以转换成Number()为例

将字符串类型转换成属值类型

注意： Number() 只能转纯数字表示的字符串否则直接返回NaN

转换成布尔类型为false的有 0 0.0 NaN ‘’ null undefined

2.隐式数据类型转化 是程序自发的程序人员无法干扰
parseInt() 整型 从前往后读，一直取到非数值表示的字符为止
如果第一字符就是非数字表示的字符直接返回NaN

parseFloat() 和parseInt()一样但是会检测第一个小数点

9.常用运算符

算术运算 + - * / % ++ –

字符串运算 +

赋值运算符 = += -= *= %=

比较运算符 > < >= <= == != ===全等 !==

逻辑运算符 &&（and） ||（or） !（not）

注意：
==代表值相等，而===代表值和类型都相等

10.流程控制

单分支

If(条件){}
双分支

If(条件){}else if(条件){}
多分支
If(条件){}else if(条件){}else if(条件){}else if(条件){}else{}

switch case 当判断成功后后面的条件不在判断直接执行

条件判断使用的是===，每一种case就相当于===绝对比较，数据类型需要相同

11.循环结构

While
设置初始值
while(循环条件){
代码块
累加操作
}
```
var num = 0;
while(num<=10){
	console.log(num);
	num++;
}
```
For in
for in 一般使用来遍历对象
// 当遍历对象时临时变量拿到的是对象的属性，（就是key）
```
var obj = {name:'澳龙',age:16,gender:'男'}
	for(i in obj){
		console.log(obj[i]);
	}
```

在这里插入图片描述
// 如果遍历的是数组临时变量拿到的是索引值

var arr = ['鲁智深','小龙女','郭靖'];
	for(i in arr){
		console.log(arr[i]);
	}

在这里插入图片描述
3. For
for(设置初始值；循环条件；累加操作){
代码块
}

for(var i=0;i<arr.length;i++){
		// if(i==0){
		// 	// continue;
		// 	break;
		// }
		console.log(arr[i]);
	}

Do while 不论循环条件是否成立先执行一次然后在去判断是否循环
do{
代码
}while(条件)；
```
var a = 0;
	do{
		console.log(a);
		a++;
	}while(a<10);
```

break 和 continue
在循环体中出现break，整个循环直接结束
在循环体中出现continue，结束当前这一轮的循环，继续下一轮的循环
相同点：在循环体中遇到这两个关键字，后面代码就不在执行了

12.js里面的注释

单行注释以//开头
多行注释以/*开头，以*/结尾