• day 32 JavaScript


    1.1. JavaScript介绍

    HTML:定义网页的结构

    CSS:美化网页

    JavaScript:实现用户交互;

    1.1.2 JavaScript特点

    n  安全性较高

    n  跨平台,兼容性好

    1.2 JavaScript的组成

    JavaScript主要由三部分组成:ECMAScript、DOM、BOM。

      ECMAScript:描述了JavaScript的基本语法(所有浏览器都支持);

      DOM:文档对象模型。提供了处理网页内容的方法;

      BOM:浏览器对象模型。提供了与浏览器进行交互的方法;

    1.3 如何编写JavaScript代码

    方式一:在HTML页面中编写JavaScript代码

    <!DOCTYPE html>
    <html >
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script>
            document.write('HelloWorld')
        </script>
    </body>
        <script>
            alert('你好')
        </script>
    </html>

    script标签可以放在head标签中,也可以放在body标签中。而且,在一个HTML页面中,可以存在多个script标签。

    方式二:引入外部的JS文件

    <!DOCTYPE html>
    <html >
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script type="text/javascript" src="js/JavaScript.js"></script>
    </body>
    </html>

    注意事项:

    1)  在js文件中编写js代码,不需要写<script>标签;

    2)  开始的script标签和结束标签不能够写在一起;

    3)  如果在HTML页面中引入了外部的js文件,那么该script标签就不能再编写js代码,而且应该在另外一个script标签中编写;

    方式三:在HTML元素中编写js代码

    <input type="button" value="click me" onclick="document.write('惊不惊喜');"/>

    二、ECMAScript

    2.1注释

    HTML: <!—注释 -->

    CSS: /*注释*/

    JavaScript://单行注释 或 /*多行注释*/

    2.2 变量

    javascript是一门弱类型的语言。所以,在javascript中声明变量不需要指定类型。

    语法格式

    var 变量名 [= 初始值];

    <script>
        var aa = 10;
        document.write(aa);
        document.write(typeof(aa))
    </script>

    注意事项:

    1)  var关键字可以不写。变量的类型是根据它的值来确定的。

    2)  变量名必须以字母或下划线开头;

    3)  js的变量是区分大小写的;

    4)  js变量必须要先声明后使用;

    5)  js变量的类型会随着它的值的改变而发生变化;

    js的数据类型:

    number:数值型,包含小数、整数、NaN(非数字)

    string:字符串类型;

    boolean:布尔类型,它的值可以是true或false;

    object:对象类型;

    undefined:该变量没有定义或初始化的时候,那么就是undefined

    运算符

    ++   自加

    --     自减

    注意:前++和前--是先对变量执行++或--操作,然后再对结果进行运算。

    后++和后--是先对变量执行运算,运算后再对变量执行++或--操作。

    补充:+除了可以作为算术运算符以外,还可以字符串连接符。

    比较运算符

    ===    三个等号,全等(值和类型都相等)

    三目运算符:

    条件表达式 ? ‘内容1’ : ‘内容2’;

    说明:如果条件成立,就返回内容1,否则返回内容2。

     var gender = 1;
     document.write(gender == 1 ? '男': '女');

    2.4.1 条件判断

    • 语法格式:
    if (条件表达式) {
    
          
    
    } else if (条件表达式) {
    
    } …
    
    else {
    
          
    
    }
    
    <!DOCTYPE html>
    <script>
       var socre = '你好';
       if (socre >= 60) {
           document.write('及格')
       } else if (socre < 60) {
           document.write('不及格')
       } else {
           document.write('输入错误')
       }
    </script>
    示例

    2.4.2 条件选择

    switch (变量) {
        case 值1:
            …
            break;  //退出switch
        case 值2:
            …
            break;
        ..
        default:  //如果上面case条件都不满足,就执行default后面的js代码。
        …
    }
    var fruit = 'orange';
            switch (fruit) {
                case 'apple':
                    document.write('苹果')
                    break;
                case 'orange':
                    document.write('橘子')
                    break;
                default:
                    document.write('其他')
            }
    示例

    2.4.3 循环语句

    while循环:

      先判断条件是否成立。如果条件成立就重复执行大括号中的js代码。直到条件不成立为止。

    while (条件) {
    
           ….
    
    }  document.write('结果')
      var num = 1;
        var total = 0;
        while (num<=10) {
            total+=num;
            num++
        }document.write('结果为' + total)
    1加到10

    do..while循环:

      先执行大括号中的js代码,然后再判断条件是否成立。如果条件成立就继续执行大括号中的js代码。直到条件不成立为止。

    do {
    
    } while (条件);
     var num = 1;
        var total = 0;
        do {
            if (num % 2 == 1) {
                total += num;
            }
            num++
        }while (num <= 10);
        document.write('结果' + total)
    1~10基数相加

    for循环:

      先执行初始化语句,再判断条件是否成立。如果条件成立,就执行大括号中的js代码。执行完js代码后,再执行循环后的语句。接着,再判断条件是否成立,如果成立就继续执行大括号中的js代码。直到条件表达式不成立为止。

    for ([初始化语句]; [初始化语句]; [初始化语句]) {
    
    }

    注意:初始化语句只会执行一次。如果没有变量需要初始化,初始化语句可以没有。但是,初始化语句后面的分号一定要有。

     var total = 0;
            for (i=1; i<=10; i++) {
                if (i % 2 == 0 ) {
                    total += i;
                }
            }document.write('结果为' + total)
    1~10偶数相加

    函数:

    function 函数名(参数列表) {

           函数体

    }

    <script>
        // 定义一个函数
        function sayHello() {
            alert("hello javascript")
        }
        sayHello()
        //定义一个带参数的函数
        function sayHello(name) {
            alert("hello " + name)
        }
        sayHello('javascript')
    
    </script>
     function sayHello(name) {
            return "我是返回值"
        }
        var username = sayHello('javascript');
        document.write(username)
    带返回值的函数

    Ø  注意事项:

    1)  定义函数的时候不需要定义它的返回值类型。如果函数需要返回结果,那么可以使用return命令直接返回即可;

    2)  函数的形参定义不需要使用var

    3)  js函数是没有重载(重载:可以存在重名的函数),后面定义的函数会覆盖前面定义的函数。所以,在一个js文件中,不要出现重复的函数定义。

    方式二:定义函数变量

    Ø  语法格式:

    var 函数名 = function(参数列表) {

     

     

    }

     var sayHello = function (name) {
            return "我是返回值"
        }
        document.write(sayHello())
    
    
    也是定义函数的一种方法

    全局变量,局部变量

    局部变量:在函数内部定义,只能在当前函数中使用。注意:在函数中定义局部变量,必须加上var。如果没有加var,那么浏览器会再全局中定义该变量

    <script>
        // var num = 10;  //全局变量,两个函数都可以引用
        function a() {
            var num = 1; //局部变量,只有当前函数可以引用  如果不加var,浏览器就会在全局中定义该变量,test2就可以访问
            alert(num)
        }
        function b() {
            alert(num)
        }
        a()
        b()
    </script>

    自定义对象

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
        function Person() { }
        //用new关键字创建对象
        var user = new Person(); //创建person对象,赋值给user变量
        user.name = "echo"; //给user对象添加name属性
        user.age = 18;  //给user对象添加age属性
        user.eat = function () {  //给user对象添加eat方法
            alert(this.name + "正在吃饭。。。")  //this代表当前调用者对象,类似self
        };
        //调用对象属性
        alert(user.name + "," + user.age);
        //调用对象的方法
        user.eat()
    </script>

    function 函数名(参数列表) {

           函数体

    }

  • 相关阅读:
    .NET 高效开发之不可错过的实用工具(第一的当然是ReSharper插件)
    灵活运用 SQL SERVER FOR XML PATH 转
    Python 3.X 要使用urllib.request 来抓取网络资源。转
    22-1 拖拽与烟花案例
    21、bootstrap框架
    20、promise与ajax jsonp
    18、MySQL
    19、AJAX
    17、php
    16-1 ECMA5与ECMA6的函数定义
  • 原文地址:https://www.cnblogs.com/echo2019/p/10420182.html
Copyright © 2020-2023  润新知