day032 --js

JavaScrirpt

概述

JavaScript,简称js,是一种脚本语言,需要配合HTML一起使用,主要是让HTML出现动态效果。

JS由ECMAScript语法，DOM，BOM组成

语法：声明变量，运算，流程控制，对象等等

DOM：文档对象模型，将html页面比作一个文档，形成节点树

BOM：浏览器对象模型，将浏览器比作对象，可以对浏览器进行操作

1.在html中直接写代码

<script type="text/javascript">
		// 在此处写js代码
		// 输出语句,输出到开发者工具的控制台
		console.log("js日志...")
    //打印语句，打印到页面显示
		document.write("js不强...")
	</script>

2.html与js分离

//在js中新建一个文件(jss)，将代码写入其中
console.log("js...")
//在原文件中进行调用 通过获取路径获得
<script src="js/jss.js"></script>

JS语法

变量

var关键词可以作为任何变量的声明
<script type="text/javascript">
			console.log("完美引入")
			var a=1;
			var b=1.1;
			var c=new Date();
			var d=false;
			var f = "不高于";
		</script>

基本数据类型

通过typeof可以获取对应的数据类型

<script type="text/javascript">
			console.log("完美引入")
			var a=1;
			var b=1.1;
			var c=new Date();
			var d=false;
			var f = "不高于";
			console.log(a);
			console.log(b);
			console.log(c);
			console.log(d);
			console.log(f);
			const g= 3.14;
			console.log(g);
			console.log(typeof(a));
			console.log(typeof(b));
			console.log(typeof(c));
			console.log(typeof(d));
			console.log(typeof(f));
			 // g = 5;
			 // console.log(g);
		</script>

引用类型

var 对象={
  //赋值要用:而不是=！！！
  //赋值之间要用，隔开
  //对对象进行赋值
  id : 1,
}

数组类型

方法	功能
length	数组长度
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔
pop()	返回并删除最后元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度
reverse()	反转数组
sort()	排序

<!-- 数组创建方式-->
var 数组名 = {值1，值2.....};

日期类型

格式	功能
new Date()	获取当前时间
getFullYear()	获取年
getMonth（）	获取月份，但是是从0开始，要加1
getDate（）	获取一个月的第多少天
getDay()	获取一周的第几天
getTime()	获取时间，单位是毫秒值
toLocaleString()	获取本地格式的时间

<!-- 获取对象 -->
<!-- var date = new Date();-->
console.log(date);
			console.log(date.getFullYear());	// 获得年
			console.log(date.getMonth() + 1); // 获得月份,0-11
			console.log(date.getDate());// 日
			console.log(date.getDay());// 周
			console.log(date.getTime());// 毫秒值

运算符

算术运算,逻辑,关系运算,三目运算

		<script type="text/javascript">
			var a = 10;
			var b = 1;
			// 算术运算
			// console.log(a+b);
			// console.log(a-b);
			// console.log(a*b);
			// console.log(a/b);
			// console.log(a++); // ++在后,先使用,再自增
			// console.log(a);
			
			// && 一错就错,全对才对
			if(a > b && a < b) {
				// console.log("&& ==> a>b")
			} else{
				// console.log("&& ==> ERROR")
			}
			
			// || 一对就对,全错才错
			if(a > b || a < b) {
				// console.log("|| ==> OK")
			} else{
				// console.log("|| ==> ERROR")
			}
			
			if(false && a++) {
				console.log("1 ==> "+a)
			} else{
				console.log("2 ==> "+a)
			}
			
			// 非!
			console.log(!true)
			
			/**
			 * 关系运算符
			 * > < >= <= != 
			 * 判断是否相等 ==和===
			 * == 只是判断值是否相等
			 * === 判断值和类型都要相等
			 */
			var x = 1;
			var y = "1";
			if(x === y) {
				console.log("x==y")
			}else{
				console.log("x!=y")
			}
			
			var i = 1;
			var j = 2;
			console.log(i < j ? "i":"j");
		</script>

分支

if

if..else...

if..elseif..else...

switch..case

循环

for(var i = 0;i <数组.length;i++) {

}
while(判断语句){

}
do{

}while(判断语句);

函数(重点)

有四种构造函数方法

无参无返回值

function 函数名(){

}

无参有返回值

参数之间用逗号隔开

function 函数名(){
reture 返回值;
}

有参无返回值

function 函数名(参数...){

}

有参有返回值

function 函数名(参数...){
return  返回值;
}

注意:

// 方法定义上没有返回值类型
// 参数列表中也不需要设置数据类型,也不需要写var
// 函数如果需要返回数据,直接ruturn 值;

盒子模型

网页是使用div容器组成,盒子模型就可以实现div容器的布局.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jv2ds7hq-1661577132359)(C:\Users\张海涛\Desktop\zht2212\image-20220824093459232.png)]

               /* 边框: 宽度 线型 颜色 */
				border: red 5px solid;
				/* 单独设置某一边 */
				/* border-left: red 5px solid; */
				
				/* 填充,会将div撑大 */
				padding:10px;
				/* 可以单独设置某一边的填充 */
				
				/* 外边距:
				 可以同时设置四边: 上 右 下 左
				 */
				/* margin:1px 2px 3px 4px; */
				margin: auto;
				margin-top: 200px;

Bootstrap

前端框架,可以快速搭建网站.提供整个完整页面效果,也有单独css样式,组件,和js插件.

使用步骤

1. 找到3版本

2. 下载源码

3. 如果不想下载,也可以使用提供的CDN

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

4. 创建项目,引入bootstrap库

5. 创建html文件,引入css文件

6. 开始使用bootstrap的示例

   找到一个模板页面,然后复制模板页面内容。

   如果该页面有定制css，也需要将定制css内容找到并复制粘贴到当前项目