• JS基础语法


    1、JavaScript 输出

    JavaScript 可以通过不同的方式来输出数据:
      使用 window.alert() 弹出警告框。
      使用 document.write() 方法将内容写到 HTML 文档中。
      使用 innerHTML 写入到 HTML 元素。
      使用 console.log() 写入到浏览器的控制台。

    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一个页面</h1>
    <p>我的第一个段落。</p>
    
    <script>
    window.alert(5 + 6);
    </script>
    
    </body>
    </html>
    window.alert()
    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一个 Web 页面</h1>
    
    <p id="demo">我的第一个段落</p>
    
    <script>
    document.getElementById("demo").innerHTML = "段落已修改。";
    </script>
    
    </body>
    </html>
    document.getElementById()
    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一个 Web 页面</h1>
    
    <p>我的第一个段落。</p>
    
    <script>
    document.write(Date());
    </script>
    
    </body>
    </html>
    document.write()
    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一个 Web 页面</h1>
    
    <script>
    a = 5;
    b = 6;
    c = a + b;
    console.log(c);
    </script>
    
    </body>
    </html>
    console.log()

    2、变量

    变量是用于存储信息的"容器"。JavaScript 语句和 JavaScript 变量都对大小写敏感。

    在 JavaScript 中创建变量通常称为"声明"变量。我们使用 var 关键词来声明变量:var carname;

    变量声明之后,该变量是空的(它没有值)。如需向变量赋值,请使用等号:carname="Volvo";

    不过,您也可以在声明变量时对其赋值:var carname="Volvo";

    您可以在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可:var lastname="Doe", age=30, job="carpenter";

    声明也可横跨多行:
    var lastname="Doe",
    age=30,
    job="carpenter";

    一条语句中声明的多个不可以赋同一个值:var x,y,z=1;x,y 为 undefined, z 为 1。

     JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

    3、数据类型

    值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。

    引用数据类型:对象(Object)、数组(Array)、函数(Function)。

    数字:可以是整数或者是小数,或者是科学计数(e)。

    字符串:可以使用单引号或双引号:"John Doe" 、'John Doe'

    布尔:布尔(逻辑)只能有两个值:true 或 false。

    Undefine null:Undefined 这个值表示变量不含有值;可以通过将变量的值设置为 null 来清空变量。

     Javascript对象链接对象链接

    数组:定义一个数组:[40, 100, 1, 5, 25, 10]

    对象: 定义一个对象:{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

    函数: 定义一个函数:function myFunction(a, b) { return a * b;}

    4、运算符

    算术运算符:加减乘除余幂,自增自减

    关系运算符:==,===(绝对等于---值和类型均相等),!=,!==(不绝对等于---值和类型有一个不相等,或两个都不相等)),>,>=,<,<=

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

    赋值运算符:=,+=,-=,*=,/=,%=,**=

    条件运算符:语法--------variablename=(condition)?value1:value2

    5、语句

    JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

    分号用于分隔 JavaScript 语句。通常我们在每条可执行的语句结尾添加分号。使用分号的另一用处是在一行中编写多条语句。

     JavaScript 代码是 JavaScript 语句的序列。浏览器按照编写顺序依次执行每条语句。可以在文本字符串中使用反斜杠对代码行进行换行。

    6、注释

    JavaScript 不会执行注释。

    我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。

    单行注释以 // 开头。

    多行注释以 /* 开始,以 */ 结尾。

    7、对象

    JavaScript 对象是拥有属性和方法的数据。在 JavaScript中,几乎所有的事物都是对象。

    对象定义:var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

    定义 JavaScript 对象可以跨越多行,空格跟换行不是必须的:

    var person = {
        firstName:"John",
        lastName:"Doe",
        age:50,
        eyeColor:"blue"
    };

    访问对象属性(两种方式):
    person.lastName;
    person["lastName"];

    <script>
    var person = {
        firstName : "John",
        lastName : "Doe",
        id : 5566
    };
    document.getElementById("demo").innerHTML =
        person.firstName + " " + person.lastName;
    </script>

    访问对象方法:name = person.fullName();

    <script>
    var person = {
        firstName: "John",
        lastName : "Doe",
        id : 5566,
        fullName : function() 
        {
           return this.firstName + " " + this.lastName;
        }
    };
    document.getElementById("demo").innerHTML = person.fullName();
    </script>

    8、函数

    函数就是包裹在花括号中的代码块,前面使用了关键词 function:

    function functionname()
    {
        // 执行代码
    }

    当调用该函数时,会执行函数内的代码。

    可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。

    9、事件

     

    HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。HTML 事件可以是浏览器行为,也可以是用户行为。

    以下是 HTML 事件的实例:
    HTML 页面完成加载
    HTML input 字段改变时
    HTML 按钮被点击

    通常,当事件发生时,你可以做些事情。
    在事件触发时 JavaScript 可以执行一些代码。

    /*
    常见的HTML事件
    事件                        描述
    onchange                HTML 元素改变
    onclick               用户点击 HTML 元素
    onmouseover        用户在一个HTML元素上移动鼠标
    onmouseout         用户从一个HTML元素上移开鼠标
    onkeydown               用户按下键盘按键
    onload                浏览器已完成页面的加载
    */

    常见的HTML事件事件描述onchange         HTML 元素改变onclick      用户点击 HTML 元素onmouseover用户在一个HTML元素上移动鼠标onmouseout用户从一个HTML元素上移开鼠标onkeydown      用户按下键盘按键onload    浏览器已完成页面的加载

  • 相关阅读:
    在线合并多个Excel
    http3了解
    LPC55S16的Classical CAN 测试
    LPC55xx:DCDC供电电路分析及检测方法
    LPC55xx+PAJ7620手势传感器实现USB PPT翻页器
    使用I.MXRT单芯片配置双路以太网
    RT1052同时开两路ADC要怎么做
    基于LwIP实现在一个网口上同时支持IPv6+IPv4通信
    RT1010SDK上手I2C,GXHT30温湿度传感器
    i.MX RT1050 ADC2调试工作总结
  • 原文地址:https://www.cnblogs.com/windyrainy/p/10697625.html
Copyright © 2020-2023  润新知