CSS定位 javascript基础 javascript变量、运算符，进制转换，javascript的流程控制语句循环、条件语句，javascript的跳转控制语句，javascript的函数、数组
CSS定位
定位属性:是可以将元素按照定位的类型进行移动
position:
绝对定位：absolute(如果是块标签设置,类似浮块)
相对使用根据该元素的祖先元素(父元素或父标签)进行移动,
如果当前元素没有父元素,就是针对body进行移动;
相对定位:relative
根据该元素原来的位置进行定位,(如果是块标签设置,还是占一行空间)
固定定位:fixed
根据父元素进行定位的一种方式
特点:不会随着滚动条的滚动而滚动
left:设置定位左边的距离
top:设置定位上边的距离
javascript
javascript的使用方式
1.内部方式:在head标签体中或者body下面书写
script标签,type默认不写。
(省略：脚本类型"text/jscript"或者"text/javascript")
2.导入外部js文件:
scritp标签必须
1)结束标签
2)src属性="js文件地址"
写法：
3.javascript常用的内置函数:
1)向浏览器打印内容
document.write("hello,javavscript");
2)弹消息提示框 (window是浏览器窗口,顶级对象,可以省略)
window.alert("helloworld");
alert("hi！！！");
3)在浏览器的控制台输出内容
内置对象:console
console.log("hello,javascript我来了");//日志函数
javascript的变量定义以及数据类型划分
//单行注释
/*文字描述 (多行注释) */
变量:在程序的执行过程中,其值在不断发送改变的量!
js定义变量的注意事项
1)定义变量的三要素 :var 变量名 = 初始化值;
2)定义所有的变量都是var,而且var可以省略不写!
3)js中,变量可以重复定义的,后面的值将前面的值覆盖!
javavscript:是一个弱类型(语法结构非常不严谨)
java语言:后端语言的一种强类型语言(语法结构非常严谨)
查看一个变量的数据类型的行数:typeof(变量名)
基本数据类型划分:
1)无论是整数还是小数,数据类型number类型
2)布尔类型 :boolean :用于逻辑判断:要么true(真) false(假)
3)字符串类型:string :无论变量值"字符串"还是'字符':结果都是string
4)未定义类型:undefined(没有意义的)
引用数据类型:
5)object类型:对象类型
var a=10;
var a=20;
var b=3.14;
var c=true;
var d=false;
var e="helloworld"; //双引号括起来的内容:字符串
var f='a'; //单引号括起来单个内容:字符
var g=new Object();
//Object是js中内置对象(浏览器中本身存在的)
//创建对象 格式:var 对象名 = new 对象() ;
var k; //未定义
document.write("a的值是："+a+",a的数据类型是"+typeof(a)+"
");
document.write("b的值是："+b+",b的数据类型是"+typeof(b)+"
");
document.write("c的值是："+c+",b的数据类型是"+typeof(c)+"
");
document.write("d的值是："+d+",b的数据类型是"+typeof(d)+"
");
document.write("e的值是："+e+",b的数据类型是"+typeof(e)+"
");
document.write("f的值是："+f+",b的数据类型是"+typeof(f)+"
");
document.write("g的值是："+g+",b的数据类型是"+typeof(g)+"
");
document.write("k的值是："+k+",b的数据类型是"+typeof(k)+"
");
javascript的“+”
字符串拼接符号
任何数据+字符串="新的字符串"
以下为一些例子：
//字符串+任何数据="新的字符串"
document.write("helloworld"+'a'+"123"+"
");
//"helloworld"+'a' ="helloworlda"
//"helloworlda"+1 = "hellworlda1"
document.write("helloworld"+'a'+1+"
");
//'a':是单引号括起来,数据类型是string(字符串)
//'a' +1 = "a1"
//"a1" +"helloworld" = "a1helloworld"
document.write('a'+1+"helloworld"+"
");
document.write("
") ;
//"5+5="+5 = "5+5=5"
//"5+5=5"+5 = "5+5=55"
document.write("5+5="+5+5+"
");
//5+5 = 10 此时+是加法运算
//10+"=5+5" = "10=5+5"
document.write(5+5+"=5+5"+"
");
//"双引号括起来的"或者js中''--都是string字符串
//字符串就是常量
document.write("hellOjavascript!");
javascript的算术运算符
基本的算术运算符: (js中/不会默认取整,而java语言默认取整!)
+,-,*,/,%模(求余)
扩展的算术运算符：
++或者--
单独使用:
无论++或者--在数据的前面还是后面都是对当前这个值进行自增1或者自减1
参与运算:
1)++或者--在数据的前面,先自增或者自减,然后运算
2)++或者--在数据的后面,先运算在自增或者自减
以下为一些例子：
//算术运算符
//定义两个变量
var a=4;
var b=5;
document.write("a+b的值是"+(a+b)+"
");
document.write("a-b的值是"+(a-b)+"
");
document.write("a*b的值是"+(a*b)+"
");
document.write("a/b的值是"+(a/b)+"
");
document.write("a%b的值是"+(a%b)+"
");
document.write("
");
var x=4;
var y=5;
document.write("x的值是:"+x+"
");
document.write("y的值是:"+y+"
");
document.write("
");
//单独用 :++或者--在数据的前面
++x;
--y;
document.write("x的值是:"+x+"
");
document.write("y的值是:"+y+"
");
document.write("
");
var t=4;
var z=5;
//单独用:++或者--放在数据的后面
z++;
y--;
document.write("x的值是:"+t+"
");
document.write("y的值是:"+z+"
");
document.write("
");
var p=4;
var q=5;
//参与运算使用:++或者--在数据的前面
//var m = ++x ;//++4 = 5--->赋值给m,m结果5
//var n = --y ;//--5= 4 --->赋值给n,n结果4
var m = ++p;
var n = --q;
document.write("x的值是:"+p+"
");
document.write("y的值是:"+q+"
");
document.write("m的值是:"+m+"
");
document.write("n的值是:"+n+"
");
document.write("
");
var a=4;
var b=5;
//参与运算使用:++或者--在数据的后面
var j =a++;//将a先赋值给j,j的值4 ,x变量在自增4++
var k =b--;//将b先赋值给k,k的值5 ,y变量自减 5--
document.write("x的值是:"+a+"
");
document.write("y的值是:"+b+"
");
document.write("m的值是:"+j+"
");
document.write("n的值是:"+k+"
");
javascript的赋值运算符
基本的赋值运算符 就是"="
var 变量名 = 值;
将值赋值给变量名
注意事项:
"="不写成==
扩展的赋值运算符:
+=,-=,*=,/=,%=
将扩展的赋值运算符左边的变量和右边数据值操作后,在赋值给左边的变量;
var a=10;
a += 20;//拿a+20在赋值给a 等价于 a = a+20;
以下为一些举例：
//定义变量a,给赋值10
var a=10;
//将整数10赋值给变量a
document.write("a的值是："+a+"
");
//==比较运算符:结果要么是true/false
//var a == 100; //语法错误
//js弱类型语言:true 就是1 /false就是0
document.write(true+100,"
");
var x=100;
x+=100;//直接等价于 x = x+ 100;
document.write("x的值是:"+x+"
") ;
javascript的关系（比较）运算符
关系运算符:
无论这个符号的连接表达式在怎么复杂,结果都是true/false
<,>,<=,>=,==,!=
注意事项:==不能写成=
以下为一些举例：
//定义了三个变量
var a=3;
var b=4;
var c=5;
document.write((a>b)+"
");
document.write((a<b)+"
");
document.write(((a+b)>(b+c))+"
");
document.write((a<=c)+"
");
document.write((a>=c)+"
");
document.write((a==c)+"
");
document.write((a!=c)+"
");
document.write("
");
//定义两个变量
var m=100;
var n=200;
//定义变量reuslt接收结果值
var result=(m+n); //==,写成=,成赋值了(js不会把报错,var可以定义任何类型)
document.write("结果是："+result);
//java语言:boolean
//int m = 100;
// int n = 200 ;
//boolean result = (m=n);
javascript的逻辑运算符
逻辑运算符的基本符号:
逻辑单与&:并列关系,多个条件同时满足
有0则0(有false则false,有一个满足不成立!)
逻辑单或|:多个条件只要满足一个即可成立
有1则1（有true则true,有一个满足则成立)
逻辑异或^:
相同则为false(0)
不同则为true(1)
逻辑非! :非true则fasle,非fasle则true
偶数个非是它本身
以下为一些举例：
//定义三个变量
var a=3;
var b=4;
var c=5;
//逻辑单与& (有0则0(有false则false)有一个满足则成立)
document.write(((a>b)&(a>c))+"
");//false & false
document.write(((a>b)&(a<c))+"
");//false & true
document.write(((a<b)&(a>c))+"
");//true & false
document.write(((a<b)&(a<c))+"
");//true & true
document.write("
");
//逻辑单或|(有1则1(有true则true)有一个满足则成立)
console.log(((a>b)|(a>c)));//false | false
console.log(((a>b)|(a<c)));//false | true
console.log(((a<b)|(a>c)));//true | false
console.log(((a<b)|(a<c)));//true | true
//逻辑异或^
document.write(((a>b)^(a>c))+"
");//false^false=0(false)
document.write(((a>b)^(a<c))+"
");//false^true=1(true)
document.write(((a<b)^(a>c))+"
");//true^false=1(true)
document.write(((a<b)^(a<c))+"
");//true^true=0(false)
document.write("
") ;
//逻辑非!
document.write(!(a>b)+"
");
document.write(!!(a>b)+"
");
javascript的逻辑双与&&和||
var a=3;
var b=4;
var c=5;
//逻辑双与& (有false则false:和逻辑单与& 一样:共同点
document.write(((a>b)&&(a>c))+"
");//false && false
document.write(((a>b)&&(a<c))+"
");//false && true
document.write(((a<b)&&(a>c))+"
");//true && false
document.write(((a<b)&&(a<c))+"
");//true && true
document.write("
");
//逻辑双或||:有true则true
document.write(((a>b)||(a>c))+"
");//false||false
document.write(((a>b)||(a<c))+"
");//false||true
document.write(((a<b)||(a>c))+"
");//true||false
document.write(((a<b)||(a<c))+"
");//ture||false
document.write("
") ;
//定义两个变量x,y
var x=4;
var y=5;
document.write("x的值是"+x+"
");
document.write("y的值是"+y+"
");
document.write("
");
//逻辑与
//false & false
document.write((((++x)==3) & ((y--)==4)) +"
") ;
document.write("x的值是"+x+"
");
document.write("y的值是"+y+"
");
document.write("
");
var s=4;
var t=5;
//逻辑双与&&具有短路效果:
//左边的表达式如果false,则右边不执行!,可以提供运行效率!
// false || false
document.write((((++s)==3) && ((--t)==4)) +"
") ;
document.write("s的值是"+s+"
");
document.write("t的值是"+t+"
");
document.write("
");
var p=4;
var q=5;
//逻辑双或||:左边的表达式他如果是true,右边不执行!
document.write((((++p)==5) || ((--q)==5)) +"
") ;
document.write("p的值是"+p+"
");
document.write("q的值是"+q+"
");
三元(三目)运算符
带有一定逻辑判断
写法:(表达式)?执行true的结果:执行false的结果;
表达式无论简单还是复杂,结果是boolean类型,true或者false
以下为一些使用案例:
//案例一:有两个变量,比较两个变量的最大值
//定义两个变量
var a = 10 ;
var b = 25 ;
//(表达式)?执行true的结果:执行false的结果;
var max = (a>b)?a:b ;
document.write("两个数据的最大值是:"+max) ;
//案例二:有三个变量,比较三个变量中的最大值
//最常用的方式:采用中间变量的方式去操作
//1)将x和y进行比较,将它的结果给中间变量 temp
var temp = (x>y)?x:y;
//2)将1)步的结果和z进行比较
var max2 = (temp > z)?temp:z;
document.write("max2:"+max2) ;
console.log("max2:"+max2) ;
//案例三:比较两个数据是否相等
var m = 100 ;
var n = 100 ;
//(表达式)?执行true的结果:执行false的结果
//var result = (m==n)?true:false;
//优化
var result = (m==n);
document.write("result:"+result) ;
位运算符
变量与常量
变量:数据在程序执行的过程中其值一直在改变
常量:这个数据本身不会发生改变
进制
二进制
组成规则:
以"0B"开头,由0,1组成
逢二进一
早期使用机械原件的开和关表示数据的"信号"
八进制
组成规则:
以"0"表示开头,由0,1,2,3,4,5,6,7组成
逢八进一
在二进制的基础上,从右到左,每三个比特位为一组,左边不够的补0,最终计算出每一组数的十进制,然后从左到右将计算出的十进制组合起来,形成八进制
举例:
010 100 101
2 4 5 八进制:245
十六进制
组成规则:
以"0X"开头,由0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f组成
逢十六进一
在二进制的基础上,从右到左,每四个比特位为一组,左边不够的补0,最终计算出每一组数的十进制,然后从左到右将计算出的十进制组合起来,形成十六进制
举例:
0000 1010 0101
0 a 5 十六进制:0Xa5
任意进制到十进制的转换
位权展开法
任意进制转换10进制使用位权展开法，是将该x进制的每一位上的数字都乘以x^(该位所对应位数-1）
位权展开法：
系数*基数的权次幂相加
系数：就是每个位上数据的本身
基数：有x进制则基数就是x
权次幂：从右边往左边开始编号，从0开始
数制转换
10进制转换到任意进制，是将十进制数除以该进制的进制数，并重复取余取商的步骤，所得到的商为取到0则继续除以该进制的进制数，最后将所得到的余数按取到的时间顺序反向排列，就能得到该任意进制数。
除基取余，一直到商为0，余数反转
以下为一些举例：
100的二进制转换:
2 | 100
2 | 50 0
2 | 25 0
2 | 12 1
2 | 6 0
2 | 3 0
2 | 1 1
2 | 0 1
转换后结果为:110 0100
100的八进制转换:
8 | 100
8 | 12 4
8 | 1 4
8 | 0 1
转换后的结果为:144
100的十六进制转换:
16 | 100
16 | 6 4
16 | 0 6
转换后的结果为:64
有符号位的数据表示法
正数的原码、反码、补码都相同。
组成：最高符号位+数值位
原码：
最高符号位 数值位
0 0000111
反码：
最高符号位 数值位
0 0000111
补码：
最高符号位 数值位
0 0000111
负数：原码：最高符号位为1
反码：在原码的基础上，符号位不变，数值位按位取反。0——>1 1-->0
补码：在反码的基础上，符号位不变，数值位加一
原码：
最高符号位 数值位
1 0000111
反码：
最高符号位 数值位
1 1111000
补码：
最高符号位 数值位
1 1111001
位运算符
计算机在对数据进行计算的时候,需要将这些数据进行"补码"操作
(原码--反码---补码:有符号的数据表示法)
考虑进制的概念:
进制:就是数据进位一种的方式
位运算符及其规则：
位与& :有0则0
位或| :有1则1
*位异或^:相同则为0,不同则为1
~:反码:全部按位取反,0变1,1变0
js的流程控制语句
顺序结构语句:(最简单) javascript:代码由上而下依次加载
选择结构语句:if/switch
循环结构语句:for/while/do-while
if语句
if语句格式1：
if(表达式){
语句;
}
执行流程:如果表达式成立,则执行语句;否则不执行!
if语句格式2：
场景:针对两种情况判断
if(表达式){
语句1;
}else{
语句2;
}
执行流程:如果表达式成立,则执行语句1,否则,执行语句2。
if语句格式3：
if格式3:应用场景:针对多种情况判断
if(表达式1){
语句1;
}else if(表达式2){
语句2;
...
}else{
//上面都不匹配,执行else中语句
语句n;
}
执行流程:
先判断表达式1是否成立,成立则执行语句1,
如果不成立,继续判断表达式2是否成立,成立,则执行语句2，
如果都不成立,最终执行else中的语句;
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语句结束!
switch语句的注意事项
javascript中的switch
1)switch语句中case语句后面的值可以是常量,也可以是变量!
2)如果case语句中没有携带break语句,就会造成一种现象"case穿透"(灵活运用)
3)switch语句的结束条件: (重点)
1)遇见break结束 (break:跳转控制语句 中断/结束!)
2)程序默认执行到末尾
4)default语句可以在switch中的任何位置,不影响switch的执行流程
如果default在语句中,break不要省略
如果default在语句的末尾,break是可以省略的(建议不要省略!)
for语句
for循环的格式
for(初始化语句;条件判断语句;控制体语句){
循环体语句;
}
执行流程:
1)初始化语句对变量进行初始赋值(执行一次即可)
2)判断条件语句是否成立,如果成立,则执行循环体语句
3)执行控制体语句(步长语句)这个变量自增或者自减
4)判断条件是否成立,成立,继续执行循环体语句,
再次回到3)继续操作....
5)当条件表达式不成立,循环结束!
for语句嵌套
for(初始化语句1;条件表达式1;控制体语句1){
//循环体:for循环
for(初始化语句2;条件表达式2;控制体语句2){
循环体语句;
}
}
while语句
通用格式:
初始化语句;
while(条件表达式){
循环体语句;
控制体语句;(步长语句)
}
执行流程:
1)初始化语句先执行,进行赋值
2)判断条件表达式是否成立,成立,执行循环体语句,执行控制体语句
3)继续回到2)过程...如果条件不成立,结束!
for语句与while语句的区别
1)格式不同
for(初始化语句; 条件表达式;控制体语句){
循环体语句;
}
初始化语句;
while(条件表达式){
循环体语句;
控制体语句;
}
2)内存角度考虑:优先使用for
for循环结束,里面的变量就会从内存中释放掉,节省内存资源
while循环结束,依然能访问这个变量,初始化语句在外面定义的
3)从应用场景:
明确循环次数使用for
不明确循环次数使用while
举例:
键盘录个字符串:给3次机会,判断用户是登录成功
开发中,优先使用for循环
do while语句
初始化语句;
do{
循环体语句;
控制体语句(步长语句);
}while(条件表达式) ;
流程:
初始化语句赋值
执行循环体
控制体语句进行自增或者自减
判断条件是否成立,成立,继续执行循环体,不成立,结束!
while和for,while最大的区别
循环体至少执行一次!
(开发中,用的很少)
底层源码使用多:js前端框架(Jqeury)
后端语言:java语言(面向对象)
集合/后面常用类的方法中见到源码:涉及到do-while
死循环的两种格式
for的死循环：
for(;;){
循环体语句
}
while的死循环：
while(true){
完成逻辑
产生一个随机数
键盘录入数据,
判断数据大了,还是小了
如果相等,退出循环 break ;
}
举例：
//猜数字游戏
//产生一个1-100之间的随机数
var num=(Math.floor(Math.random()*100 +1));
//alert(typeof(num));
//定义统计变量
var count=0;
//当不明确循环次数,都是while循环
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; //中断
}
}
js中定义变量的注意事项
(和Java中定义变量命名规范同理)
javascript定义变量 (命名需要做到见名知意)
注意事项:
1)变量名不能以数字开头
2)变量名不能有空格出现,以及特殊符号
3)不能是关键字 var/true/false...
4)可以是26个英文大小字母(不区分大小写)或者数字
5)可以有_或者$符号,他们可以开头
js的跳转控制语句
break语句
break:中断,结束的意思
不能单独使用
两个场景中使用:
1)switch语句,本身格式就携带break
2)循环语句中使用
for循环嵌套:
break以前的语法:后面可以跟上标签语句
给循环语句的前面起一个名字 名称:for()
break 名称;
举例：
wc:for(var i = 0 ; i < 5 ; i ++){//行数
nc:for(var j = 0 ; j < 5 ; j++){//列数
/* if(j==2){
break nc ; //结束内层循环
} */
if(j==2){
break wc; //结束外层循环
}
document.write("*");
}
document.write("
");
}
continue语句
continue:继续的意思(结束当前循环,立即进入下一次循环)
不能单独用
不能脱离循环语句(loop)中使用!
return语句
return 一般在函数(方法中使用)
return:结束一个函数(方法),或者程序
不能单独用!
js中的函数
函数的作用
引入举例：玩游戏植物大战僵尸,豌豆芽发射炮弹可能需要书写100行代码来完成,每一个关卡都有豌豆芽发射炮弹动作,每一个关卡中都需要是这100行代码，代码冗余大(重复性大),提供代码的复用性,就将100行代码,放在{}里面，并且为{}起名字---函数名(方法名)，以后只要见到豌豆芽发射炮弹,直接去调用这个函数名即可!
函数的命名规范
函数名以及变量名:遵循小驼峰命名法
单个单词:字母全部小写
多个单词:第一个单词全部小写,从第二个单词开始首字母大写,其余小写
函数的定义
在js中定义函数的格式：
function 函数名(参数名1,参数名2,....){
完成的函数的逻辑
return 结果; //返回结果
}
函数的调用
赋值调用:
var 变量名=函数名(实际参数1,实际参数2..)
单独调用：
函数名()；
有返回值的函数的使用
完成函数定义的心里明确:
1)这个函数有没有返回结果;
2)考虑参数的数据类型以及参数个数
函数的命名的注意事项
1)定义函数的时候,形式参数上不能携带var
2)函数定义的格式不能省略{},否则不是一个函数,浏览器中js引擎是无法识别的
3)如果这个函数没有返回结果,那么赋值调用的是undefined(未定义)
4)无论任何语言中,有右括号的地方不能有分号,否则函数是没有"函数体",没有函数体的方法是没有意义的
函数常见问题
函数不调用就不执行
函数与函数之间是平级关系，不能嵌套使用
函数的编写顺序和执行顺序无关
js中的数组
可以存储多个同一种类型元素的一个容器!
在javascript语言中,数组可以存储不同类型的元素,
但是开发中,数组存储的必须为同一类型的元素!
Js中本身就存在一个Array内置数组对象
定义数组的格式
固定格式:
(动态初始化:不给定元素)
var 数组名称 = new Array();//不指定长度
var 数组名称 = new Array(size); //指定数组长度
(静态初始化:给定具体元素)
var 数组名称 = new Array([元素1,元素2,...]);
可以简写为
var 数组名= [元素1,元素2,...];
数组的属性:length (长度)
使用方式：数组名称.length
数组的元素的确定
数组名称[角标值或者索引值]
索引值从0开始,数组的最大索引值=数组长度-1
数组的遍历
//创建一个数组
var arr=new Array(5);//5个长度
//键盘录入5个数据,将这个5个数据放在数组中,进行遍历(遍历数组使用函数改进)
for(var i=0;i<5;i++){
arr[i] = prompt("请输入数组元素:");
//alert(arr[i]);
}
//alert(arr.length);
document.write("调用函数进行遍历:");
//按照 输出 :[元素1, 元素2, 元素3 ....元素n]
//调用下面的函数
printArray(arr);
数组的最值问题
//已知数组,获取数组中的最大值
var arr=[20,13,24,56,44];
//定义一个参照物,认为它就是最大值
var max = arr[0];
//遍历后面角标对应的元素(一一获取)
for(var i=1;i<arr.length;i++){
//判断:如果后面的元素都比max大,参照物arr[0]就不是最大值
if(arr[i]>max){
max=arr[i]; //将后面的元素赋值给max
}
}
document.write("数组中的最大值是:"+max);