阿里云虚拟主机与网站吗,网页设计实训报告总结3000字,个人网站优秀案例,百度网页推广今日内容 0 复习昨日 1 JS概述 2 JS的引入方式 3 JS语法 3.1 变量 3.2 基本数据类型 3.3 引用类型 3.4 数组类型 3.5 日期类型 3.6 运算符(算术运算,逻辑,关系运算,三目运算) 3.7 分支 3.8 循环 3.9 函数(重点) 3 常见弹窗函数 alter,confirm,prompt 0 复习昨日 1 盒子模型 对d…今日内容 0 复习昨日 1 JS概述 2 JS的引入方式 3 JS语法 3.1 变量 3.2 基本数据类型 3.3 引用类型 3.4 数组类型 3.5 日期类型 3.6 运算符(算术运算,逻辑,关系运算,三目运算) 3.7 分支 3.8 循环 3.9 函数(重点) 3 常见弹窗函数 alter,confirm,prompt 0 复习昨日 1 盒子模型 对div进行设置,当盒子border 边框内边距/填充 padding外边距 margin 2 浮动 属性float, 值left,right用来做布局经典的使用,可以实现文字环绕图片还可以实现盒子在一排 3 定位 只有定位后,才可以使用方位属性(top,bottom.left,right) 相对定位 position:relative相对于自己原来的位置移动,原来的位置还保留 绝对定位 position:absolute相对于父元素,父元素没有定位,那就相对于body 固定定位 position:fixed相对于浏览器窗口 4 bootstrap 下载源码导入到当前项目文件在html文件中使用link引入bootstrap的css样式文件去官网找css样式,组件复制粘贴就可以啦 1 JavaScript HTML 写页面展现内容 CSS 用来美化页面 JavaScript 用来让页面有动态效果(轮播图) JavaScript(JS)是一种脚本语言,主要是配合HTML完成一些页面的动态效果. 脚本: 解释性的,嵌套在其他东西里面的一种作用是实现动态效果JavaScript这个语言是弱类型 JavaScript这门技术主要包含 基本语法DOM(Document Object Model)对象,其实就是操作HTML标签和CSS样式BOM(Browser Object Model)对象,其实操作浏览器 2 JS的引入
2.1 在标签内写js body!-- onclick是html的属性,是事件属性,在这里是鼠标点击事件属性值内部写的是js代码alert() 是js的弹窗函数--button onclickalert(警告!!!!)按钮/button/body2.2 在文件使用script标签引入js css写样式,需要把style标签写在head标签内 但是写js代码的script标签,可以写在html页面的任何位置,head标签内,body标签内都可,但是一般建议放在后面,越晚加载越好 scriptalert(script标签内执行);/script2.3 独立的js文件 1 创建一个后缀为.js的文件 2 文件内写js代码 3 在html文件内使用script标签引入该js文件 4 引入js文件的位置,在html中也是任意的 5 作为引入js文件的script标签,不能在其中间写js代码 body!-- 引入js文件 --script srctk.js/script/body3 JS语法
3.1 变量 变量的使用 声明 , var 变量名;赋值 , 变量名 值;使用 JavaScript是弱类型语言,声明时不需要设置变量的类型,赋值时就可以赋值任何类型 script// 声明变量var a;// 变量赋值a 1;// 使用变量// alert(a)// var b 2; // 赋值整形数字b a; // 可以再改变var c 3.1; // 赋值浮点型数字var d 四; // 赋值字符串var e true; // 赋值布尔型var f new Date(); // 赋值对象// 将结果输出到浏览器控制台(F12-Console)console.log(b b);console.log(c c);console.log(d d);console.log(e e);console.log(f f);/scriptps,浏览器控制台 3.2 基本数据类型 基本类型有数字(number),字符串(string),布尔型(boolean),未定义(undefined),空(null)五种 script var x 1; // number类型var x2 1.1; // number类型var y JavaScript; // string类型var z true; // boolean型// js有个函数,typeof(),这个函数可以返回变量的类型console.log(typeof x);console.log(typeof x2);console.log(typeof y);console.log(typeof z);console.log(typeof i); // undefined未定义/script变量有不同的类型,不同类型使用的作业不一样 number类型,数字,那就可以做算术,逻辑运算等 (后续运算时使用) boolean类型,那就可以用于逻辑判断,分支语句,循环等 (后续分支循环时使用) string类型,那就可以使用字符串的方法,对字符串操作(跟java中String操作很像) 完整的string操作,可以查看APIJavaScript 字符串方法 (w3school.com.cn) var y Java-Script; // string类型var j y.charAt(0); // 根据下标找字符console.log(j);console.log(y.indexOf(a)); // 找到第一个指定字符的下标console.log(y.lastIndexOf(a)); // 找到最后一个指定字符的下标console.log(y.split(-)); // 根据指定字符,拆分字符串,返回字符串数组console.log(y.substring(5)); // 根据指定截取字符串,直到末尾console.log(y.substring(5, 8)); // 根据指定下标截取字符串,[begin,end)// length不是方法,是属性,调用时不用()console.log(y.length); // 获得字符串长度3.3 引用类型 其实引用类型是借鉴Java中的对象的思想. JS中的引用类型其实是JSON,后续学框架,工作中JSON是重中之重!非常常见 今天主要学习JSON(杰森)的语法格式,会用JSON定义一个对象 将来使用JSON在前端后后端之间传输数据的 语法格式 JSON对象使用大括号,{}大括号内,是键值对,键值对使用是冒号分割.{key:value}键正常写,值得写法区分数字,字符串,布尔值,数组,对象等 {id:18} 数字直接写{name:“张三”} 字符串需要双引号{sex:true} 布尔值直接写{arr:[1,2,3]} 数组使用[]{obj:{}} 对象使用{} 大括号内,可以同时写多个键值对,中间使用逗号隔开 {id:18,name:“李四”,sex:true} // json对象,引用类型var student {id: 1,name: 小胡,sex: true,age: 18,score: [98, 99, 100],teacher: {id: 2,name: 邱哥,age: 18,},};// 取出对象的属性值// 对象.属性 其实是对象.keyconsole.log(student.id);console.log(student.name);console.log(student.sex);console.log(student.age);console.log(student.score);console.log(student.teacher);console.log(student.teacher.name);3.4 数组类型 数组是用来存储多个数据 创建时可以是空数组,后面也可以继续赋值数组没有长度限制数组存储的类型没有限制 创建数组的语法 var 名字 []var 名字 new Array() 取值赋值的语法 数组名[下标] script// 创建数组var arr1 []; // 空数组var arr2 [1, 2, 3, 4]; // 创建数组,数组有值var arr3 [1, 二, true, new Date()]; // 创建数组,数组有值,类型不固定var arr4 new Array(); // 空数组var arr5 new Array(1, 二, true);console.log(arr1);console.log(arr2);console.log(arr3);console.log(arr4);console.log(arr5);// 数组取值console.log(arr2[0]);console.log(arr2[4]); // 下标越界时,显示未定义// 赋值arr1[0] 1;arr1[1] 贰;console.log(arr1);/script除了以上基本数组操作之外,JS的数组还有一些方法可以调用 详细可以参考文档JavaScript 数组方法 (w3school.com.cn) script var arr6 [1, 2, 3, 4];// length属性console.log(arr6.length);// toString,数组转字符串console.log(arr6.toString());// join,数组转字符串,以指定符号分割console.log(arr6.join( - ));// pop() 方法从数组中删除最后一个元素,返回的是被删除的元素console.log(arr6.pop());console.log(arr6);// push() 方法在数组结尾处向数组添加一个新的元素arr6.push(4);console.log(arr6);// for (var i 0; i arr6.length; i) {console.log(arr6[i]);}/script3.5 日期类型 创建日期对象, 日期对象提供了方法可以获得/设置日期信息 详细信息查看文档JavaScript 日期 (w3school.com.cn),JavaScript 日期获取方法 (w3school.com.cn),JavaScript 日期设置方法 (w3school.com.cn) script// 创建日期对象var date new Date(); // 当前时间console.log(date);// 创建时间时指定毫秒值,时间从1970/01/01 00:00:00var date2 new Date(1000 * 60 * 60 * 24 * 40);console.log(date2);// 以指定年月日创建日期,月份特殊!!!一月是 0。十二月是11。var date3 new Date(2022, 10, 13);console.log(date3);// 获得日期方法var year date3.getFullYear(); // 获得年var month date3.getMonth() 1; // 获得月,0-11var day date3.getDate(); // 获得日var week date3.getDay(); // 周,0-6 周日是0,周一1,周六6console.log(year / month / day 周 week);// 设置日期date.setFullYear();// 按照本地日期格式输出日期var dateString date.toLocaleString();console.log(dateString);/script3.6 运算符 算术运算 关系运算 逻辑运算 三目运算 以上这些运算操作,与java中操作基本一样 算术运算 script// 算术运算// - * / % --console.log(1 1);console.log(1 1 1);console.log(1 - 1);console.log(1 * 10);console.log(10 / 2);console.log(10 / 3); // 除法,除不尽没有取整!!!console.log(10 % 3);var a 1;a;console.log(a);var b 1;// var c b;var c b;console.log(c);var d 1;d 1; // 等价于 d d 1console.log(d);/script关系运算 script // 关系运算// ! // 关系运算的结果是布尔值: true / falseconsole.log(1 0);console.log(1 0);console.log(1 0);console.log(1 0);// 判断[值]是否相等console.log(1 1 (1 1));console.log(1 1 (1 1));// 判断[值]和[类型]是否都相等console.log(1 1 (1 1));console.log(1 1 (1 1));/script逻辑运算 script // || !// 一错就错,全对才对,也有短路效果console.log(1 0 1 0);var a 1;console.log(1 0 a 1);console.log(a a);// || 一对就对,全错才错,也有短路效果console.log(1 0 || 1 0);var b 1;console.log(1 0 || b 0);console.log(b);// !取反console.log(!true);/script三目运算 script console.log(三目运算);// 前面的表达式如果为true,就执行冒号左边// 如果前面的表达式为false,就执行冒号后边console.log(1 0 ? 111 : 000);/script3.7 分支 if ifelse if-elseif-elseif-else switch scriptvar a 1;if (a 0) {console.log(a 0);}if (a 0) {console.log(a 0);} else {console.log(a 0);}if (a 0) {console.log(a 0);} else if (a 0) {console.log(a 0);} else {console.log(a 0);}// switchcase也一样.../script3.8 循环 while dowhile for script// 输出1-10var i 1;while (i 11) {console.log(i);i;}// 输出100 110 ---200var j 100;do {console.log(j);j 10;} while (j 200);// 求和1-100var sum 0;for (var k 1; k 100; k) {sum k;}console.log(sum sum);/script3.9 函数(重点) 函数就是java中方法的概念,用来完成某些功能的. 定义函数的语法 function 函数名(参数1,参数2,...) {// 执行代码
}
/*
1. function是固定,每个方法都需要设置
2. 没有定义返回值类型,也没有void
3. 函数名,见名知意
4. 参数直接写参数名,没有 数据类型,也没有var
5. 如果要返回数据,通过return 值;返回
*/script// 1 无参无返回值function fun1() {console.log(无参无返回值...);}// 调用方法,方法名直接调用fun1();// 2 有参无返回值function fun2(a) {console.log(fun2执行);console.log(a);}// 方法有参数,调用时不传参数,方法能执行,但是变量显示未定义// 方法有参数,调用时实参多于形参,方法能执行,多余的参数无意义fun2(10, 20);// 3 无参有返回值function fun3() {return 200;}var result fun3();console.log(result);// 4 有参有返回值// 设计方法,传入2个参数,相加后返回/script特殊的函数定义:匿名函数 // 5 匿名函数,主要用于配合事件操作var obj function () {console.log(匿名函数);};4 常见的弹窗函数
4.1 警告框 scriptfunction fun1() {alert(没有权限!);}fun1();/script4.2 确认框 scriptfunction fun2() {// 该函数有返回值,是ture/false// 点击确定,返回true,点击取消返回fasleif (confirm(确定要删除?)) {alert(删除成功!!);} else {alert(取消删除!);}}fun2();/script4.3 输入框
script function fun3() {// 会弹出对话框,输入值后点击确定返回输入框的值// 点击取消返回的就是nullvar ret prompt(请输入身份证号!);console.log(ret);}fun3();/scriptfunction fun1() { alert(“没有权限!”); } fun1(); ## 4.2 确认框htmlscriptfunction fun2() {// 该函数有返回值,是ture/false// 点击确定,返回true,点击取消返回fasleif (confirm(确定要删除?)) {alert(删除成功!!);} else {alert(取消删除!);}}fun2();/script4.3 输入框
script function fun3() {// 会弹出对话框,输入值后点击确定返回输入框的值// 点击取消返回的就是nullvar ret prompt(请输入身份证号!);console.log(ret);}fun3();/script
