【JAVA】JavaScript上（基础语法与对象）

目录

【JavaScript基础】

【JavaScript引入方式】

1、内部脚本

2、外部脚本

【JavaScript语法】

1、输出语句

2、变量

3、数据类型

4、运算符

5、函数

【JavaScript对象】

【Array对象】

【Array属性和方法】

【String对象】

【String属性和方法】

【自定义对象】

【BOM】——Browser Object Model

【Window】——浏览器窗口对象

【window的属性及方法】

【项目示例】——定时切换照片

【DOM】——Document Object Model

【Element】——元素对象

【Element对象的使用】

---

【JavaScript基础】

【概述】：

JavaScript 是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互

官网：w3school 在线教程

【JavaScript引入方式】

1、内部脚本

将JS代码定义在HTML页面中

在HTML中，JavaScript代码必须位于标签之间

例：

【注意】： 

• 在 HTML 文档中可以在任意地方，放置任意数量的

  例：

  alert("hello js");

  【注意】：

  • 外部脚本不能包含

    2、变量

    JavaScript 中用 var 关键字（variable 的缩写）来声明变量

    var test = 20;
    test = "张三";

    JavaScript 是一门弱类型语言，变量可以存放不同类型的值

    var：

    1. 作用域：全局变量
    2. 变量可以重复定义

    let：

    1. 作用域：代码块内有效

    const：

    1. 用来声明一个只读变量，一旦声明，常量的值就不能改变

    【遵守规则】

    1. 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
    2. 数字不能开头
    3. 建议使用驼峰命名

    例：

    3、数据类型

    JavaScript中分为原始类型和引用类型

    【分类】：

    1. number：数字(整数、小数、Not a Number)
    2. string：字符、字符串，单双引号皆可
    3. boolean：布尔
    4. null：对象为空
    5. undefined：当声明的变量未初始化时，该变量的默认值是undefined

    使用typeof运算符可以获取数据类型

    alert(typeof age);

    例： 

    4、运算符

    【分类】：

    • 一元运算符：++，--
    • 算术运算符：+，-，*，/，%
    • 赋值运算符：=，+=，-=…
    • 关系运算符：>，<，>=，<=，!=，==，===
    • 逻辑运算符：&&，||，!
    • 三元运算符：条件表达式 ?  true_value : false_value

    【注意】：

    == 和 === ：== 会进行类型转换，=== 不会进行类型转换

    类型转换：

    1、其他类型转为数字：

            （1）string:将字符串字面值转为数字。如果字面值不是数字，则转为NaN。一般使用parseInt

    方法进行转换

            （2）boolean:true 转为1，false 转为0

    2、其他类型转为 boolean

            （1）number：0和NaN转为false，其他的数字转为true

            （2）string：空字符串转为false，其他字符串转为true

            （3）null：转为false

            （4）undefined：转为false

    例：

    5、函数

    【概述】：函数（方法）是被设计为执行特定任务的代码块

    方式一：

    1、定义：JavaScript 函数通过 function 关键词进行定义，语法为：

    function functionName(参数1,参数2..){
        要执行的代码
    }

    2、调用：函数名称(实际参数列表);

    let result = add(1,2);

    例：

    方式二：

    1、定义：

    var functionName = function (参数列表){
        要执行的代码
    }

    2、调用：JS中，函数调用可以传递任意个数参数

    let result = add(1,2,3);

    例：

    【注意】：

    • 形式参数不需要类型。因为JavaScript是弱类型语言
    • 返回值也不需要定义类型，可以在函数内部直接使用return返回即可

    【JavaScript对象】

    【Array对象】

    【定义】

    var 变量名 = new Array(元素列表); //方式一        var arr = new Array(1,2,3);

    var 变量名 = [元素列表]; //方式二                        var arr = [1,2,3];

    【访问】

    arr[索引] = 值;

    arr[0] = 1;

    【注意】：JS数组类似于Java集合，长度，类型都可变

    例：

    【Array属性和方法】

    

    

     例：

    【String对象】

    【定义】：

    var 变量名 = new String(s); //方式一        var str = new String("hello");

    var 变量名 = s; //方式二                           var str = "hello" ;或var str = 'hello';

    例：

    【String属性和方法】

    【属性】

    

    【方法】

    

    例：

    【自定义对象】

    【格式】

    var 对象名称 = {
                               属性名称1:属性值1,
                               属性名称2:属性值2,
                               ...
                               函数名称:function (形参列表){}
                               ...
                             };

    例：

    【BOM】——Browser Object Model

    【定义】

    • Browser Object Model——浏览器对象模型
    • JavaScript将浏览器的各个组成部分封装成对象

    【组成】

    • Window：浏览器窗口对象
    • Navigator：浏览器对象
    • Screen：屏幕对象
    • History：历史记录对象
    • Location：地址栏对象

    【Window】——浏览器窗口对象

    【获取】：直接使用window，其中window.可以省略

    【window的属性及方法】

    【属性】：获取其他BOM对象

    

     【方法】：

    

    【History】——历史记录

    【获取】：使用window.history获取，其中window.可以省略

    window.history.方法();
    history.方法();

    【方法】

    

    【Location】——地址栏对象

    【获取】：使用window.location获取，其中window.可以省略

    window.location.方法();
    location.方法();

    【属性】

    

    例：

    【项目示例】——定时切换照片

    需求：每隔一秒切换一次图片

    【DOM】——Document Object Model

    【概述】

    • Document Object Model ——文档对象模型
    • JavaScript将标记语言的各个组成部分封装为对象

    W3C DOM 标准被分为 3 个不同的部分：

    1.核心 DOM：针对任何结构化文档的标准模型

    • Document：整个文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text：文本对象
    • Comment：注释对象

    2.XML DOM：针对 XML 文档的标准模型

    3.HTML DOM：针对 HTML 文档的标准模型

    • Image：
    • Button ：

    【组成】

    • Document：整个文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text：文本对象
    • Comment：注释对象

    【DOM树】

    

    【Element】——元素对象

    【获取】：使用Document对象的方法来获取

    1. getElementById：根据id属性值获取，返回一个Element对象
    2. getElementsByTagName：根据标签名称获取，返回Element对象数组
    3. getElementsByName：根据name属性值获取，返回Element对象数组
    4. getElementsByClassName：根据class属性值获取，返回Element对象数组

    例：

    
    
    
        
        
    
    
    
    
    传智教育
    
    
    黑马程序员
    
    
    电影
    旅游
    游戏
    
    
    
    
    

    【Element对象的使用】

    查阅文档：

    JavaScript 和 HTML DOM 参考手册 (w3school.com.cn)

    例：

    
    
    
        
        
    
    
    
    
    传智教育
    
    
    黑马程序员
    
    
    电影
    旅游
    游戏