JS的学习与使用

JS的学习与使用

在这里插入图片描述

一 什么是Javascript?

  • Javascript是一门跨平台,面向对象的脚本语言,是用来控制网页行为的,它能使网页可以交互

  • java与Javascript是完全不同的语言,不论是概念还是设计,但是基础语法类似

  • ECMA国际定义了ECMAScript标准,JS是遵守这一标准的

二 JS引入方式

  • 内部脚本:将JS代码定义再HTML页面中

    • JS必须位于标签之间

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

    • 一般会把脚本至于元素的底部,可以改善显示速度

  • 外部脚本:将JS代码定义在外部JS文件中,然后引入到HTML页面中

    • 外部JS文件中,只能包含JS代码,不包含Script标签

    • Script标签不能自闭合 导致引入的JS文件无法使用

  • <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-引入方式</title><!-- 内部脚本 --><!-- <script>alert('Hello JS');</script> --><!-- 外部脚本 --><script src="../js/demo.js"></script>
    </head>
    <body></body>
    </html>
    

三 JS基础语法

  • 书写语法

    • 区分大小写:与Java一样,除变量名,函数名以及其他一切东西都是区分大小写的

    • 每行结尾的分号可有可无

    • 注释

  • 变量

    • 使用var关键字声明变量

    • 可以存放不同类型的值

    • 命名规则

      • 不能以数字开头

      • 使用驼峰命名

      • 字母数字下划线

    • <!DOCTYPE html>
      <html lang="en">
      <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-基本语法-变量</title>
      </head>
      <body></body>
      <script>// var定义变量var a = 10;a = "张三"; // 变量可以重新赋值alert(a);// 特点1:作用域比较大 全局变量// 特点2:可以重复定义{var x = 1;// alert(x);var x = "a";}alert(x);// 特点3:可以不声明直接使用// alert(y); // undefinedy = 100;alert(y);// let定义变量// 特点1:作用域比较小 局部变量{let x = 1;// alert(x);}// alert(x); // 报错// 特点2:不能重复定义// let x = 1;// let x = "a"; // 报错// const定义常量const PI = 3.14;// PI = 3.1415926; // 报错
      </script>
      </html>
      
  • 数据类型,运算符,流程控制语句

    • 数据类型

      • 原始类型:number(整数 小数 NaN) string boolean null underfined(变量未初始化默认值)

      • 引用类型

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

      • <!DOCTYPE html>
        <html lang="en">
        <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-数据类型</title>
        </head>
        <body></body>
        <script>// 原始数据类型alert(typeof 123); // numberalert(typeof(3.14)); // numberalert(typeof 'hello'); // stringalert(typeof true); // booleanalert(typeof(null)); // objectvar a;alert(typeof a); // undefined
        </script>
        </html>
        
    • 运算符

      • 算数运算符

      • 赋值运算符

      • 比较运算符

      • 逻辑运算符

      • 三元运算符

      • 全等运算符===

        • ==会进行类型转换 ===不会进行类型转换
    • 类型转换

      • 其他类型转为boolean

        • number:0和NaN为false

        • string:空字符串为false

        • null和undefined:false

        • <!DOCTYPE html>
          <html lang="en">
          <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-运算符</title>
          </head>
          <body></body>
          <script>// ==会进行类型转换 ===不会进行类型转换var age = 20;var _age = '20';var $age = 20;alert(age == _age); //truealert(age === _age); //falsealert(age === $age); //true// 类型转换 - 其他类型转为数字alert(parseInt("12"));alert(parseInt("12a45"));alert(parseInt("a12a45"));// 类型转换 - 其他类型转换为booleanif (0){alert("0转换为false");}if (NaN){alert("NaN转换为false");}if (""){alert("空字符串转换为false");}if (" "){alert("空格转换为true");}if ("abc"){alert("非空字符串转换为true");}if(null){alert("null转换为false");}if(undefined){alert("undefined转换为false");}   
          </script>
          </html>
          
  • 流程控制

