JS基础1

js基础

  <script type="text/javascript"></script>

---

一、变量

1. 变量的声明

变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。

var a=12;

声明一个变量a，指定为整形

拓展: 解释性的语言都是弱类型的，类型的不同实际上是分配的空间不同,类型的本质是内存单元,相当于一张Excel（单元格->字长（62位，32位）,坐标->地址，指针）。

内存分为堆和栈 区分：堆（相当于仓库，放大的，比如字符串类型） 栈（相当于柜子，有格子，放小的，比如整型）

例子中的a是一个变量，存储在变量区中，相当于是一个向导（目录），可以再赋为字符串类型的hello，也就是另辟空间放到堆里，但是不建议这么做，a的本质变了

var b=12;

已声明过a=12，假如12的地址为f8，那b也指向f8，只用于变量，不用于对象

2. 变量的类型

• number
• string
• boolean
• object o=[];数组是一种对象
• undefined u=undefined 就一种，没找到值
• null

测定类型变量的方法：

u=undefined;
console.log(typeof u);

相等判断

console.log(''==false);//结果为true，0 null undefined '' false都是false

var obj;  //如果obj是false的话走else
if(obj){

}

var s1='hello';
var s2=new String('hello');
console.log(s1===s2);//不等，对象和字符串
//对象才有属性  s1.length将s1转换为对象，最好自己转

---

二、运算符

1. 算数运算符 +  -  *  /  %  ++  –

区分一下/(除)和%（取余）

  var sec=10000;
  var hou=parseInt(sec/3600);//小时
  var min=parseInt((sec%3600)/60);//除去小时余下的秒数再算分
  var ssec=sec%60;
  console.log(hou+":"+min+":"+ssec);

2. 关系运算符 != == ===

关系运算符结果都是boolean

①==   值相等就行

②=== 严格比较，不止比较值，还比较类型（比较地址），最好用===

3. 逻辑运算符 &&(与) ||（或） !（非）

  var name='tom';
  name=name||'admin';//如果name为true就附为name的值，后面的不执行，否则附为“admin”
  name&&console.log(name);//如果name为false就什么也不执行否则输入name的值

---

三、连接符

  var a=12,b=13;
  console.log(`a=${a},b=${b}`);
  
  console.log(hou+":"+min+":"+ssec);//这种最好不要用

---

四、js弹出对话框

①alert();

通常用于调试，上市产品不能存在，实际为window.alert()；

alert是一个函数，函数的特征是（）

②prompt();

  var res=prompt('1+1=?','请输入结果');

---

五、条件判断语句

  var num=prompt('请输入周几',1);
  switch (num){
      //num等于1或2都显示it,break跳出switch语句
    case '1':
    case '2':
      alert('it');
      break;
    case '3':
    case '4':
    case '5':
      alert('chinese');
      break;
    default:
  }

---

六、循环控制语句
while只知结果，不知次数，而for清楚知道循环次数

1. for循环

  //循环体没有作用域,变量为全局变量
  for (var i=1;i<=100;i++){
    console.log(i);
    var flag=false;
    if(i>=50){
      flag=true;
      //直接跳出循环
      break;
      //可以用在1-100中找到一个水仙花数
    }
  }
  console.log(i);   //i此时是一个全局变量,i=50
  if(flag){
      //如果flag为true，则程序被中断过
  }

2. while循环

  var popu=14;//人口总数
  var year=0; //年会
  while(popu<=15){
    year++;//年会会多加一次
    popu=popu*(1+0.01);
  }
//可以写为：
  while(true){//只要popu小于等于15就一直执行while循环
    popu=popu*(1+0.01);
    if(popu>15){
      break;
    }
    year++;
  }
  console.log(year);

  var i=100;//先执行再判断
  do{
    console.log(i);
    i--;
  }while(i);//i为0就不执行了

