前端：javaScript基础知识

news2025/1/31 2:58:01

一、输出语句

①window.alert()：弹出框
②ducument.write()：写入HTML输入
③console.log()：在浏览器控制台输出

二、声明变量

①使用关键字var来声明变量
②javaScript是一门弱类型语言，变量可以存放不同类型的值
③变量需要遵循以下规则：组成字符可以是任意字母、数字、下划线（_）或者美元符号（$）；数字不能开头；建议使用驼峰命名法。
注：var定义的变量作用于比较大，是全局变量；可以重复声明
let定义的变量只在代码块内有效，const用于声明一个只读的常量，一旦声明常量的值就不能改变。

三、数据类型、运算符

数据类型：
①number：数字（整数、小数、NAN（Not a Number））
②string：字符串，单引号双引号都行
③boolean：布尔。true,false
④null：对象为空
⑤undefine：当声明的变量未初始化时，该变量的默认值是undefine
使用typeof可以获取该元素的数据类型
运算符：算术运算符、赋值运算符、比较运算符、逻辑运算符、三元运算符

四、函数

函数是被设计为执行特定任务的代码块，用founction关键字进行定义

founction founctionName(参数1，参数2…){主要执行代码}

形式参数不需要类型，因为javaScript是弱类型语言，返回值也不需要定义类型，在函数内部直接使用return返回即可，调用函数名称（实际参数列表）
定义方式二：

var founctionName = founction(参数1，参数二…){要执行的代码}

五、对象

（一）基础对象

1、Array

var 变量名 = new Array(元素列表)；//定义一
var 变量名 = [];//定义二
变量名[下标] = 值；//访问

常见的属性（length）和方法（foreach()、push()、splice()）

2、String

var 变量名 = new String(“…”)；//方式一
var 变量名 = “…”；//方式二

常见的属性（length）和方法(charAt()、indexOf()、trim()、substring())

3、JSON（javaScript对象标记法书写的文本）
语法结构简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输
javaScript自定义对象

var 对象名 = {
属性名1：属性值
属性名2：属性值
属性名3：属性值
函数名称：founction(形参列表){}
}
//调用格式
对象名.属性名；
对象名.函数名（）；

在JSON中所有key都需要加上双引号
定义：

var 变量名 = ‘{"key1":value1,"key2":value2}’

value的值可以是：数字（整数或者浮点型）、字符串（在双引号中）、逻辑值（true\false）、数组（在方括号中）、对象（在花括号中）、null

    <script>
        //JSON
        var jsonStr = '{"name":"Tom","age":18,"addr":["北京","上海","西安"]}';
        //alert(jsonStr.name);//无法获取

        //将json对象转化为js对象
        var obj = JSON.parse(jsonStr);
        alert(obj.name);
    </script>

（二）浏览器对象（BOM）

允许javaScript与浏览器进行对话，javaScript将浏览器的各个组成部分封装成对象。
1、Location：地址栏对象
获取地址栏信息Location.href
2、Navigator：浏览器对象
3、Screen：屏幕对象
4、history：历史记录对象
5、Window：浏览器窗口对象
获取：直接使用window其中window.可以省略，属性（history,location,navigator）方法（alert(),confrim(),setInterval(),setTimeout()）

（三）文件对象模型（DOM）

1、Attributes：属性对象
2、Document：整个文档对象
3、Element：元素对象
4、Text：文本对象
5、Comment:注释对象

六、事件监听

（一）事件绑定

1、通过HTML标签中的事件属性进行绑定
2、通过DOM元素进行绑定

<body>
    <input type="button" id="btn1" value="绑定事件1" onclick="on()">
    <input type="button" id="btn2" value="绑定事件2">
    <script>
        function on(){
            alert("按钮1被点击了");
        }
        //方式二：
        document.getElementById('btn2').onclick = function(){
            alert("按钮2被点击了...");
        }
    </script>
    
</body>