四 JS函数

  • 介绍:函数是被设计为执行特定任务的代码块

  • 定义:通过function关键字进行定义

  • 注意:

    • 形参不需要类型

    • 返回值也不需要定义类型 可以在函数内部直接使用return返回即可

五 JS对象

  • Array

    • 用来定义数组

    • 定义:var arr = new Array();

                ` var arr = [1,2,3,4];`
      
    • 属性

      • length
    • 方法

      • foreach()

      • push()

      • splice()

    • <!DOCTYPE html>
      <html lang="en">
      <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-Array</title>
      </head>
      <body></body>
      <script>// // 定义数组// var arr = new Array(1,2,3,4);// // var arr2 = [1,2,3,4];// console.log(arr[0]);// console.log(arr[1]);// // 特点:长度可变 类型可变// var arr2 = [1,2,3,4];// arr2[10] = 50;// console.log(arr2[10]);// console.log(arr2[9]);// console.log(arr2[8]);// arr2[9] = "a";// arr2[8] = false;// console.log(arr2);var arr2 = [1,2,3,4];for (let i = 0; 2< arr2.length; i++) {console.log(arr2[i]);}// foreach:遍历数组中有值的元素arr2.forEach(function(e){console.log(e);})// ES6 箭头函数:(...) => {...}arr2.forEach((e) => {console.log(e);})// push:添加元素到数组末尾arr2.push(5);console.log(arr2);// splice:删除元素arr2.splice(2,2);
      </script>
      </html>
      
  • String

    • 定义

      • var str = new String("HelloString");

      • var str = "hello String";

    • 属性

      • length
    • 方法

      • charAt()

      • indexOf()

      • trim()

      • subString()\

    • <!DOCTYPE html>
      <html lang="en">
      <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-Array</title>
      </head>
      <body></body>
      <script>// 创建字符串对象// var str = new String("hello world");var str = " hello world ";console.log(str);// length属性console.log(str.length);// charAt()方法console.log(str.charAt(0));// indexOf()方法console.log(str.indexOf("lo"));// trim()方法var s = str.trim();console.log(s);// substring()方法 用于截取子字符串console.log(s.substring(0, 5));
      </script>
      </html>
      
  • JSON

    • 自定义对象

    • 定义

      • var user = {

        • name = ?;

        • age = ?;

      • }

    • <!DOCTYPE html>
      <html lang="en">
      <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-Array</title>
      </head>
      <body></body>
      <script>
      //    自定义对象
      var user = {name: "张三",age: 10,gender: "男",sayHi(){alert("hi");}
      }alert(user.name);
      user.sayHi();// 定义JSON
      // 多用于作为数据载体,在网络中进行数据传输
      var jsonstr = '{"name":"Tom","age":18,"gender":"男"}';
      alert(jsonstr.name); // undefined// JSON字符串转化为js对象
      var obj = JSON.parse(jsonstr);
      alert(obj.name);// js对象转化为JSON字符串
      alert(JSON.stringify(obj));</script>
      </html>
      
  • BOM

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

    • 组成:

      • Window:窗口对象

      • Location:地址栏对象

      • Navigator:浏览器对象

      • Screen:屏幕对象

      • History:历史记录对象

    • Window:

      • 获取:直接使用window,其中window可以省略,例如:alert()

      • 属性

        • history:对history对象的只读引用

        • location:用于窗口或框架的Location对象

        • navigator:对navigator对象的只读引用

      • 方法

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

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

        • setinterval():按照指定的周期(ms)来调用函数或计算表达式

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

    • Location

      • 获取:使用window.location或location

      • 属性:

        • href:设置或返回完整的url
    • <!DOCTYPE html>
      <html lang="en">
      <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-BOM</title>
      </head>
      <body></body>
      <script>//获取window.alert('hello BOM');alert('hello BOM window');//方法//confirm 弹出对话框 确认:true 返回:falsevar flag = confirm('您确认删除该记录吗?');alert(flag);//定时器 -- setInterval -- 周期性执行某一函数var i = 0;setInterval(function(){i++;console.log('定时器执行了' + i + '次');},2000);//定时器 -- setTimeout -- 延迟执行某一函数,只执行一次setTimeout(function(){console.log('延迟执行');},3000);//locationalert(location.href);location.href = 'http://www.baidu.com';
      </script>
      </html>
      
  • DOM

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

      • Doucument:整个文档对象

      • Element:元素对象

      • Attribute:属性对象

      • Text:文本对象

      • Comment:注释对象

    • Core DOM – 所有文档类型的标准模型

        • Doucument:整个文档对象

        • Element:元素对象

        • Attribute:属性对象

        • Text:文本对象

        • Comment:注释对象

    • XML DOM – XML文档的标准模型

    • HTML DOM – HTML文档的标准模型

      • Image:< img >

      • Button:< input type=“button” >

    • <!DOCTYPE html>
      <html lang="en">
      <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM</title>
      </head>
      <body><div id="tb1">课程表</div><table><tr><th>学号</th><th>姓名</th><th>分数</th><th>评语</th></tr><tr class="data"><td>001</td><td>张三</td><td>90</td><td>很优秀</td></tr><tr class="data"><td>002</td><td>李四</td><td>92</td><td>优秀</td></tr><tr class="data"><td>003</td><td>王五</td><td>83</td><td>很努力</td></tr><tr class="data"><td>004</td><td>赵六</td><td>98</td><td>666</td></tr></table><br><div style="text-align: center;"><input id="b1" type="button" value="改变标题内容" onclick="fn1()"><input id="b2" type="button" value="改变标题字体颜色" onclick="fn2()"><input id="b3" type="button" value="删除最后一个" onclick="fn3()"></div>
      </body>
      <script>function fn1(){document.getElementById('tb1').innerHTML="学员成绩表";}function fn2(){document.getElementById('tb1').style="font-size: 30px; text-align: center;  color: red;"}function fn3(){var trs = document.getElementsByClassName('data');trs[trs.length-1].remove();}
      </script>
      </html>
      
    • 在这里插入图片描述

    • <!DOCTYPE html>
      <html lang="en">
      <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM</title>
      </head>
      <body><img src="" id="h1"><br><br><div class="cls">14公寓421</div><br><div class="cls">黑科技惩虚员</div><br><input type="checkbox" name="hobby">电影<input type="checkbox" name="hobby">旅游<input type="checkbox" name="hobby">游戏</body>
      <script>//1 获取Element元素//1.1 获取元素--根据id获取var img = document.getElementById('h1');alert(img);//1.2 获取元素--根据标签名获取var divs = document.getElementsByTagName('div');for (let i = 0;i < divs.length;i++){alert(divs[i]);}//1.3 获取元素--根据类名获取var cls = document.getElementsByClassName('cls');for (let i = 0;i < cls.length;i++){alert(cls[i]);}//1.4 获取元素--根据name属性获取var hobbies = document.getElementsByName('hobby');for (let i = 0;i < hobbies.length;i++){alert(hobbies[i]);}//2.查询参考手册,完成属性,方法的获取var cls = document.getElementsByClassName('cls');cls[0].innerHTML = '14公寓421状元阁';</script>
      </html>
      

