第一天总结
java script是运行在浏览器端的解释型弱类型,面向对象的脚本语言。 使用方法分为两种:
1.
//js
</scrpt>
//js
</scrpt>
2.外部引入:
<script src="js路径"> </script>
3.输出方式
a.控制台输出/打桩输出:console.log(js代码);
b.页面输出document.write;
c.弹出框输出alert();
4.变量创建:
var 变量名=值;
注意:1.不能数字开头,驼峰命名法,做到见名知意。
2.可以只创建不赋值,默认值为undefined。
3.查看数据类型:typeod()。
4.多个变量连续创建var 变量名=变量值,var 变量名=变量值...
5.运算符:
a.算术运算符:"+"、"-"、"*"、"/"、"%"
b.比较运算符:">"、"<"、"=="、"!="、">="、"<="、"==="、"!=="
特殊:1.如果参与比较运算的左右两边都是字符,则会按位pk每个字符的16进制Unicode号(十进制Ascll码)。
2.NaN参与任何的比较运算结果都是false,则判断一个数是不是NaN,通常采用以下方法:!isNaN(x)结果是一个布尔值:true->说明不是NaN,如果返回false->说明是NaN。
3.undefined==null->true
解决:全等。
c.逻辑运算符:
1.&&与(且)
全部为真才为真。
2.||或(或者)
全部为假则为假
3.!(非)颠倒布尔值
d自增/自减:
++ --
i++ -> i+=1 返回当前值,后自增
++i 自增,返回新值
e位运算
m>>n
f用户输入框:
var 变量名=prompt("")
第二天总结
分支结构 网页一般分为三种结构:1.顺序结构 2.分支结构 3.循环结构
1.if...else:
a.if(条件){ 操作 } b.if(条件){ 操作; }else{ 默认操作; } c.if(条件1){ 操作1; }else if(条件2){ 操作2; }else{ 默认操作; }
2.switch...case 分支:
switch(变量/表达式){
case 值1:
操作1;
break;
case 值2:
操作2;
break;
default;
默认操作;
}
面试题:if vs switch的区别?
1.switch...case:优点:执行效率高,速度快(等值比较)
缺点:必须要知道最后的结果是什么才可以使用
2.if...else:优点:可以做范围判断,执行效率较慢
建议:代码开发完后,要做代码优化,要尽量少用if...else,多用switch...case和三目运算。
3.三目运算
1.条件?操作:默认操作;
2.条件1?操作:条件2?操作:条件3?操作;
4.强制类型转换
1.转字符串:2种方法
1. var str=x.tostring();
2. var str=string(x);
2.转数字:
1.parseInt(str/num)用于将字符串转为整数,不认识小数点。
2.parseFloat(str)用于将字符串转为小数,认识小数点。
3.转布尔:
只有6个false:0,"",undefined,NaN,null,false。
第三天总结
1.循环结构:反复执行相同或相似操作;
要素:1.循环条件 2.循环体 3.循环变量
2.三种循环:
1.while循环
var 循环变量=变量名
while(循环条件){
循环体;
循环变量变化;
}
死循环: while(true){}
2.for循环
for(var 循环变量;循环条件;循环变量变化){
循环体;
}
死循环for(;;){}
区别:不确定循环次数时,会使用while死循环,确定循环次数时,则一般使用for循环。
3.do while循环
var 循环变量=变量值;
do{
循环体;
循环变量变化;
}while(循环条件)
3.面试题:while和do..while的区别?
第一次条件不满足,while一次都不执行,do...while至少会执行一次
第四天总结
1.fuction基础
1.结构
function函数名(){ 函数体; } 函数创建后,不能立即执行,需要调用才能生效。
2.调用函数
函数名();
绑定事件:
<elem onclick="函数名()"></elem>
3.带有形参的函数
function函数名(形参,...){
函数体;
}
4.传实参:
函数名(实参,...){
第四天知识点
1.自定义函数function
1.创建:2种
1.声明式:
function 函数名(形参){
函数体;
return;
}
2.直接量式:
var 函数名=function(形参){
函数体;
return;
}
2.调用:
var 接住返回结果=函数名(实参){
}
注意:就算省略return,默认也有return个undefined。
3.作用域:2种
1.全局作用域:在页面的任何一个位置都可以使用
2.函数作用域:局部变量和局部函数
3.变量的使用规则:优先使用局部的,局部没有找全局,全局没有就报错。
4.特殊点:
1.不要在函数中对着未声明的变量直接赋值,会造成全局污染:全局本身没有这个东西,会直接将赋值的变量作用于全局。
2.局部可以只用全局,全局不可以使用局部
5.声明提前:
一般只会出现在笔试题,规则:在程序执行前,var声明的变量(轻)和function声明的函数(重),会提前在函数当前作用域顶部,但赋值留在原地。
6.重载:
相同的函数名,根据传入实参不同,自行选择对应函数去执行,js不支持,会自动覆盖前面的。解决:在函数内部自带arguments(类数组对象)。使用:1.通过下表去获取传入的实参。2.通过arguments.length判断传入实参数量的不同,内部写一个判断语句,变现实行重载。
2.数组:
1.创建数组:两种
1.直接量方式:var arr=[];
2.构造函数方式:var arr=new Array();
2.获取数组元素:
arr[i];
3.添加/替换元素:
arr[i]=新数据;
4.数组三不限制:
1.不限制元素类型。
2.不限制元素长度。
3.不现在下标越界。
注意:下标越界会返回undefined,如果遍历数组下标越界,会返回一个稀疏数组。
5.固定套路:
1.向末尾添加元素:
arr[arr.length]=新数据;
2.获取倒数第n个元素:
arr[arr.length-n];
3.缩容:arr.length-=n;
6.遍历数组:
for(var i=0;i<arr.length;i++){
arr[i];
}
第五天总结:
1.DOM:Document Object Model:文档对象模型;
2.DOM树概念:DOM树根
3.查找元素:两大方面:
1.直接通过html查找:
1.通过ID查找元素:
var elem=document.getElementByID("ID");
2.通过标签名查找元素:
var elems=document/已经找到的父元素.getElemByTagName(标签名);
3.通过class查找元素:
var elems=document/已经找到的父元素.getElemByClassName(标签名);
注意:JS只能操作元素,不能操作集合。
2.通过关系获取:前提必须先找到一个元素才可以使用关系
1.父元素:elem.parentNode:单个元素;
2.子元素:elem.children:集合;
3.第一个子元素:elem.firstElementchild:单个元素;
4.最后一个子元素:elem.lastElementchild:单个元素;
5.前一个兄弟:elem.previousElementSibling:单个元素;
6.后一个兄弟:elem.lastElementSibling:单个元素;
操作元素:
1.内容:
1.elem.innerHTML-获取和设置开始标签到结束标签之间的内容,支持识别标签。
获取:elem.innerHTML;
设置:elem.innerHTML="新内容";
2.elem.innerText获取纯文本,不识别标签
获取:elem.innerText;
设置:elem.innerText="新内容";
2.属性:
获取属性值:elem.getAttribute("属性名");
设置属性值:elem.setAttribute("属性名","属性值");
简化版:
获取属性值:elem.属性名;
设置属性值:elem.属性名="属性值";
缺点:clss必须写为className,因为在Es6版本class变成了一个关键字。
获取input.value;
设置input.value="新内容";
3.样式:
获取:elem.style.css属性名;
设置:elem.style.css属性名="属性值";
4.绑定事件:
elem.on事件名=function(){
操作;
关键字this 这个