例子：查找水仙花数

  水仙花数查询
  <br>
  请输入范围:<input type="text" id="firNum">到<input type="text" id="endNum">
  <br>
  &nbsp;<div id="div_result"></div>&nbsp;
  <br>
  <button id="btn">查询</button>
  <script type="text/javascript">    
  var btn=document.querySelector("#btn");
  btn.onclick=function () {
    var firNum = document.querySelector('#firNum').value;//用户输入起始查询数
    var endNum = document.querySelector('#endNum').value;//用户查询末尾查询数
    var result = [];
    for (var j = firNum; j <= endNum; j++) {
      var g=j%10;               //个位数
      var s=parseInt(j%100/10); //十位数
      var b=parseInt(j/100);    //百位数
      if(g*g*g+s*s*s+b*b*b===j){//如果个十百的三次方相加等于本身则为水仙花数
        result.push(j);
      }
    }
    document.querySelector('#div_result').innerHTML = result;
  }
  </script>

4. 多重循环控制语句

  for (var i=2;i<=100;i++){
    if(i%2==0){
      //结束本次循环，不执行console.log(i);继续走i，但是break连i都不走了
      continue;//可用于找素数
    }
    console.log(i);
  }

例子：查找素数

  <input type="text" id="firNum">和<input type="text" id="endNum">之间的的素数有哪些？
  <br>
  &nbsp;<div id="div_result"></div>&nbsp;
  <br>
  <button id="btn">查询</button>
  <script type="text/javascript">
  var btn=document.querySelector("#btn");
  btn.onclick=function () {
    var firNum = document.querySelector('#firNum').value;//用户输入起始查询数
    var endNum = document.querySelector('#endNum').value;//用户查询末尾查询数
    var result = [];                        //查询结果
    for (var j = firNum; j <= endNum; j++) {
      for (var i = 2; i <= j / 2; i++) {    //如果0-数值的一半都没有除数，如果没有肯定是素数
        if (j % i == 0) {                    //如果余数为0则可以整除，跳出循环
          break;
        }
      }
      if (i > j / 2) {                        //如果大于数值的一半还不能整除就判定为素数
        result.push(j);
      } else {
      }
    }
    document.querySelector('#div_result').innerHTML = result;
  }
  </script>

---

七、函数

  function _add(m,n) {
  var c=m+n;//函数一旦执行完，c就被回收
  return c; 
  }
  var res=_add(10,20);
  var res=window._add(100,200);

function 定义函数的关键字,add 定义函数的函数名,m,n形参 形参没有类型,return 返回值：跳出函数体

1. 类型转换函数

• parseInt(“字符串”)
• parseFloat(“字符串”)
• isNaN() 用于检查其参数是否为数字，cons.log(NaN==NaN)结果不等

2. arguments伪数组:js没有重载，用arguments存储个数不同的参数

  function _add() {
    var total=0;
    for(var i=0;i<arguments.length;i++){
      total=total+arguments[i];//伪数组
    }
    return total;
  }
  var res=_add(10,20);//10->argument[0]->m
  console.log(res);

3. 参数表达式

  var sub_number=function () {   }

4. 按钮点击事件

注意：函数名后面没有括号，说明这是一条“注册”语句

  //1.找到按钮对象
  var btn=document.querySelector('#btn_click');
  //2.定义点击按钮的行为
  function  display() {
    alert('this is a  button');
  }
  //3.定义事件
  btn.onclick=display；//把函数的地址给出去
  
  /*btn.onclick=function () {
    //alert('this is a  button');
    this.value='点击我...'
  }*/

5. 作用域：变量可以起作用的范围

   ⑴闭包：可以访问函数上一层的作用域（父函数访问内嵌函数的变量用到闭包）

  var add = (function () {//全局
      var counter = 0;
      return function () {//局部
        return counter += 1;
      }
  })();
  var a=function();
  add();
  var b

6. 全局变量和局部变量

  var num=100;
  function  run(){
    num=200;
  }
  run();
  console.log(num);//结果为200
  
  var num=100;

  function  run(){
     var num=200;
  }

  run();
  console.log(num);//结果为100，先在自己的里面找，没有再在全局找

声明提升

  var num=100;
  function  run(){
    //声明提升 变量,函数都可以声明提升
    num=200;
    var num=300;
    //等价于var num;num=200;num=300;
  }
  run();
  console.log(num);//结果为100

以下代码的运行结果是什么：a=undefined,b=9