六 JS事件监听

什么是事件?

HTML事件是发生在HTML元素上的事情,比如:
  • 按钮被点击

  • 鼠标移动到元素上

  • 按下键盘按键

事件监听

JS可以在事件被侦测时执行指定的代码

事件绑定

  • 使用HTML标签中的事件属性进行绑定

  • 使用DOM对象属性进行绑定

常见事件
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/60601.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu20.04 解决Pytorch默认安装CPU版本的问题

ubuntu20.04 解决Pytorch默认安装CPU版本的问题 在使用Anaconda安装支持CUDA的PyTorch版本时&#xff0c;遇到只能安装CPU版本的PyTorch是一个常见问题。这通常由于Anaconda环境配置、镜像源设置不当或版本匹配问题导致。以下是详尽的解决方案和步骤&#xff0c;以确保能够正确…

【操作系统】守护进程

一、守护进程的概念 守护进程是一个在后台运行并且不受任何终端控制的进程 二、自己实现守护进程 1.预备知识 &#xff08;1&#xff09;/dev/null /dev/null是一个特殊的设备文件&#xff0c;往这个文件里写不进去任何数据&#xff0c;也读不出来任何数据 因此&#xff0…

【数据结构与算法】第12课—数据结构之归并排序

文章目录 1. 归并排序2. 计数排序3. 排序算法复杂度及稳定性分析在这里插入图片描述 1. 归并排序 分治法&#xff08;Divide and Conquer&#xff09;是一种重要的算法设计策略&#xff0c;其核心思想是将一个复杂的大问题分解为若干个小规模的子问题&#xff0c;递归地解决这些…

