前端基础(一)_初识JavaScript

news2025/1/13 10:31:34

最开始的时候,浏览器只能显示文本和图片,并不能做各种动态的操作。

一、JavaScript的历史

1、网景公司的布兰登艾奇开发了js
2、借鉴了java的数据管理机制、c的函数
3、Js的创建是用来解决浏览器和用户之间互动的问题(表单提交的问题)
4、历程:Mocha->livescript->javascript

二、JavaScript的核心组成

1.ECMAscript 核心语法 规定这门语言怎么写或者怎么用
2.DOM document object model 文档模型-----标签
3.BOM browser object model 浏览器模型–浏览器

2.1 JavaScript的组成

(1) ECMAScript js的语法标准 核心
(2) DOM: document object model 文档对象模型 dom提供了操作html文档的方法
(3) BOM:Browser object model 浏览器对象模型 bom提供了操作浏览器的方法

2.2 什么是JavaScript

JavaScript是一门基于对象的,由事件驱动的,解释性 脚本语言。
①基于对象:对象是JS中的一种数据,包含了一些方法,这些方法可以解决js中的一些最基本的操作(对象只能解决基础的问题)
②由事件驱动:主要是用来解决浏览器和用户之间的交互问题的。用户对浏览器页面进行操作,浏览器页面给用户对应的反馈,这些事情都是由事件来驱动完成的
③解释性

  1. 编译性:编译性语言在执行代码的时候。会先将整段代码进行一次编译,编译完之后生成一个exe文件,之后之用exe文件打开程序就可以一劳永逸了。
  2. 解释性:解释性语言在执行代码的时候,会逐行解释代码,解释一行执行一行
  3. 在开发浏览器页的时候,解释性语言由于不容易出现白屏,因此在开发网页的时候,更偏向于解释性语言,解释性语言也是跨平台的,因此,兼容性更好。

2.3 JavaScript的三种引入方式

(1)行内引入

<div onclick=”alert(‘我是行内引入’)></div>

②注意:引号的嵌套 如果语法哦引号的嵌套,需要外层引号
③不推荐使用行内引入的js代码,不利于结构和js代码逻辑分离

(2)内部引入 将代码写在script标签中

①在html代码中写入script标签,
②在script标签中写入js代码
③注意:在html文档中可以写入多个script标签,也可以将script写在任意位置,但是一般写在body末尾或者head标签末尾
④推荐把script写在body后面
⑤Html代码的执行顺序是从上到下的,如果遇到script标签,就会进入script标签,执行js代码,执行完之后再继续执行下去,因此如果再body前面获取元素,就获取不到,因此建议写在body标签的末尾

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
</head>

<body>
  <div class="box">
    我是box盒子
  </div>
  <script>
    setTimeout(() => {
      const box = document.getElementsByClassName('box')[0]
      alert(box.innerHTML)
    }, 1000)
  </script>
</body>


</html>

在这里插入图片描述

(3)外部引入 使用script的src属性引入

①写入script标签
②将script标签的src属性设置外部js文件的路径
③注意:外部引入的js文件的script标签中不能写任何js代码,如果写了也不会执行。
Href和src的区别 都是指的路径 一个指的外部样式的路径 一个是js的外部路径
a标签和css外部进入都是href
js和图片都是src

html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
</head>

<body>
  <div class="box">
    我是box盒子
  </div>
  <script src="./text.js"></script>
</body>

</html>

js:

setTimeout(() => {
  const box = document.getElementsByClassName('box')[0]
  alert(box.innerHTML)
}, 1000)

在这里插入图片描述
在这里插入图片描述

三、window.onload

(1)Window.οnlοad=function(){js代码}
(2)作用:写在大括号的js代码会等到页面上的所以标签和外部资源(图片、音频、视频、外部文件)都加载完 再执行;

  <script>
    window.onload = () => {
      const box = document.getElementsByClassName('box')[0]
      alert(box.innerHTML)
    }
  </script>

网页和网站的区别
网页:html css js
网站:由网页组成

浏览器:谷歌 火狐 opera IE safari 等等
为什么会有兼容:因为浏览器的内核不一样

Java和javascript之间的关系? 没有任何半毛钱关系。

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

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

相关文章

LeanCloud 快速实现服务端

