JavaScript

沐之湫

于 2023-11-26 08:15:05 发布

阅读量303

点赞数 10

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Moyvze/article/details/134623753

版权

一、JS的引用方式

1、内部脚本

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

JavaScript代码必须位于 <script></script> 标签之间。

在HTML文档中，可以在任意地方，放置任意数量的 <script>。

一般会把脚本置于 <body> 元素的底部，可改善显示速度

代码演示：

<body>
    <!-- 第一种方式： -->
    <script>
        alert("Hello js")
    </script>
</body>

2、外部脚本

外部脚本：将JS代码定义在外部文件中，然后引入到HTML页面中。

外部JS文件中只包含JS代码，不包含<script></script>标签。

注意<script>标签不能自闭合。

代码演示：

//Script外部脚本.js文件中
// 第二种引入方式
alert("Hello javaScript")
<body>
   <script src="JavaScript/Script外部脚本.js"></script>
</body>

二、JS基础语法

1、书写规范

结束符：每行结尾以分号结束，分号可有可无。

区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的。

注释：单行注释和多行注释。

大括号代表代码块

代码案例：

<script>
   //弹出框
   alert('Hello World');
   alert('Hello JS’)
   
   //条件判断
   if(count == 3){
      alert(count);
   }
</script>

2、输出语句

document.write() ：向HTML的body内输出内容

window.alert() ：弹出警告框

console.log() ：写入浏览器控制台（程序员调试使用）

代码演示：

<body>
    <script>
        //方法一: 写入浏览器的body区域
        document.write("write");
        //方法二：弹出框
        window.alert("alert");
        //方法三：控制台
        console.log("log");
    </script>
</body>

3、变量

JavaScript 中用 let 关键字来声明变量。

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

变量名需要遵循如下规则：

1、只能用字母、数字、下划线（_）、美元符号（$）组成，且数字不能开头。

2、变量名严格区分大小写，如 name 和 Name 是不同的变量。

3、不能使用关键字，如：let、var、if、for等。

注意：在早期的js中，声明变量还可以使用var，但是并不严谨(不推荐)。

4、常量

JavaScript 中用 const 关键字来声明常量。

一旦声明，常量的值就不能改变（不可以重新赋值）。

5、数据类型

JavaScript的数据类型分为：基本数据类型和引用数据类型（对象）。

基本数据类型：

number：数字（整数、小数、NaN(Not a Number)）；

boolean：布尔。true，false；

null：对象为空。JavaScript是大小写敏感的，因此null、Null、NULL是完全不同的；

undefined：当声明的变量未初始化时，该变量的默认值是 undefined；

string：字符串，单引号、双引号、反引号皆可，推荐使用单引号；

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

模板字符串场景:

拼接字符串和变量

模板字符串语法：

“ `` ”（反引号，英文输入模式下按键盘的tab键上方波浪线 ~ 那个键）;

内容拼接变量时，使用 ${} 包住变量;

代码如下：

<body>
    <script>

        //原始数据类型
        alert(typeof 3);//number
        alert(typeof 3.14);//number

        alert(typeof "A");//string
        alert(typeof 'Hello');//string
        alert(typeof `Hello JS`);//string

        alert(typeof true);//boolean
        alert(typeof false);//boolean

        alert(typeof null);//object

        let a;
        alert(typeof a);//undefined

        let name = 'Tim';
        let age = 18;
        alert(`我叫${name},我今年${age}了。`);

    </script>

6、运算符、流程控制语句

1、运算符

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

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

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

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

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

2、= 与 == 与 === 区别:

= 是赋值操作。

== 在比较时，判断左右两边的值是否相等（会进行类型转换）。

=== 全等，在比较时，判断左右两边的类型和值是否都相等（不会进行类型转换）。

3、类型转换

在某些运算被执行时，系统内部自动将数据类型进行转换，这种转换成为隐式转换。

字符串 <-> 数字：

1、+号两边只要有一个是字符串，都会把另外一个转成字符串

2、除了+外的算术运算符，比如：- * / 都会把字符串转为数字类型

其他类型 -> 布尔类型

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

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

3、Null 和 undefined ：均转为false

4、流程控制语句

if…else if …else… switch for while do … while

与Java作用一致

代码示例：

<body>

    <script>
        let age = 20;
        let _age = '20';
        let $age = 20;

        alert(age == _age);
        alert(age === _age);
        alert(age === $age);

       // 类型转换 - 字符串 <-> 数字
        alert(typeof ('10' - 1));
        alert(typeof ('10' + 1));
        alert(parseInt('123'));
        alert(parseInt('12A3'));
        alert(parseInt('A123'));

        //类型转换 - 其他类型转为boolean
        if(0){
            alert("0 转换为false");
        }
        if(NaN){
            alert("NaN 转换为false");
        }
        if(1){
            alert("除0和NaN其他数字都转为 true");
        }

        if(""){
            alert("空字符串为 false, 其他都是true");
        }

        if(null){
            alert("null 转化为false");
        }
        if(undefined){
            alert("undefined 转化为false");
        }
    </script>
</body>

三、JS函数

1、什么是函数？

函数（ function）是被设计用来执行特定任务的代码块，方便程序的封装复用。

定义：JavaScript中的函数通过function关键字进行定义

语法：

/*function functionName(参数1, 参数2 ...){
   要执行的代码
}*/
function add(a, b){
   return a + b;
}
//调用：函数名称(实际参数列表)
let result = add(10,20);
alert(result);

注意：由于JS是弱类型语言，形参、返回值都不需要指定类型。在调用函数时，实参个数与形参个数可以不一致，但是建议一致。

2、匿名函数

匿名函数是指一种没有名称的函数，由于它们没有名称，因此无法直接通过函数名来调用，而是通过变量或表达式来调用。

匿名函数定义可以通过两种方式：函数表达式和箭头函数。

函数表达式：

<body>
    <script>
//函数表达式 - 定义函数
       let arr = function(a,b){
        return a + b ;
       }
       let result = arr(10,42);
       alert(result);
    </script> 
</body>

箭头函数：

<body>
    <script>

//函数表达式 -- 箭头函数
       let arr = (a,b) => {
        return a + b ;
       }
       let result = arr(11,42);
       alert(result);
       
    </script> 
  </body>

四、JS对象

1、内置对象

1、Array

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

特点：长度可变，类型可变属性/方法：forEach方法仅遍历有值的元素

代码案例：

<body>
    <script>
        //1. 定义数组
        // let arr = new Array(1,2,3,4,5);---第一种
        let arr = [1,2,3,4,5];//--第二种
        arr[10] = 'A';
        //2. 数组属性 - length
       for(let i = 0; i< arr.length; i++){
        console.log(arr[i]);
       }
       console.log("-----------------------------------");
        //3. 数组方法 - forEach , map,  push , pop , unshift , shift , splice
        //遍历数组中的每一个有值元素
    arr.forEach(function(e){
         console.log(e);
     })
    //遍历每个数组元素，调用函数进行处理，并将结果封装到一个新数组中
         arr.map((e) => {
            console.log(e);
        }) 
        //添加数组尾部
        arr.push("B");
        //删除数组尾部的元素
        arr.pop();
        //添加数组头部
        arr.unshift("A")
        //删除数组头部第元素
        arr.shift();
        //从数组中删除元素
        arr.splice; 
    </script>
</body>

2、String对象

String字符串对象创建方式有两种：

<body>
    <script>
  //第一种
    let 变量名 = new String('…');
  //第二种
    let 变量名 = '…';
    </script>
</body>

代码案例：

<body>
    <script>
        //1. 创建字符串
        // let arr = new String('Hello JS');
        let arr = 'Hello JS';
        //2. 字符串属性 - length
        console.log(arr.length);
        //3. 字符串方法 - charAt , indexOf , trim , substring
        //返回在指定位置的字符
        console.log(arr.charAt(3));
        //检索指定内容在字符串中的索引位置的，返回值是索引
        console.log(arr.indexOf('JS'));
        //去除字符串两边的空格
        console.log(arr.trim());
        //提取字符串中两个指定的索引号之间的字符
        console.log(arr.substring(0,3));
    </script>
</body>

3、JS自定义对象

定义格式：

let 对象名 = {
    属性名1: 属性值1,
    属性名2: 属性值2,
    属性名3: 属性值3,
    方法名: function (形参列表) {}
}

调用格式：

对象名.属性名;
对象名.方法名();

4、JSON

概念：JavaScript Object Notation，JavaScript对象标记法。

JSON是通过JavaScript对象标记法书写的文本。

由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

定义：

格式: let 变量名 = '{"key1":value1, "key2":value2}';

JSON字符串 <-> JS对象 JSON.parse : 将json字符串转为js对象 JSON.stringify: 将js对象转为json字符串

let userStr = '{"name":"Jerry", "age":18, "addr":["北京","上海","西安"]}';
let jsObj = JSON.parse(userStr); //将json字符串转为JS对象

console.log(jsObj.name);let jsonStr = JSON.stringify(jsObj); //将JS对象转为JSON字符串
console.log(jsonStr);

2、BOM

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

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

1、Window

Window是浏览器窗口对象。

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

属性 history：对 History 对象的只读引用。请参阅 History 对象。 location：用于窗口或框架的 Location 对象。请参阅 Location 对象。方法 alert()：显示带有一段消息和一个确认按钮的警告框。 confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。 setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。 setTimeout()：在指定的毫秒数后调用函数或计算表达式。

2、Location

Location是地址栏对象。获取：使用 window.location 获取，其中 window. 可以省略。属性： href：设置或返回完整的URL。

<body>
    <script>
        alert("Hello BOM");

        let a = confirm("您确认此操作吗?");
        if(a){
            alert("确定了此操作")
        }else{
            alert("您取消了此操作")
        }
         //定时器 - setTimeout : 延迟多长之间之后执行... 只会执行一次; 单位: ms

            setTimeout(function(){
                alert("我执行啦~~~");
            },3000)

        定时器 - setInterval : 周期性执行, 执行多次; 单位: ms

            setInterval(() => {
            console.log("我执行啦~~~!!!!");
            }, 3000);

             location对象
             alert(location.href);
             setTimeout(function(){
                location.href = "https://www.jd.com";
             },3000)
    </script>
</body>

3、DOM

DOM概念：全名Document Object Model，文档对象模型。

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

Document：整个文档

Element：元素对象

Attribut：属性对象

Text：文本对象

Comment：注释对象

JavaScript 通过DOM，就能够对HTML进行操作：

改变 HTML 元素的内容改变 HTML 元素的样式（CSS）对 HTML DOM 事件作出反应添加和删除 HTML 元素

DOM对象：浏览器根据HTML标签生成的JS对象

所有的标签属性都可以在这个对象上面找到修改这个对象的属性，就会自动映射到标签身上

DOM的核心思想：将网页的内容当做对象来处理

document对象

网页中所有内容都封装在document对象中它提供的属性和方法都是用来访问和操作网页内容的，如：document.write(…)

操作步骤：

1、获取DOM元素对象

2、操作DOM对象的属性或方法（查阅文档）

获取DOM对象：

根据CSS选择器来获取DOM元素，获取匹配到的第一个元素：document.querySelector('选择器')

根据CSS选择器来获取DOM元素，获取匹配到的所有元素： document.querySelectorAll('选择器')

注意：得到的是一个NodeList节点集合，是一个伪数组（有长度、有索引的数组，但没有push、pop等数组方法）

五、事件监听

1、什么是事件? 什么是事件监听 ?

事件：HTML事件是发生在HTML元素上的 "事情"。比如： 1、按钮被点击 2、鼠标移动到元素上 3、按下键盘按键

2、事件监听

事件监听：JavaScript可以在事件触发时，就立即调用一个函数做出相应，也称为事件绑定或注册事件。

事件源.addEventListener('事件类型', 事件触发执行的函数)；

事件监听三要素事件源：哪个dom元素触发了事件，要获取dom元素事件类型：用什么方式触发，比如：鼠标单击 click，鼠标经过 mouseover 事件触发执行的函数：要做什么事

3、常见事件

1、鼠标事件

click：鼠标点击 mouseenter: 鼠标移入 mouseleave: 鼠标移出

2、键盘事件

keydown：键盘按下触发 keyup: 键盘抬起触发

3、焦点事件

focus：获得焦点触发 blur: 失去焦点触发

4、表单事件

input：用户输入时触发 submit: 表单提交时触发

沐之湫

关注

10
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript

函数（ function）是被设计用来执行特定任务的代码块，方便程序的封装复用。定义：JavaScript中的函数通过function关键字进行定义语法：/*function functionName(参数1, 参数2 ...){要执行的代码}*///调用：函数名称(实际参数列表)注意：由于JS是弱类型语言，形参、返回值都不需要指定类型。在调用函数时，实参个数与形参个数可以不一致，但是建议一致。
复制链接

扫一扫