【安全通信】告别信息泄露:搭建你的开源视频聊天系统briefing

文章目录 前言1.关于briefing2.本地部署briefing3.使用briefing4.cpolar内网穿透工具安装5.创建远程连接公网地址6.固定briefing公网地址 前言 在这个信息爆炸的时代&#xff0c;视频聊天几乎成了我们日常沟通的标配。但你是否曾在视频会议中感到不安&#xff0c;担心自己的私…

RTOS基础-信号量和队列

引言 消息队列用于传输多个数据&#xff0c;但是有时候我们只需要传递状态&#xff0c;这个状态值需要用一个数值表示&#xff0c;使用信号量效率更高、更节省内存 信号&#xff1a;起通知作用 量&#xff1a;还可以用来表示资源的数量 当"量"没有限制时&#x…

pip install tkinter报错

pip install tkinter&#xff1a;ERROR: Could not find a version that satisfies the requirement tkinter 这是因为&#xff0c;安装python的时候没有安装tkinter选项&#xff0c;解决这个问题有下面两种方法 一、重新安装python 但是这个步骤有点麻烦 二、在python-3.1…

Java 实现自定义 LRU 缓存

一、引言 在现代软件系统中&#xff0c;缓存是提高性能的重要手段之一。LRU 缓存作为一种常用的缓存策略&#xff0c;能够根据数据的使用频率自动淘汰最近最少使用的数据&#xff0c;从而保持缓存的高效性。在 Java 中&#xff0c;虽然有一些现成的缓存框架可供使用&#xff0c…

Python的面向对象day7

1、什么是面向对象 面向对象称为OO&#xff0c;他通过将数据和功能封装在一个被称为‘对象’的实体中&#xff0c;来组织和管理代码。面向对象变成&#xff08;OOP&#xff09;具有四个特性&#xff0c;封装、继承、多态、抽象 优点&#xff1a;模块化、安全性高、代码重用性…

自动化工具 Gulp

自动化工具 gulp 摘要 概念&#xff1a;gulp用于自动化开发流程。 理解&#xff1a;我们只需要编写任务&#xff0c;然后gulp帮我们执行 核心概念&#xff1a; 任务&#xff1a;通过定义不同的任务来组织你的构建流程。 管道&#xff1a;通过管道方式将文件从一个插件传递…

大华Android面试题及参考答案

请解释 Service 和 IntentService 之间的区别。 Service 是 Android 中的一种组件,用于在后台执行长时间运行的操作,不提供用户界面。它可以通过 startService () 或者 bindService () 方法来启动。当通过 startService () 启动时,服务会一直运行直到自己停止或者被系统回收…

探索 Seata 分布式事务

Seata(Simple Extensible Autonomous Transaction Architecture)是阿里巴巴开源的一款分布式事务解决方案,旨在帮助开发者解决微服务架构下的分布式事务问题。它提供了高效且易于使用的分布式事务管理能力,支持多种事务模式,确保数据的一致性和完整性。 以下是 Seata 的一…