1. 实现与服务器交互平台 1.1 Google 平台的 Firebase (需要科学网络) Firebasehttps://firebase.google.cn/ 1.2 LeanCloud 平台 LeanCloudhttps://www.leancloud.cn/ 2. 配置信息 2.1 在 LeanCloud 控制台创建应用, 根据 SDK下载 开发指南配置应用 2.2 配置文件 build…

拉伯杠杆平台|新冠药龙头跳水,万亿产业开启新阶段!

依照此前发表的时间表&#xff0c;新修订的《体育法》将于2023年1月1日起正式施行。 12月27日早盘&#xff0c;A股前期大热的抗疫体裁呈现显着回落。熊去氧胆酸、新冠药、肝炎概念、新冠检测、生物疫苗等体裁跌幅较大。熊去氧胆酸、新冠药两大板块跌幅超过4%&#xff0c;抢手龙…

外贸采购管理对业务的影响及解决方案

在外贸企业中&#xff0c;采购环节的把控对整个业务环节都有影响。像是采购供应商是否能够按时到货&#xff0c;会直接影响生产进度&#xff1b;采购质量的好坏直接影响产品的生产进度及质量&#xff1b;采购成本的高低&#xff0c;直接影响产品的成本及利润&#xff1b;采购供…

NSUM 问题

目录标题两数之和两数之和 2&#xff08;多个结果集去重&#xff09;15. 三数之和两数之和 问题描述 给定一个整数数组 nums 和一个目标值 target&#xff0c;请你在该数组中找出和为目标值的那 两个 整数&#xff0c;并返回他们的数组下标。 你可以假设每种输入只会对应一个答…

基于Java(JSP)+MySQL实现(Web)学生成绩综合管理系统【100010065】

Java 课程设计:师生交流系统 1.1 课设题目 信息商务学院学生成绩综合管理系统的综合与开发 2.1 课设目的 《Java 程序设计》课程是计算机专业的一门专业必修课程&#xff0c;针对课程进行为期两周的实践教学&#xff0c;旨在提升本专业学生对此课程中的理论知识的综合应用能…

[Python学习系列] 走进Django框架

文章目录1. 安装django2. 创建项目&#xff08;命令的方式&#xff09;在第一次创建django项目需要做的&#xff1a;每一次创建django项目需要做的&#xff1a;3. 创建app4. 启动运行django项目程序5. 模板&静态文件的存放地址6. django中的模板语法7. django中常见的请求和…

ArcGIS基础实验操作100例--实验4矢量要素的镜像复制,缩放

实验平台&#xff1a;ArcGIS 10.6 实验数据&#xff1a;请访问实验1&#xff08;传送门&#xff09; 基础编辑篇--实验4 矢量要素的镜像复制&#xff0c;缩放 目录 一、实验背景 二、实验数据 三、实验步骤 &#xff08;1&#xff09;加载【Mirror Features】工具 &#x…

VMware之安装Windows10系统

系统下载 下载地址&#xff1a;原版软件 (itellyou.cn) 创建虚拟机系统框架 在菜单栏中选择文件下的新建虚拟机 选择自定义&#xff0c;然后点击下一步 直接下一步 选择稍后安装操作系统&#xff0c;然后点击下一步 因为安装的系统是Windows&#xff0c;这里注意选择Microsof…

使用eBPF追踪Linux内核

简介 BPF&#xff0c;及伯克利包过滤器Berkeley Packet Filter&#xff0c;最初构想提出于 1992 年&#xff0c;其目的是为了提供一种过滤包的方法&#xff0c;并且要避免从内核空间到用户空间的无用的数据包复制行为。它最初是由从用户空间注入到内核的一个简单的字节码构成&…

浏览器:理解HTTP无状态与Cookie的使用

一、理解HTTP无状态 1.1、理解http无状态 http无状态是指协议对于用户身份、用户状态、用户权限、交互场景等没有记忆能力。简单讲就是不能识别用户。 1.2、http无状态的优点&#xff1a; 可以更快地处理大量的事务&#xff0c;确保协议的可伸缩性&#xff0c;减少服务器的…

一文搞定十大排序算法(动画图解)

排序的定义 排序&#xff0c;就是重新排列表中的元素&#xff0c;使表中的元素满足按关键字递增或递减的过程。为了査找方便&#xff0c;通常要求计算机中的表是按关键字有序的。 排序的确切定义如下&#xff1a; 算法的稳定性&#xff1a; 若待排序表中有两个元素 Ri 和 Rj&am…

