JavaWeb_JavaScript基础

时间：2024-04-25 07:27:44

JAVAWEB_JavaScript基础

JS引入方式

引入方式

内部脚本：将JS代码定义在HTML页面中

  • JavaScript代码必须位于标签之间

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

<script>
    alert("Hello JavaScript")
</script>
外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

  • 外部JS文件中，只包含JS代码，不包含标签不能自闭合

<script src="js/demo.js"></script>

alert("Hello JavaScript")

输出方式

  • 使用 window.alert() 写入警告框

在这里插入图片描述

  • 使用 document.write() 写入 HTML 输出

在这里插入图片描述

  • 使用 console.log() 写入浏览器控制台

在这里插入图片描述

<script>
    window.alert("Hello JavaScript"); //浏览器弹出警告框
    
    document.write("Hello JavaScript"); //写入HTML,在浏览器展示
    console.log("Hello JavaScript"); //写入浏览器控制台
</script>

JS基础语法

变量

  • JavaScript 中用 var 关键字（variable 的缩写）来声明变量 。
  • JavaScript 是一门弱类型语言，变量可以存放不同类型的值 。
  • 变量名需要遵循如下规则：
    • 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
    • 数字不能开头
    • 建议使用驼峰命名

注意事项：

  • ECMAScript 6 新增了 let 关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。

  • ECMAScript 6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

数据类型

  • JavaScript中分为：原始类型 和 引用类型。
  • lnumber：数字（整数、小数、NaN(Not a Number)）
  • string：字符串，单双引皆可
  • boolean：布尔。true，false
  • null：对象为空
  • undefined：当声明的变量未初始化时，该变量的默认值是 undefined

算术运算符

  • 算术运算符：+ , - , * , / , % , ++ , –

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

  • 比较运算符：> , < , >= , <= , != , == , ===

  • ”“ 会进行类型转换，”=“ 不会进行类型转换

var a = 10;
alert(a == "10"); //true
alert(a === "10"); //false
alert(a === 10); //true

  • 逻辑运算符：&& , || , !

  • 三元运算符：条件表达式 ? true_value: false_value

类型转换

  • 字符串类型转为数字：

  • 将字符串字面值转为数字。 如果字面值不是数字，则转为NaN。

  • 其他类型转为boolean：

  • Number：0 和 NaN为false，其他均转为true。

  • String：空字符串为false，其他均转为true。

  • Null 和 undefined ：均转为false。

流程控制

  • if…else if …else…

  • switch

  • for

  • while

  • do … while

JS函数

  • 介绍：函数（方法）是被设计为执行特定任务的代码块。

  • 定义：JavaScript 函数通过 function 关键字进行定义，语法为：

  • 注意：

    • 形式参数不需要类型。因为JavaScript是弱类型语言
    • 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
    • 调用：函数名称(实际参数列表)
<script>
        //定义函数-01
        function add(a,b){
            return a+b;
        }
        //定义函数-02
        var add=function(a,b){
            return a+b;
        }
        //调用函数
        var result = add(1,2);
        alert(result)
    </script>

JS函数

Array

  • JavaScript 中 Array对象用于定义数组。

  • 定义

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

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

注意事项：

JavaScript 中的数组相当于 Java 中集合，数组的长度是可变的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。

属性
属性 描述
length 设置或返回数组中元素的数量。
方法
方法 描述
forEach() 遍历数组中的每个有值的元素，并调用一次传入的函数
push() 将新元素添加到数组的末尾，并返回新的长度。
splice() 从数组中删除元素。 
//forEach()调用数组中有值的函数
        arr1.forEach(function e){
            console.log(e);
        }
//ES6箭头函数
        arr1.forEach(e => console.log(e));
//push:将元素添加到尾部
        arr1.push(55);
        console.log(arr1);
//splice:删除元素（开始删除的索引，删除的个数）
        arr1.splice(1,2);

String

  • String字符串对象创建方式有两种：
  • 方式一
var 变量名 = new String("…") ; //方式一
var str = new String("Hello String");
  • 方式二
var 变量名 = "…" ; //方式二
var str = "Hello String";
var str = 'Hello String';
属性
属性 描述
length 字符串的长度。
方法
方法 描述
charAt() 返回在指定位置的字符。
indexOf() 检索字符串。
trim() 去除字符串两边的空格
substring() 提取字符串中两个指定的索引号之间的字符。 
<script>
        //创建字符串对象
        var str = new String("hello");
        var str = "hello";
        console.log(str);
        //length属性
        //返回字符串的长度
        console.log(str.length);
        //charAt()方法
        //返回指定位置的字符
        console.log(str.charAt(0));
        //indexOf()方法
        //返回指定字符串的位置
        console.log(str.indexOf("l"));
        //trim()方法
        //去除字符串两端的空格
            var str = "   hello   ";
            console.log(str.trim());

        //substring()方法
        //返回指定位置的字符串
        console.log(str.substring(0,1));
    </script>

JSON

定义格式：

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

示例：

var user = {
    name:"Tom", 
    age:20, 
    gender:"male",
    eat: function(){
        alert("用膳~");
    }

调用格式：

对象名.属性名		console.log(user.name);

对象名.函数名();		user. Eat();

//定义JSON 对象
        var strjson = '{"name":"张三","age":20,"gender":"男"}';
        //将JSON字符串转换为JSON对象
        var jsonobj = JSON.parse(strjson);
        //输出JSON对象
        alert(jsonobj.name);
        //将JSON对象转换为JSON字符串
        var strjson2 = JSON.stringify(jsonobj);
        //输出JSON字符串
        alert(strjson2);

BOM

  • 概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话， JavaScript 将浏览器的各个组成部分封装为对象
Windows

  • 介绍：浏览器窗口对象。

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

  • 属性

  • history：对 History 对象的只读引用。请参阅 History 对象。

  • location：用于窗口或框架的 Location 对象。请参阅 Location 对象。

  • navigator：对 Navigator 对象的只读引用。请参阅 Navigator 对象。

  • 方法

  • alert()：显示带有一段消息和一个确认按钮的警告框。

  • confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。

  • setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。

  • setTimeout()：在指定的毫秒数后调用函数或计算表达式。

Location

  • 介绍：地址栏对象。

  • 获取：使用 window.location 获取，其中 window. 可以省略。

​ window. Location.属性; location.属性;

  • 属性：
    • href：设置或返回完整的URL。

DOM

  • 概念：Document Object Model ，文档对象模型。

  • 将标记语言的各个组成部分封装为对应的对象：

  • Document：整个文档对象

  • Element：元素对象

  • Attribute：属性对象

  • Text：文本对象

  • Comment：注释对象

在这里插入图片描述

<html>
    <head>
        <title>DOM</title>
    </head>
    <body>
        <h1>DOM对象标题</h1>
        <a href="https://itcast.cn">传智教育</a>
    </body>
</html>
  • DOM是 W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：

  1. Core DOM - 所有文档类型的标准模型

    • Document：整个文档对象

    • Element：元素对象

    • Attribute：属性对象

    • Text：文本对象

    • Comment：注释对象

2.XML DOM - XML 文档的标准模型

3.HTML DOM - HTML 文档的标准模型

  • lmage：

  • Button ：

  • HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。

  • Document对象中提供了以下获取Element元素对象的函数：

[外链图片转存中...(img-IxK3NKAa-1713360495058)]

相关文章