java script 第一周知识点总结

156 阅读6分钟

第一天总结

java script是运行在浏览器端的解释型弱类型,面向对象的脚本语言。 使用方法分为两种:

1.
  //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(变量/表达式){
   case1:
   操作1;
   break;
   case2:
   操作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.转布尔:

只有6false: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 这个