var a = 18;
fun1();
function fun1(){
    var b = 9;
    console.log(a);
    console.log(b);
    var a = '123';
 //a声明提升，相当于
    var a；
    conso.log(a;)
    a='123';
}

---

八、数组
访问数据是用下标表示的，修改时候用下标

1. 数组的声明和增加数值

  var arr=[1,2.3,'hello',true];
  var arr2=new Array();//数组是object类,一定配合循环联系着用
  for(var i=0;i<10;i++){
    arr[i]=10;
  }
  arr2.push(11);
  arr2.push(12);

例子：彩票兑奖

<div>
  请输入7位数
  <input type="text" id="txt_number1">
  <input type="text" id="txt_number2">
  <input type="text" id="txt_number3">
  <input type="text" id="txt_number4">
  <input type="text" id="txt_number5">
  <input type="text" id="txt_number6">
  <input type="text" id="txt_number7">
  <br>
  <button id="btn_score">开始兑奖</button>
  <div id="div_result"></div>
</div>
<script type="text/javascript">
  var win=[];
  for(var i=0;i<7;i++){
     var num=parseInt(Math.random()*10);
    win.push(num);
  }
  console.log(win);
  var arr=[];
  var btn=document.querySelector("#btn_score");
  btn.onclick=function () {
    var inputs=document.querySelectorAll('[type="text"]');
    for(var i=0;i<inputs.length;i++){
      arr.push(inputs[i].value);
    }
    var temp=1;
    for(var j=0;j<7;j++){
      if(arr[j]!=win[j]){
        temp=0;
      }
    }
    if(temp){
      document.querySelector("#btn_score").innerHTML='恭喜你，中奖了';
    }else{
      document.querySelector("#btn_score").innerHTML='谢谢惠顾';
    }
  }
  /*var arr=[1,2.3,'hello',true];
  var arr2=new Array();//数组是object类,一定配合循环联系着用
  for(var i=0;i<10;i++){
    arr[i]=10;
  }
  arr2.push(11);
  arr2.push(12);*/
</script>

2. 数组的简单遍历

  var arr01=[1,3,5,7,9,11,11,13,15,17,19];
  // for in
  for(var index in arr01){   //得到索引
    console.log(index); //适合做集合的遍历
    console.log(arr01[index]);
  }
  // for of
  for(var item of arr01){   //得到数组元素
    console.log(index); //适合做循环的遍历
    item=item*3;//item没有赋值给数组
  }

3. slice,splice,indexOf

  var new_arr=arr01.slice(0,3);

截取前三个

  var new_arr02=arr01.splice(5,3,'a','b','c','d','e');

从第五个开始找三个截取并把原数组中的数删掉,并添加abcde

  var i=arr01.indexOf(11);

如果存在元素则返回元素的位置，否则返回-1

4. 数组去重

  var new_arr=[];
  for(var item of arr01){//1
    if(new_arr.indexOf(item)==-1){//把重复的去掉
      new_arr.push(item);
    }
  }
  for(var i=0;i<=arr01.length;i++){//2
    for(var j=i+1;j<=arr01.length;j++){
      if(arr01[i]==arr01[j]){
        arr01.splice(j,1);
        console.log(j);
      }
    }
  }
  console.log(new_arr);
  console.log(arr01);

九、字符串

  var str='my name is "tom"';
  var str_obj=new String('hell string');

  console.log(typeof str);    //string
  console.log(typeof str_obj);//object

  var s1='hello';
  var s2='world';
  console.log(s1 + s2);
  var s3=s1.concat(s2);
  console.log(`s3=${s3}`);

  var index=s1.indexOf('hello',3);

  var new_s1=s1.substr(6,5);//world

  var date='2108-07-01';
  var arr=date.split('-');//切割
  s1.toUpperCase();

demo：判断图片类型

  var file='user.png.jpg';
  var arr=file.split('.');
  var file_type=arr[arr.length-1];

  var file_type_2=file.split('.').pop();

demo:判断字符串是否是邮箱

  var email='lzhang@163.com';
  var index_at=email.indexOf('@');
  var index_point=email.lastIndexOf('.');
  if(index_at>0&&index_point-index_at>1&&index_point<email.length-2){

  }