VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > JavaScript >
  • JavaScript教程之web前端篇:JavaScript基础篇(易懂小

详细内容:

0.JavaScript的引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--行内js-->
    <p id="" class="" style="" onclick="console.log(2);">mjj</p>
<!--内嵌-->
<script type="text/javascript">

    //js代码


</script>
    <script type="text/javascript" src="js/index.js"></script>

</body>
</html>

1.第一个JavaScript

1.alert语句

  • 用途:弹出警告框。

        <script>
            alert('你好')
        </script>

2.注释:

  • JavaScript对换行,缩进,空格不敏感。

  • 单行注释(ctrl +/)

    //我是单行注释
  • 多行注释(ctrl+shift+/)

    /*
    多行注释1
    多行注释2
    */

3.console.log('')

  • 控制台输出。

        <script>
            console.log('hello world!');
        </script>

4.prompt()语句

  • 弹出能够让用户输入的对话框

        <script>
            prompt('今天天气如何?')
        </script>

  • prompt()语句中,用户不管输入什么内容,都是字符串。

  • alert和prompt的区别

    alert('今天天气如何?');//直接使用,不需要变量
    var a = prompt("请输入一个数字");//必须用一个变量,来接收用户输入值

2.变量

1.变量的定义

  • var是英语“variant”变量的缩写。后面要加一个空格,空格后面的东西就是“变量名”。
    • 定义变量:var就是一个关键字,用来定义变量。所谓关键字,就是有特殊功能的小词语。关键字后面一定要有空格隔开。
    • 变量的赋值:等号表示赋值,将等号右边的值,赋给左边的变量。
    • 变量名:我们可以给变量任意的取名字。

2.变量的写法:

var a = 100;
console.log(a);//输出100

3.变量命名规范:

  • 变量名有命名规范:只能由英语字母、数字、下划线、美元符号$构成,且不能以数字开头,并且不能是JavaScript保留字,如下:

    abstract、boolean、byte、char、classconstdebuggerdoubleenumexportextendsfinalfloatgoto
    implementsimportintinterfacelongnativepackageprivateprotectedpublicshortstaticsupersynchronizedthrowstransientvolatile

3.变量的类型

1.数值型:number

<script>
    var a= 100;
console.log(typeof a);
</script>
//number
  • 通过typeof()表示“获取变量的类型”,语法:typeof 变量

2.字符串型:string

    <script>
        var a = "abcde";
        var c= '1234';
        var d = '哈哈';
        var e = '';   //空字符串
        
        console.log(typeof a);//string
        console.log(typeof c);//string
        console.log(typeof d);//string
        console.log(typeof e);//string

    </script>

3.Boolean布尔值

  • 为JS中的Boolean的值也只有2中:true和false。他们通常被用于在适当的代码之后,测试条件是否成立,比如 3 > 4。这是个表达式,我们都知道3是不会大于4的,所以返回了false。

    3>4;//false
    4>=3;//true

4.字符串拼接

  • 通过+拼接:

    <script>
    console.log('我'+"爱"+"吃"+"饭")
    </script>
    //我爱吃饭
  • 通过$和tab上面键拼接

        <script>
            var name = 'jk' , age = 20;
            var str = `${name}今年是${age}岁数了`;
            console.log(str);
        </script>
    //jk今年是20岁数了

5.数学运算符

  • Javascript有一套可用的全功能的数学功能,接下来我们就重点来学习Javascript中的数学运算吧。

  • 算数运算符

运算符 名称 作用 示例
+ 加法 两个数相加。 6 + 9
- 减法 从左边减去右边的数。 20 - 15
* 乘法 两个数相乘。 3 * 7
/ 除法 用右边的数除左边的数 10 / 5
% 求余(有时候也叫取模) 在你将左边的数分成同右边数字相同的若干整数部分后,返回剩下的余数 8 % 3(返回 2,将8分成3份,余下2 。)
5 + 4 * 3;
num % 8 *num;
  • 运算符优先级

  • Javascript中的运算符优先级与数学运算符优先级相同—乘法和除法总是先完成,然后再算加法和减法。

  • 递增和递减运算

    • 增量(++)或递减(--)
    var x = 3;
    x++;//相当于x = x + 1
    • 常见如下:
运算符 名称 作用 示例 等价于
+= 递增赋值 右边的数值加上左边的变量,然后再返回新的变量。 x = 3;x += 4; x = 3;x = x + 4;
-= 递减赋值 左边的变量减去右边的数值,然后再返回新的变量。 x = 6;x -= 3; x = 6;x = x - 3;
*= 乘法赋值 左边的变量乘以右边的数值,然后再返回新的变量。 x = 2;x *= 3; x = 2;x = x * 3;
/= 除法赋值 左边的变量除以右边的数值,然后再返回新的变量。 x = 10;x /= 5; x = 10;x = x / 5;
//第一题:
<script>
        var a = 4;
    var c = a ++;
    console.log(c);//4
    console.log(a);//5
</script>
//先让a的值赋值给c,再对a++

//第二题:
<script>
    var a = 4;
    var c = ++a;
    console.log(c);//5
    console.log(a);//5
</script>
//想让a加法运算,再将a赋值给c

//第三题:
<script>
    var a = 2;
    var b = '2';
    console.log(a == b);//true
    console.log(a === b); //false
</script>
//== 比较的是值 console自动将a转换字符串进行比较,===比较是值和数据类型。

6.数字和字符串之间的转换

  • 数字转字符串

    <script>
        var myNum = "" +234;
        console.log(typeof myNum);
    </script>
    //string
    var myNum = 123;
    var myStr = myNum.toString();
    
    var num  = 1233.006;
    // 强制类型转换
    console.log(String(num));
    console.log(num.toString());
    // 隐式转换
    console.log(''.concat(num));
    // toFixed()方法会按照指定的小数位返回数值的字符串 四舍五入
    console.log(num.toFixed(2));
  • 字符串转数字

    <script>
        var myStr = '123';
        var myNum = Number(myStr);
        console.log(typeof myNum);
    </script>
    //number
    
    var str = '123.0000111';
    console.log(parseInt(str));//123
    console.log(typeof parseInt(str));//number
    console.log(parseFloat(str));//123.0000111
    console.log(typeof parseFloat(str));//number
    console.log(Number(str));//123.0000111

4.数组

1.数组的创建

var shop = ['apple','milk','banana','orange']

2.访问和修改数组

shop[0];//访问数组
shop[0] = 'pen'

3.获取数组长度

shop.length;

5.条件语句

1.if...else语句

  • 语法:

    if (判断条件) {
      //结果1
    }else{
        //结果2
    }
    • 关键字 if,并且后面跟随括号。
    • 测试的条件,放到括号里。这个条件会利用比较运算符进行比较,并且返回true或者false。
    • 一组花括号,在里面我们有一些代码——可以是任何我们喜欢的代码,并且只会在条件语句返回true的时候运行
    • 关键字else
    • 另一组花括号,在里面我们有一些代码——可以是任何我们喜欢的代码,并且当条件语句返回值不是true的话,它才会运行。

2.else...if语句

  • 上述例子提供我们两种选择或结果,但我们如果想要多个选择和结果可以用else if.
var weather = 'sunny';
if(weather == 'sunny'){
    //天气非常棒,可以出去玩耍了
}else if(weather == 'rainy'){
    //天气下雨了,只能在家里呆着
}else if(weather == 'snowing'){
    //天气下雪了,可以出去滑雪了
}

3.if ...else的嵌套

var weather = 'sunny';
if(weather == 'sunny'){
    if(temperature > 30){
        //还是在家里吹空调吧
    }else if(temperature<=30){
        //天气非常棒,可以出去玩耍了
    }
}

4.逻辑运算符:&&,||,!

  • && — 逻辑与; 使得并列两个或者更多的表达式成为可能,只有当这些表达式每一个都返回true时,整个表达式才会返回true.
  • || — 逻辑或; 当两个或者更多表达式当中的任何一个返回 true 则整个表达式将会返回 true.
  • ! — 逻辑非; 对一个布尔值取反, 非true返回false,非false返回true。
var mathScore = 88;
var enlishScore = 90;
if(mathScore > 70 || enlishScore > 95){
    console.log('才可以玩游戏');
}else{
    console.log('在家里写作业');
}

5.switch语句

var weather = 'sunny';
switch(weather){
    case 'sunny':
        //天气非常棒,可以出去玩耍了
        break;
    case 'rainy':
       //天气下雨了,只能在家里呆着
        break;
    case 'snowing':
        //天气下雪了,可以出去滑雪了
        break;
    default:
        //哪里也不出去
}

6.三元运算符

  • 三元运算符它解决了像if..else块较少的代码。如果你只有两个通过true/false条件选择。
(codition) ? run this code : run this code instead;
<script>
    var a = '';
    (1 > 2)? a='真的' : a='假的';
    console.log(a)

</script>
//假的

7.循环

1.for循环

  • Javascript的循环有两种,一种是for循环,通过初始化条件结束条件递增条件来循环执行语句块,语法如下:
for (初始化条件;结束条件;递增条件){
    run this code
}
  • 示例:

        <script>
            var total = 0;
            var i;
            for (i = 1;i <= 1000; i++){
                total = total + i;
            }
            console.log(total);//500500
        </script>

2.使用Break退出循环

  • for循环的3个条件都是可以省略的,如果没有退出循环的判断条件,就必须使用break语句退出循环,否则就是死循环:

        <script>
            var x = 0;
            for (;;){
                if (x>100) {
                    break;
                }
                x ++;
                console.log(x)
            }
        </script>
    //1.....101

3.continue语句

  • continue语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。

        <script>
            var x;
            for (var i = 0; i<=10; i++){
                if (i==3) continue;
                x ='这个数字是' + i;
                console.log(x)
            }
        </script>
    //这个数字是0......这个数字是10

4.while循环

  • Javascript中的另一种循环则是while循环,使用它最佳。

  • 语法:

    while (判断循环结束条件){
      //code to run
      递增条件
    }
  • 示例:

    <script>
        var a = 1;
        while (a <=100){
            console.log(a);
            a += 1;
        }
    </script>
    //1 2 3 .....100

5.do...while

  • 最后一种循环是do { ... } while()循环,它和while循环的唯一区别在于,不是在每次循环开始的时候判断条件,而是在每次循环完成的时候判断条件:

    var n = 0;
    do {
        n = n + 1;
    } while (n < 100);
    n; // 100
  • do { ... } while()循环要小心,循环体会至少执行1次,而forwhile循环则可能一次都不执行。

8.函数

  • 在Javascript中另一个基本概念是函数,它允许你在一个代码块中存储一段用于处理一个任务的代码,然后在任何你需要的时候用一个简短的命令来调用,而不是把相同的代码写很多次。

1.函数定义

  • 一个函数定义(也称为函数声明,或函数语句)由一些列的function关键字组成。例如,以下代码是一个简单的计算多组数的和的函数,我们给它命名为sum

    function sum(a,b) {
      //函数体
    }

2.函数的调用

  • 函数定义好后,它是不能自动执行的,需要调用它,直接在需要的位置写函数名。

    <script>
        function sum(a,b){
            console.log(a+b);
        }
        sum(3,5);
    </script>
  • 我们把定义函数时传入的两个参数a和b叫形参(形式参数,一个将来被代替的参数),调用函数时传入的两个参数叫实参(实际的参数)。
  • 如果向在定义函数时添加多个形参。可以在后面添加多个,注意参数之间用逗号隔开

3.函数的返回值

  • 我们在计算两个数之和的时候,可以给函数一个返回值,每次调用该函数,你就能计算出两个数之和。

    <script>
        function sum(a,b){
            return a+b
        }
        var result = sum(3,5);
        console.log(result);
    </script>

4.函数表达式

  • 虽然上面的函数定义在语法上是一个语句,但函数可以由函数表达式创建。这样的函数可以是匿名的;它不必有一个名称。例如,函数sum也可以这样去定义:

    var sum = function(a,b){
        return a + b;
    }
    sum(4,5);

5.函数作用域冲突

  • 处理函数时,作用域是非常重要的一个概念。当你创建函数时,函数内定义的变量和其它东西都在它们自己的单独的范围内,意味着它们被锁在自己独立的房间内。

  • 所有的函数的最外层被称为全局作用域。在全局作用域内定义的值可以任意地方访问。

    <!-- my HTML file -->
    <script src="first.js"></script>
    <script src="second.js"></script>
    <script>
      hello();
    </script>
    //first.js
    var name = 'Tom'