• 第一阶段 3、javascript


    一、基础的JavaScript

    JavaScript没有任何打印或者输出的函数

    JavaScript显示数据方式:

    • window.alert():弹出警告窗
    • document.write():将内容写到HTML文档中
    • innerHTML:写入到HTML元素
    • console.log():写入到浏览器控制台

    1、window.alert()

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>window.alert()方法</title>
        </head>
        <body>
            <h1>一级标题</h1>
            <p>段落</p>
            <script>
                window.alert(5+6)
            </script>
        </body>
    </html>
    2、document.write()
    <!DOCTYPE html>
    <html>
        <head>
            <title>document.write:操作HTML元素</title>
        </head>
        <body>
           <h1>一级标题</h1>
           <p>段落</p>
           <script>
               document.write(Date())
           </script>
        </body>
    </html>
    3、innerHTML:写入到HTML元素
    <!DOCTYPE html>
    <html>
        <head>
            <title>inner:写入到HTML元素</title>
        </head>
        <body>
            <h1>一级标题</h1>
            <p id="demo">会改变的内容</p>
            <script>
                document.getElementById("demo").innerHTML="改变之后的文字"
            </script> 
        </body>
    </html>
    4、console.log():写到控制台
    (常常在程序调试的时候使用)
    <!DOCTYPE html>
    <html>
        <head>
            <title>console.log():写到控制台</title>
        </head>
        <body>
            <h1>一级标题</h1>
            <p>段落</p>
            <script>
                a = 5;
                b = 6;
                c = a + b;
                console.log(c)
            </script>
        </body>
    </html>
    二、变量和字面量
    字面量:在编程语言中,一般固定值成为字面量。如,3.14,....,
    变量:变量用于存储数据值
    总结:变量是一个名称,字面量是一个值。
    三、tips
    1、javascript的注释:单行//,多行/* */。
    2、javascript对大小写敏感
    3、JavaScript语句向浏览器发出的命令,语句的作用是告诉浏览器该做什么。
    4、JavaScript会自动忽视多余的空格。
    5、换行问题(还没解决),将“你好”变成
    “你
    好”
    四、JavaScript数据类型
    数组:数组三种声明方式
    1、var cars = new Array();
      cars[0] = "Saab";
      cars[1] = "Volvo";
      cars[2] = "BMW" ;
    2、var cars = new Array("Saab",'Volvo',"BMW");
    3、var cars = ["Saab","Volvo”,"BMW"]
    五、JavaScript对象
    1、var person={
    firstname : "John",
    lastname  : "Doe",
    id        :  5566
    };
    对象的两种寻址方式:
    name=person.lastname;
    name=person["lastname"];
    2、对象的属性
    • javascript对象是变量的容器
    • JavaScript对象是属性变量的容器
    • javascript对象是属性和方法的容器

    3、对象的方法

    对象的方法定义了一个函数,并作为对象的属性存储

    <!DOCTYPE html>
    <html>
        <head>
            <title>javascript对象</title>
        </head>
        <body>
            <p id="demo1"></p>
            <p id="demo2"></p>
            <script>
                var person = {
                    firstName:"John",
                    lastName:"Dan",
                    id : 5566,
                    fullName:function(){
                        return this.firstName + " " + this.lastName
                    }
                };
                document.getElementById("demo1").innerHTML = "不加括号:" + person.fullName;
                document.getElementById("demo2").innerHTML = "加括号:" + person.fullName();
            </script>
        </body>
    </html>
    通常:fullName()是作为对象的一个方法,fullName是作为一个属性
    demo1输出:function(){ return this.firstName + " " + this.lastName }
    demo2输出:John Dan
    六、JavaScript函数 
    1、
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>javascript函数</title>
            <script>
                function myFunction(){
                    alert("h");
                }
            </script>
        </head>
        <body>
            <script>
                function myFunction(){
                    alert("h");
                }
            </script>
            <button onclick="myFunction()">点击</button>
        </body>
    </html>
    JavaScript对大小写敏感,关键词function必须是小写的,并且必须以与函数名相同的大小写来调用函数
    2、带有参数的函数
    function myFunction(var1,var2){}
    调用:<button onclick = "myFunction("Harry","Wizz")">点击</button>
    3、带有返回值的函数
    function myFunction(a,b){
    return a*b
    }
    调用:document.getElementById("demo").innerHTML = myFunction(3,4);
    4、JavaScript中的变量
    局部JavaScript变量:在函数内部声明(var)的变量,只能在函数内部访问它()该变量的作用域是局部的,函数运行结束,变量就会删除
    全局变量:在函数外声明的变量,作用域整个程序
    七、JavaScript事件
    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
        </head>
        <body>
            
            <button onclick="getElementById('demo1').innerHTML = Date()">时间1</button>
            <p id="demo1"></p>

            <button onclick="this.innerHTML=Date()">时间2</button>

            <button onclick="disPlay()">点击</button>
            <p id="demo2"></p>
            
            <script>
            function disPlay(){
                return document.getElementById("demo2").innerHTML = Date();
            }
            </script>

        </body>
    </html>
    HTML事件是发生在HTML元素上的事情,当在HTML页面中使用JavaScript时,JavaScript可以触发这些事件。
    八、JavaScript中的循环
    1、break和continue:
    break用于调出循环,整个循环结束
    continue用于错过这轮循环,比如i= 3 时continue,则i= 4 的循环还是可以循环。
    2、JavaScript标签
    可以对JavaScript语句进行标记(类似汇编语言?)
    九、JavaScript类型转换
    利用typeof操作符来查看变量的数据类型
    1、转换成字符串的两种方法
      String(x)和x.toString()
    2、一元运算符+
      一元运算符可用于将变量转换成数字
      var x = "5";//x是字符串
      var y = + x;//y是数字
      如果变量不能转换为数字,他仍是一个数字类型,但内容为null
      var x = "John";
      var y = + x;//y为null
    十、JavaScript表单验证
      表单验证:判断表单字段值是否存在,如果不存在就弹出信息,阻止表单提交;
     
  • 相关阅读:
    <Yii 学习>写入日志
    微信支付:curl出错,错误码:60
    PHPstorm创建注释模版
    Yii 常用命令
    Linux启动/停止/重启Mysql数据库的方法
    php foreach跳出本次/当前循环与终止循环方法
    介绍Sublime3下两款Markdown插件
    规范
    业务流程时序图
    数据字典
  • 原文地址:https://www.cnblogs.com/gujunjie-study-time/p/13841792.html
Copyright © 2020-2023  润新知