目录
day01:
CSS:
1.定位属性:
是可以将元素按照定位的类型进行移动
position:
绝对定位(absolute) (如果是块标签设置,类似浮块)
相对使用根据该元素的祖先元素(父元素或父标签)进行移动
如果当前元素没有父元素,就是body进行移动;
相对定位:
根据该元素原来的位置进行定位,(如果是块标签设置,还是占一行空间)
固定定位
fixed:根据父元素进行定位的一种方式
特点:不会随着滚动条的滚动而滚动
left:设置定位左边的距离
top:设置定位上边的距离
JavaScript:
一.JavaScript的使用方式:
内部方式:在head标签体中或者body下面书写
script标签.type默认不写
(省略 脚本类型"text.jscript"或者"text/javascript")
JavaScript常用的内置函数:
1.向浏览器打印内容
document.write("需要打印的内容")
2.弹消息提示框(window是浏览器窗口,顶级对象,可以省略)
window.alert("需要弹出的内容")
3.在浏览器的控制台输出内容
内置对象:console
console.log("需要输出的内容") (日志函数)
外部方式:导入外部js文件
script标签必须
1.结束标签
2.src属性="js文件地址"
二.JavaScript的变量定义以及数据类型的划分:
变量:在程序的执行过程中,其值在不断发生改变的量就是变量
js中定义变量的注意事项:
1.定义变量的三要素:var 变量名 = 初始化值;
2.定义所有的变量都是var,而且var可以省略不写
3.js中,变量可以重复定义,后面的值将前面的值覆盖
4.JavaScript是一个弱类型(语法结构非常不严谨)的语言
基本数据类型划分
1.无论是整数还是小数,数据类型都是number类型
2.布尔类型:boolean:用于逻辑判断,要么true(真) 要么false(假)
3.字符串类型:string:无论变量值是"字符串"还是'单个字符'结果都是string类型
4.未定义类型:undefined(没有意义)
引用数据类型:
object类型:对象类型
object是js中的内置对象(浏览器本身存在的)
创建对象 格式: var 对象名 = new 对象();
提示:字符串+任何数据=新的字符串(+:就是拼接符号)
三.关于+:
字符串拼接符号
任何数据+字符串="新的字符串"
字符串+任何数据="新的字符串"
举例:"helloworld"+'a' ="helloworlda"
"helloworlda"+1 = "hellworlda1"'a':是单引号括起来,数据类型是string(字符串)
'a' +1 = "a1"
"a1" +"helloworld" = "a1helloworld"number类型+number类型是加法运算
举例:5+5 = 10 此时+是加法运算
10+"=5+5" = "10=5+5"提示:"双引号括起来的"或者js中''--都是string字符串
字符串就是常量四.js的算术运算符:
基本的算术运算符:
(js中/不会默认取整,而java语音是默认取整的)
+, - , *, /, %(模:求余)
拓展的算术运算符
++或者--
单独使用时:
无论++或者--在数据的前面还是数据的后面都是对当前这个值进行自增或者自减1
举例:var a = 3 ;
var b = 4 ;无论是 ++a还是a++ 都是4(--同理)
参与运算时:
1.++或者--在数据的前面,先自增或者自减,然后运算
2.++或者--在数据的后面,先运算再自增或者自减
举例:var m = a ++ ; 将a先赋值给m,m的值3 ,a变量在自增3++ 是4
var m = ++a ; 将m的值先自增再赋值给m m是4 a也是4五.赋值运算符:
最基本的赋值运算符就是"="
var 变量名 = 值;
将值赋给变量名
注意事项:"="不写成==
扩展的赋值运算符:
+=,-=,*=,/=,%=
将扩展的赋值运算符左边的变量和右边的数据值操作后,将赋值给左边的变量
举例:var a = 10;
a += 20; 拿a+20在赋值给a 等价于 a = a+20 ;六.js的关系(比较运算符):
关系运算符:
无论这个符号连接的表达式再怎么复杂,结果都是true或者false
<,>,<=,>=,==,!=
注意事项:==不能写成=
七.js的逻辑运算符
逻辑运算符的基本符号:
逻辑单与&:并列关系,多个条件同时满足(有false则false,有一个不满足就不成立)
逻辑单或|:多个条件只要满足一个即可成立(有true则true,有一个满足则成立)
逻辑异或^:相同则为false,不同则为true
逻辑!:非true则false,非false则true
逻辑双与&&和逻辑双或||
逻辑双与&&和逻辑双或||属于逻辑运算符的扩展运算符
逻辑双与:&& 有false则false(多个条件同时满足则成立)
逻辑双或:|| 有true则true(多个条件有一个满足则成立)
逻辑双与&&和逻辑单与&的区别:逻辑单与&执行效率比逻辑双与&&低
&:表达式1&表达式2 遇false则false 如果表达式1为false则不成立 逻辑单与还会继续往下执行表达式2 直到执行完 开发效率低
&&:表达式1&&表达式2 遇false则fasle 如果表达式1为false则不成立 那么右边直接短路 不继续往下执行
day02:
一.三元(三目运算符):
三元运算符带有一定逻辑判断
格式:(表达式)?执行true的结果:执行false的结果;
表达式无论简单还是复杂,结果都是boolean类型:true或者false
举例:
var a = 10 ;
var b = 25 ;(a>b)?a:b a大于b吗 如果大于b 执行?后面的,如果不大于b,执行:后面的
二.位运算符(扩展的符号)
位运算符:计算机在对数据进行计算的时候,需要将这些数据进行"补码"操作(原码---反码---补码:有符号的数据表示法)
位与&:有0则0
位或|:有1则1
位异或^:相同则为0.不同则为1
~:反码:全部按位取反,0变1,1变0
扩展:二进制
任意进制到二进制的转换:
十进制到任意进制的转换:
8421码:
有符号位的数据表示法:
三.js的流程控制语句:
顺序结构语句:JavaScript代码由上而下以此加载执行
选择结构语句:if/switch
选择结构语句之if:
if语句格式:
if(表达式){
语句;
}
执行流程:如果表达式成立,则执行语句,否则不执行
if(表达式){
语句1;
}else{
语句2;
}
执行流程:如果表达式成立,则执行语句1,否则执行语句2
if(表达式1){
语句1;
}else if(表达式2){
语句2;
.......
}else{
语句n;
}
执行流程:先判断表达式1是否成立,成立则执行语句1
如果不成立,判断表达式2是否成立,成立则执行语句2
如果都不成立,执行else中的语句
注意:程序写完测试 要考虑:
1.边界数据是否正常
2.范围内的数据是否正常
3.测试错误数据是否是满足条件
if和三元运算符的区别:
if的范围大,它是流程控制语句,它不仅可以在里面使用赋值的方法去接收变量,也可以去使用输出语句document.write(需要输出的语句);
三元运算符是运算符号,只能操作具体的数据值,要么string/number..不能在里面嵌套使用document.write(需要输出的语句);
如果需求能够使用三元实现的,一定能够使用if实现,能用if实现的不一定能使用三元
选择结构之switch:
switch格式
switch(表达式或者某个变量){
case 值1:
语句1;
break;
case 值2:
语句2;
break;
........
default:
语句n;
break;
}
执行流程:使用switch后面的变量值和case的值1进行匹配,
如果匹配,执行语句1,break语句结束,如果值1不
匹配,判断case后面的值2是否和switch后面的值
进行匹配,如果匹配则执行语句2,break语句结束
如果都不匹配,则执行default的语句n,遇见break
语句结束
JavaScript中switch的注意事项:
1.switch语句中case语句后面的值可以是常量,也可以是变量
2.如果case语句中没有携带break语句,就会出现一种现象"case"穿透(灵活运用)
3.switch语句的结束条件(重点)
1.遇见break结束(break:跳转控制语句 中断/结束!)
2.程序默认执行到末尾
4.default语句可以在switch中的任何位置,不影响switch的执行流程,如果default在语句中,break不要省略,如果default在语句的末尾,break是可以省略的(建议不要省略)
循环结构语句:for/while/do-while
循环结构语句之:for
for循环的格式:
for(初始化语句;条件判断语句;控制体语句){
循环体语句;
}
执行流程:
1.初始化语句对变量进行初始化赋值(执行一次即可)
2.判断条件语句是否成立,如果成立,则执行循环体语句
3.执行控制语句(步长语句)这个变量自增或者自减
4.判断条件是否成立,成立,继续执行循环体语句,再次回到3继续操作
5.直到当表达式不成立,循环结束
循环也被成为"遍历"
while循环格式:
通用格式:
初始化语句;
while(条件表达式){
循环体语句
控制体语句;(步长语句)
}
执行流程:
1.初始化语句先执行,进行赋值
2.判断条件表达式是否成立,成立,执行循环体语句,执行控制体语句
3.继续回到过程2...如果条件不成立,结束循环
do-while循环格式:
初始化语句;
do{
循环体语句;
控制体语句(步长语句);
while(条件表达式);
}
执行流程:
1.初始化语句赋值
2.执行循环体
3.控制体语句进行自增或者自减
4.判断条件是否成立,成立,继续执行循环体,不成立结束循环
day03:
一.循环的扩展:
循环加入求和思想
需求:求1-10之间的和
求和思想:
0+1=1
1+2=3
3+3=6
6+4=10
10+5=15
......
两个加数:
前面的这个加数从0开始,记录每一次求和的结果
后面的这个加数就是1-10之间的每一个数据
操作:
1.定义一个最终结果变量sum:0开始
2.循环:将范围内的数据一一获取到:1-10
2.1循环中的循环体语句
sum=sum+当前的变量
简写:sum+=变量;
举例:
var sum = 0 ; //最终结果变量
for(var x =1; x <=10 ; x++){
//循环体:
sum = sum + x ; //sum = 0+1 sum=1,sum =1+2 =3
//sum = 3 + 3 = 6
}
document.write("1-10之间的和是:"+sum+"<br/>") ;水仙花数:三位数,每一个位上的数据的立方之和就是数据本身
如:153 = 1*1*1+5*5*5 + 3*3*3
需求:在浏览器中输出所有的水仙花数
分析:
1.水仙花是三位数,明确了范围 100-999
2.使用for循环----100-999的所有数据都获取到
获取到的每一个数据的每个位上的数据本身
操作:
153:获取个位/十位/百位的数据
获取低位:%模(求余)
var ge = 153 % 10 = 3
var shi = Math.floor(153/10%10)=5 Math.floor(数字)如果是小数向下取整
var bai = Math.floor(153/100%10)=1
判断:
如果当前这个数据==(ge*ge*ge+shi*shi*shi+bai*bai*bai){
满足条件将数据打印在浏览器上
}
Math.ceil(number):javascript提供内对象:数学的运算的向上取整
Math.floor(number):向下取整举例:
for(var x= 100; x <1000;x++){
//2)获取到的要每一个数据的每个位上的数据本身
//定义三个变量:分别代表个位,十位,百位
//%10 目的:获取低位
var ge = x % 10 ;
// 数据/10:目的 去掉低位
var shi = Math.floor(x /10 %10 ) ;
var bai = Math.floor(x/10/10 %10) ;
//3)如果当前这个数据==(ge*ge*ge+shi*shi*shi+bai*bai*bai)
if(x==(ge*ge*ge+shi*shi*shi+bai*bai*bai)){
document.write("水仙花数是:"+x+"<br/>") ;
}
}统计思想:
1.先定义一个统计变量:初始化0
2.水仙花是三位数,明确范围,循环思想
3.计算每一个位的数据本身
4.当前这个数据就是个位的立方+十位的立方+百位的立方满足这个条件
统计变量++
5.输出统计变量
举例:
var count = 0 ;
for(var i = 100 ; i <=999 ; i++){
//定义三个变量,个位,十位,百位
var ge = i % 10 ;
var shi = (Math.floor(i /10)) %10 ;
var bai = (Math.floor(i/10/10)) %10 ;
if( i == (ge*ge*ge+shi*shi*shi+bai*bai*bai)){
count ++ ; //++
document.write("第"+count+"次的水仙花是:"+i+"<br/>") ;
}
}
document.write("水仙花数共有:"+count+"个<br/>") ;
死循环:利用死循环可以完成一些事情
while(true){
完成逻辑
产生一个随机数
键盘录入数据
判断数据大了,还是小了
如果相等,退出循环 break
}
举例:
while(true){
//统计变量++
count ++ ;
//键盘录入
var guessNum = prompt("请您输入一个数据:") ;
/* if(guessNum =="" || guessNum == " "){
alert("请输入数值类型的数据") ;
} */
//string--number
guessNum = parseInt(guessNum) ;
//如果猜的数字大于随机数
if(guessNum > num){
alert("您要猜的"+guessNum+"大了") ;
}else if(guessNum < num){
alert("您要猜的"+guessNum+"小了") ;
}else{
alert("恭喜您,第"+count+"次,猜中了") ;
//结束循环
break ; //中断
}
}for循环和while的区别
1.格式不同
for(初始化语句;条件表达式;控制体语句){
循环体语句;
}
初始化语句:
while(条件表达式){
循环体语句;
控制体语句;
}
2.从内存角度考虑优先使用for
for循环结束,里面的变量就会从内存中被释放掉,节省内存资源
while循环结束,依然能访问这个变量,初始化语句在外面定义的
3.应用场景不同
明确循环次数使用for循环
不明确循环次数使用while
开发中优先使用for 循环
do-while和for循环,while循环最大的区别
循环体至少循环一次
(开发中,用的很少)
底层源码使用很多:js前端框架(Jqeury)
后端语言:java语言(面向对象)
集合/后面常用类的方法中见到源码涉及到do-while
for循环嵌套
格式:
for(循环语句1;条件表达式1;控制体语句1){
循环体
for(初始化语句2;条件表达式2;控制体语句2){
循环体语句;
}
}
举例:
for(var i = 0 ; i < 4; i++ ){//0,1,2,3
for(var j = 0 ; j < 5; j ++){ //0,1,2,3,4
document.write("*") ;
}
document.write("<br/>") ;
}for循环嵌套 外层循环控制行 内层循环控制列
day04 :
一.跳转控制语句
1.break:中断,结束的意思
不能单单独使用
在两个场景中使用
1.switch语句,本身格式就携带break
2.循环语句中使用 中断循环
2.continue:继续的意思(结束当前循环,立即进入下一次循环)
不能单独使用
不能脱离循环语句(loop)中使用
3.return:结束一个函数(方法),或者程序
一般在函数(方法中使用)
不能单独使用
二.函数(方法)
举例:
玩游戏植物大战僵尸,豌豆芽发射炮弹可能需要书写100行代码来完成,每一个关卡都有豌豆芽发射炮弹动作,每一个关卡中都需要是这100行代码代码冗余大(重复性大),提供代码的复用性,就将100行代码,放在{}里面并且要为{}起名字---函数名(方法名)以后只要见到豌豆芽发射炮弹,直接去调用这个函数名即可
任何定义函数(方法)
在js中定义函数的格式:
function 函数名(参数名1,参数名2,.....){
完成的函数的逻辑
return 结果;
}
调用函数:
赋值调用:
var 变量名 = 函数名(实际参数1,实际参数2.....)
没有具体返回结果的函数定义的时候,跟有返回结果的函数定义相同,在函数体中直接输出
单独调用:
函数名(实际参数1......)
完成函数定义的心里明确:
1.这个函数有没有返回结果;
2.考虑参数的数据类型以及参数个数
函数的命名规范:遵循小驼峰命名法
单个单词:字母全部小写
多个单词:第一个单子全部小写,从第二个单词首字母开始大写,其余小写
函数使用的注意事项:
1.定义函数的时候,形式参数上不能携带var
2.函数定义的格式不能省略{},否则不是一个函数,浏览器中js引擎是无法识别的
3.如果这个函数没有返回结果,那么赋值调用的是undefined(未定义)
4.无论任何语言中,有右括号的地方不能有分号,否则函数是没有"函数体"没有函数体的方法是没有意义的
day05 :
一.数组:
数组:可以存储多个同一种类型元素的一个容器
在JavaScript语言中,数组可以存储不同类型的元素,但是开发中数组存储的必须为同一种类型的元素
js中本身就存在一个Array内置数组对象
固定格式:
(动态初始化:不给定元素)
var 数组名称 = new Array(); 不指定长度
var 数组名称 = new Array(size); 指定数组长度
(静态初始化:给定具体元素)
var 数组名称 = new Array([元素1,元素2....]);
可以简写为:var 数组名 = [元素1,元素2....];
数组的属性:length (长度)
数组名称.length
如何确定数组的元素
数组名称[角标值或者索引值]
索引值从0开始,数组的最大索引值=数组长度-1
js(弱类型语言:语法以及结构都不严谨)中的数组,没有角标越界一说,它可以不断的给数组追加元素
二.数组的遍历:
var 数组名称 = new Array([元素1,元素2,元素3....,元素n])
用for循环遍历数组 并打印
for(var i = 0;i<数组长度;i++){ //定义i为0 代表数组的第一个值(角标为0) 并且要小于数组的长度 小于就继续打印
document.write(arr[i])// 打印出数组中每个角标对应的元素
}
三.数组的最值问题:
从已知的数组获取它的最大值:
var arr = [20,13,24,56,44] ;
首先定义一个参照物 认为它就是最大值
var max = 0;
遍历数组:
for(var i = 1 ; i < arr.length;i++){
//判断:如果后面的元素都比max大,参照物arr[0]就不是最大值
if(arr[i] > max){
max = arr[i] ; //将后面的元素赋值给max
}
}四.数组的冒泡排序:
定义一个数组
var arr = [20,13,24,56,44] ; 使它从大到小排序
冒泡排序:
实现逻辑:
1.比较相邻的元素,如果第二个比第一个大使它们交换
2.对每一对相邻的元素同样的工作,从开始第一对到结尾的最后一对,在这一点,第一个元素会是最大的数
3.针对所有元素重复以上步骤,除了第一个
4.持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数组需要比较
通过两层循环控制:
1.第一个循环(外循环),负责把需要冒泡的数组排除在外;
2.第二个循环(内循环),负责两两比较交换
//先进行冒泡排序
for(var i = 0;i<arr.length;i++){
for(var j = 0;j<arr.length-1-i;j++){ //需要将上一个最大值排除在外
if(arr[j]<arr[j+1]){ //如果arr[j]比下一个角标的值小 就进入
var temp = arr[j]; //定义一个中间变量存储arr[j]的值
arr[j] = arr[j+1]; //将较大的值赋值给arr[j]
arr[j+1] = temp;//再将原本是 arr[j]的值赋值给arr[j+1]
}
}
}
将排序好的数组打印输出
for(var i = 0; i<arr.length;i++){
document.write(arr[i]) //56,44,24,20,13
}
经典算法题:
我国古代数学家张丘建在《算经》一书中曾提出过著名的“百钱买百鸡”问题，
* 该问题叙述如下：鸡翁一，值钱五；鸡母一，值钱三；鸡雏三，值钱一；百钱买百鸡，则翁、母、雏各几何？
翻译过来，意思是公鸡一个五块钱，母鸡一个三块钱，小鸡三个一块钱，现在要用一百块钱买一百只鸡，问公鸡、母鸡、小鸡各多少只？首先列出公式:
公鸡的数量+母鸡的数量+小鸡的数量=100
5*公鸡的数量+3*母鸡的数量+小鸡的数量/3 = 100
穷举法:
100文钱:全部买公鸡20
100文钱:全部买母鸡 33 Math.floor(100/3)(去除小数 向下取整)
//定义变量公鸡,母鸡,小鸡的数量分别是x,y,z
var x ,y ,z
for(x = 0; x<=Math.floor(100/5); x++){ //能够取出所有公鸡数量
for(y = 0; y<=Math.floo(100/3); y++){ //能够取出所有母鸡的数量
//公鸡和母鸡的数量确定了以后 计算小鸡的数量
z = 100 -x -y; //需要买100只鸡减去公鸡母鸡的数量就是小鸡的数量
//需要满足的条件:
//钱数100 5*x + 3*y +z/3 ==100
//同时小鸡的数量是要能被3整除的
if((5*x+3*y+z/3)==100 &&(z%3==0)){
document.write("公鸡的数量是:"+x+",母鸡的数量是:"+y+",小鸡的数量是:"+z+"<br/>") ;
}
}
}
95
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