包装类和简单认识泛型

目录 1.包装类 1.1基本数据类型和对应的包装类 1.2装箱和拆箱 1.3自动装箱和自动拆箱 2.什么是泛型 3.引出泛型 3.1语法 4.泛型类的使用 4.1语法 4.2类型推导 5.裸类型 5.1说明 6.泛型如何编译的 6.1擦除机制 6.2为什么不能实例化泛型类型的数组 7.泛型的上界 …

MaxKey单点登录认证系统3.5.12发布,重要漏洞修复

业界领先的IAM/IDaas身份管理和认证产品 概述 MaxKey单点登录认证系统&#xff0c;谐音马克思的钥匙寓意是最大钥匙,是业界领先的IAM/IDaas身份管理和认证产品,支持OAuth 2.x/OpenID Connect、SAML 2.0、JWT、CAS、SCIM等标准协议&#xff0c;提供安全、标准和开放的用户身份…

STM32/51单片机实训day3——点亮LED灯、闪烁LED灯(二)实践

内 容&#xff1a;编写代码实现LED灯的点亮功能 学 时&#xff1a;2学时 知识点&#xff1a;分析原理图、LED灯控制原理 重点&#xff1a;GPIO参数配置、LED原理图分析 难点&#xff1a;编写 GPIO参数配置函数、LED点亮函数 时间&#xff1a;2022年12月21日 9:00&#xff5e;…

如何轻松做数据治理?开源技术栈告诉你答案

搭建一套数据治理体系耗时耗力&#xff0c;但或许我们没有必要从头开始搞自己的数据血缘项目。本文分享如何用开源、现代的 DataOps、ETL、Dashboard、元数据、数据血缘管理系统构建大数据治理基础设施。 元数据治理系统 元数据治理系统是一个提供了所有数据在哪、格式化方式…

vue2.0中集成并使用ueditor,解决第一次编辑器正常加载,第二次就不加载的问题,父组件调用子组件的方法

vue2.0中集成并使用ueditor 最近有项目需要使用编辑器&#xff0c;就找了一款百度的ueidtor编辑器&#xff0c;第一次用各种不会&#xff0c;所以记录一下 下面的链接就是ueditor的前后端的配置说明和API等 链接: ueidtor的API 下载ueidtor 下载最新版的1.5.0版本&#xf…

基于Flask+bootstrap+sqlite开发宝宝成长管理系统,宝宝成长记录系统源码

BabyLog 岁月如风&#xff0c;唯有此忆, 任凭时光匆匆&#xff0c;记录点点滴滴。 当爸爸了&#xff0c;就多陪陪孩子&#xff0c;有事没事的记些东西&#xff0c;不要总把心思放在程序编码上&#xff0c;也多陪陪孩子&#xff01; 记录了那么多条数据&#xff0c;是时候也为…

Linux之Shell脚本学习笔记(持续更新中......)

Shell是什么 命令解释器。为用户提供了一个向Linux内核发送请求一i按运行程序的界面系统级程序。 Shell编程快速入门 脚本格式要求 脚本以#!/bin/bash开头脚本需要有可执行权限 编写脚本&#xff0c;输出HelloWorld 编写 #!/bin/bash echo "hello world!"执行 …

Stm32开发1-蓝牙实现STM32的无线烧写程序 ISP模式 串口1不受影响 无线下载

最近研究如何实现Stm32的无线烧写程序。从CSDN上看到大部分的无线烧写方法&#xff0c;大都是采用ESP8266CMSIS-DAP的方式&#xff0c;其能下载也能调试程序&#xff0c;也能通过虚拟串口通信。但是其串口应该是用软件实现的&#xff0c;会占用系统资源&#xff0c;对于其能否实…

【unity3D】DoTween动画插件(上)

&#x1f497; 未来的游戏开发程序媛&#xff0c;现在的努力学习菜鸡 &#x1f4a6;本专栏是我关于游戏开发的学习笔记 &#x1f236;本篇是unity的DoTween动画插件 DoTween动画插件&#xff08;上&#xff09;基础知识一些常用方法DOMove和DoLocalMovefrom TerrnsDOText打字机…