【QT常用技术讲解】优化网络链接不上导致qt、qml界面卡顿的问题

前言 qt、qml项目经常会涉及访问MySQL数据库、网络服务器&#xff0c;并且界面打开时的初始化过程就会涉及到链接Mysql、网络服务器获取数据&#xff0c;如果网络不通&#xff0c;卡个几十秒&#xff0c;会让用户觉得非常的不爽&#xff0c;本文从技术调研的角度讲解解决此类问…

探索美赛:从准备到挑战的详细指南

前言 美国大学生数学建模竞赛&#xff08;MCM/ICM&#xff09;&#xff0c;简称“美赛”&#xff0c;是全球规模最大的数学建模竞赛之一。它鼓励参赛者通过数学建模来解决现实世界中的复杂问题&#xff0c;广受世界各地大学生的欢迎。本文将详细介绍美赛的全过程&#xff0c;从…

selenium 控制内嵌table滚动条的方法

selenium 控制内嵌table滚动条的方法 我们经常会遇到selenium 无法捕获到对应元素的问题&#xff0c;其中有一个原因是由于页面中存在滚动条&#xff0c;而需要操作的元素需要滑动滚动条后才能捕获到。 之前有使用过如下方式&#xff1a; document.getElementById(id).scrollT…

编程之路,从0开始:知识补充篇

Hello大家好&#xff0c;很高兴我们又见面了&#xff01; 给生活添点passion&#xff0c;开始今天的编程之路&#xff01; 这一篇我们来补充一下在之前篇目没讲到的知识&#xff0c;并结合一些码友的私信提问和我在编程中遇到的问题&#xff0c;做一些易错点或易混点的讲解。 …

C语言中,让人又爱又恨的字符串编码

引言 在C语言的世界里&#xff0c;字符串编码是一个让人既爱又恨的话题。 所有的打印信息&#xff0c;都是以字符串输出的。但是&#xff0c;大家在编码的时候&#xff0c;经常会遇到一些情况&#xff0c;稍不注意&#xff0c;就会导致显示出乱码&#xff0c;到了客户那里&…

Javaweb—Ajax与jQuery请求

文章目录 十一.Javaweb—Ajax与jQuery请求11.1 异步/同步请求11.2 异步请求案例案例一&#xff1a;案例二&#xff1a; 十一.Javaweb—Ajax与jQuery请求 Ajax: 全称Asynchronous JavaScript And XML&#xff0c;异步的JavaScript和XML。 11.1 异步/同步请求 【往期文章】 同…

单片机中的BootLoader(重要的概念讲解)

文章目录 一、链接地址和执行地址1. 链接地址(Load Address)2. 执行地址(Execution Address)链接地址与执行地址的关系实际工作流程总结二、相对跳转和绝对跳转1. 相对跳转(Relative Jump)2. 绝对跳转(Absolute Jump)3. `BX` 和 `BL` 指令总结三、散列文件1. 散列文件的…

macOS解决U盘装完系统容量变小的问题

发现原来256GB容量的U盘在mac电脑上只显示34GB&#xff0c;想起来之前用该U盘装过系统&#xff0c;最终搜到了以下解决方案&#xff0c;在此记录&#xff1a; (1) 查看盘符列表&#xff0c;找到需要格式化的U盘&#xff0c;假设为disk4 diskutil list(2) 卸载分区disk4 disk…

Linux 系统管理和监控命令---- auditctl命令

文章目录 基本语法常用参数和选项添加规则删除规则查看规则控制审计系统其他选项 使用示例启用审计系统禁用审计系统添加文件监视规则删除文件监视规则添加系统调用规则删除系统调用规则列出当前的审计规则 结合 ausearch 和 aureport查询审计日志生成审计报告 总结 auditctl 是…