javascript基础笔记整理

zmboy 前端 2020-06-23 21:32 756

摘要:JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常Java...

JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

基本特点:

        1、是一种解释性脚本语言(代码不进行预编译

        2、主要用来向HTML标准通用标记语言下的一个应用)页面添加交互行为

        3、可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离 

        4、跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如WindowsLinuxMacAndroidiOS等)

        5、Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地                  方,表达式则可以完成较复杂的信息处理

        6、可以实现web页面的人机交互

那么下面本篇文章将为大家详细介绍javascript的基础知识以及常用事件、流程控制等等基础语法。


timg.jpg

变量

  • 变量定义


    var aaa = 'ccc';
    var是定义变量的关键字
    aaa是变量名称
    ccc是给变量aaa赋的值
  • 变量默认值

    // 如果在定义变量的时候没有赋值,则该变量默认值为:undefined
    var aaa;
    alert(aaa);// 弹出undefined
  • 变量作用域

    // 全局作用域
    <script>
       // 全局生效
    var username = 'admin';
    </script>
    // 局部作用域
    <script>
    function func(){
           // 只在func内部生效
           var username = 'admin';
       }
    </script>

表达式

会产生一个值,一般用在if的条件判断中,如

var num1=10;
var num2 = 6;
if(num1>num2){// num1>num2就是表达式,产生的值是true
   
}
=====================================================
if(num1==num2){// 产生的值是false
   
}


输出/打印


alert("abc");弹出窗体对话框,内容为: abc

console.log('abc');在开发者工具的控制台输出abc;

开发者控制台:按键盘F12,然后选择console

函数

  • 函数定义

    function func(param1,param2,...){
       console.log('abcd');
    }
    function:定义函数的关键字
    func:函数名称
    param1第一个形参,param2第二个形参,.....。形参数量不固定,甚至可以不要参数
  • 函数调用

    // 先定义一个函数
    function func(num1,num2){
       var sum = num1+num2;
       return sum;
    }
    var res = func(1,2);
    alert(res);// 结果为3

流程控制

  • if(){}else{}

    var score=90;
    if(score>60){
       console.log('及格');
    }else{
       console.log('不及格');
    }
  • if(){}else if(){}else{}

    // 这种写法逻辑复杂,实际开发中不建议用
    var score=90;
    if(score<60){
       console.log('不及格');
    }else if(score>60 && score<80){
       console.log('考的不错');
    }else{
       console.log('相当牛X');
    }
  • switch case


    // 语法丑陋,建议不是万不得已,尽量不要用
    var day=1;
    var week;
    switch(day){
       case 1:
           week="星期一";
           break;
       case 2:
           week="星期二";
           break;
       case 3:
           week="星期三";
           break;
       case 4:
           week="星期四";
           break;
       case 5:
           week="星期五";
           break;
       case 6:
           week="星期六";
           break;
       case 7:
           week="星期日";
    }
    console.log(week);

循环

  • for循环

    语法: `for (初始化; 循环条件; 更新条件){循环体}`
    例如: `for (var i = 0; i < 100; i++){...}`
    适用场景:
     1、循环次数已知
     2、被循环处理的对象数量是固定的
     
    // 循环次数已知
    for (var i = 0; i < 10; i++) {
       // 查看循环的过程
       console.log('i='+i);
    }

    //被循环处理的对象确定,例如数组
    var arr = ['html','css','javascript','php','mysql','java'];
    for (var i = 0; i < arr.length; i++) {
       // 打印arr数组中的每一个元素
       console.log(arr[i]);
    }
  • while循环

    // while (条件) {...}
    var i=0;
    while (i < 10) {
       console.log('循环体执行了'+ (i+1) + '次');
       sum = sum + i;
       i++;    // 更新条件(必须,否则i永远小于10。死循环)
    }
  • do{}while()循环

    var sum = 0;
    var i = 0;  // 初始条件
    // while()中只需要保留循环条件即可
    do {
       console.log('循环体执行了'+ (i+1) + '次');
       sum = sum + i;
       i++;    // 更新条件
    } while (i < 10);   // 出口判断,只要为true,则继续
    console.log('累加结果:'+sum);

break / continue语句

  • break:退出循环,循环终止。

  • continue:仅结束本次循环,循环继续执行

// break;
for (var i = 0; i < 10; i++) {
 // 当 i等于5时,退出循环
 if (i==5) {
     break;
 }
 console.log(i);
}
// 输出: 1,2,3,4
************************************************
   
// continue
for (var i = 0; i < 10; i++) {
 // 当 i等于5时,结束本次循环进入下一轮,即跳过数字5
 if (i==5){
     continue;
 }
 console.log(i);
}
// 输出: 1,2,3,4,6,7,8,9


字符串转整型

  • parseInt();

    var num = '123';
    var res = parseInt(num);// 转换成功,res等于123。

    var num2 = 'abc';
    var res2 = parseINt(num2);// 转换失败,res是NaN
    可以通过isNaN()函数判断是否转换成功,如果isNaN返回true,表示转换失败,isNaN返回false,表示转换成功
  • isNaN();

    var num2 = 'abc';
    var res2 = parseINt(num2);// 转换失败,res是NaN
    console.log(isNaN(res2));// 输出true

数组

不要自定义数组下标,否则会影响数组长度的计算

var arr=[1,2,5];
arr[8] = "asdfa"; // 这样给数组加一个元素,不报错,但是数据长度有问题,加一个元素后,应该有4个元素,但alert出来的是9个
alert(arr.length);
for(i=0;i<arr.length;i++){
console.log(arr[i]);
}


栈方法

  • array.push();

    往数组尾部添加一个元素
    var arr = ['a','b','c'];
    arr.push('d');
    console.log(arr);// 输出["a", "b", "c", "d"]
  • array.pop();

    从数组尾部弹出一个元素
    var arr = ['a','b','c'];
    var res = arr.pop();
    console.log(res); // 输出c
    console.log(arr); // 输出["a", "b"]

队列方法

  • array.shift();

    // 头部获取,并删除第一个元素
    var arr = ['a','b','c'];
    var res = arr.shift();
    console.log(res); // 输出a
    console.log(arr); // 输出["b", "c"]
  • array.unshift();

    // 头部添加,并返回新的长度
    var arr = ['a','b','c'];
    arr.unshift('ee');
    console.log(arr); // 输出["ee", "a", "b", "c"]
  • array.splice(index,howmany);

    // 删除数组中的元素,index:从哪里开始删,howmany:删多少个元素
    var arr = ['a','b','c','d'];
    arr.splice(1,2);
    console.log(arr); // 输出:["a","d"]

位置方法

  • array.indexOf(searchvalue,fromindex) 注意indexOf里的O是大写

    // 查找某个元素在数组中的下标。searchvalue:要查找的元素,fromindex:从哪里开始搜索
    var arr = ['a','b','c','d','e','f'];
    var res = arr.indexOf('c',0);// 从0下标开始搜索c的位置
    console.log(res); // 输出2

页面跳转

  • window.location.href

    // 页面跳转
    window.location.href = 'http://www.php.cn';
    页面将跳转到php中文网首页
  • window.location.open();

    // 打开一个新窗口,新版本chrome浏览器默认会拦截该行为,可以设置为允许打开解除拦截
    window.location.open('http://www.php.cn');
    会打开一个新窗口,并打开php中文网首页

常用事件

  • mouseover

    鼠标移动到元素上触发该事件
    <div onmouseover='func()'>www.php.cn</div>
    <script>
    function func(){
           console.log('鼠标移上来了');
       }
    </script>
  • mouseleave

    鼠标从元素上移走后触发该事件
    <div onmouseleave='func()'>www.php.cn</div>
    <script>
    function func(){
           console.log('鼠标移走了');
       }
    </script>
  • onblur

    元素失去焦点时触发该事件,主要用于<input>元素,div p元素因为没有焦点,所以没有该事件
    <input type="text" id="email" onblur="chk()" />
    <script>
    function chk(){
           var email = document.getElementById('email').value;
           if(email==''){
               console.log('请输入邮箱');
           }else{
               ...
           }
       }
    </script>
  • onchange


    当元素的值发生改变时触发该事件
    <select id="province" onchange="chk()">
       <option value="anhui">安徽</option>
       <option value="beijing">北京</option>
       <option value="shanghai">上海</option>
    </select>
    <script>
    function chk(){
           var province = document.getElementById('province').value;
           console.log('当前选择的是'+province);
       }
    </script>


对象的创建

  • var obj = new Object();

  • var obj2 = {};

var obj = {
   table:'',
   find:function(){
       return this.table;
   },
   where:function(){
       table = 'abc';
       return this;
   }
};

var obj2 = obj;
obj2.table='adfasfasdfafafdsa';

var res = obj.where().find();
alert(res);

定时器

  • setTimeout(function(){},n) 多少秒后执行一次参数中的匿名函数,仅执行一次

    // 2秒后执行一次打印
    setTimeout(function(){
       console.log('输出一次');
    },2000);// 单位是毫秒,2000毫秒等于2秒
  • setInterval(function(){},n); 每隔多少秒执行一次参数中的匿名函数,定时重复执行

    // 每1秒打印一次
    setInterval(function(){
       console.log('重复输出');
    },1000);
  • clearInterval(); 清除由setInterval函数设置的定时器

    var i=0;
    var timer = setInterval(function(){
       console.log('重复输出');
       i++;
       // 输出10次后,清除定时器
       if(i>10){
           clearInterval(timer);
       }
    },1000);


注意:

网络上以及一些教学视频中的js代码,习惯不写结尾的分号,建议大家千万不要图省事就不写。一定要规规矩矩的在结尾写上分号。否则在稍微规范一点的公司,代码上线时,运维会压缩css、js文件后再上传服务器。如果不写分号,很多的没有分号的语句会被连接到一起,代码就无法工作了。例如:

// 开发中的代码
function myfunc(){
   var num1=3
   var num2 = 5
   var sum = num1 + num2
   return sum
}
// 调用myfunc1
var res = myfunc()
console.log(res)// 工作正常,输出8

// 运维上前前,会压缩代码,压缩后的代码可能是这样的
function myfunc(){var num1=3var num2=5var sum=num1+num2return sum}var res=myfunc()console.log(res)
// 这段代码无法运行
如果压缩工具比较智能的话,是可以自动给我们的代码加分号。为了保险起见,强烈建议在语句结尾加分号

本篇文档由 zmboy 从日常学习中精心整理而出,有任何疑问均可留言评论,转载请以超链接形式注明出处!

相关推荐

评论列表
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~
关闭

用微信“扫一扫”