前端基础(一)_初识JavaScript

简介: 本文介绍了JavaScript的起源、核心组成(ECMAScript、DOM、BOM),并解释了JavaScript的三种引入方式:行内引入、内部引入和外部引入,以及`window.onload`的使用,最后讨论了网页、网站、浏览器和兼容性的概念。

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

一、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之间的关系? 没有任何半毛钱关系。

目录
相关文章
|
1月前
|
前端开发 JavaScript 开发者
【前端开发者的福音】彻底改变你编码习惯的神奇数组迭代技巧——从基础到进阶,解锁 JavaScript 数组迭代的N种姿势!
【8月更文挑战第23天】在Web前端开发中,数组是JavaScript中最常用的数据结构之一,掌握高效的数组迭代方法至关重要。本文详细介绍了多种数组迭代技巧:从基础的`for`循环到ES6的`for...of`循环,再到高阶方法如`forEach`、`map`、`filter`、`reduce`及`some`/`every`等。这些方法不仅能提高代码的可读性和维护性,还能有效优化程序性能。通过具体的示例代码,帮助开发者更好地理解和运用这些迭代技术。
26 0
|
1天前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
9 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
1天前
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
8 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
|
1天前
|
存储 前端开发 JavaScript
前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
本文详细介绍了JavaScript中的数据类型,包括基本数据类型(Number、String、Boolean、Undefined、Null)和复杂数据类型(Object),并解释了如何使用`typeof`操作符来识别变量的数据类型。同时,还讨论了对象、函数和数组等复杂数据类型的使用方式。
8 2
|
28天前
|
JavaScript 前端开发 API
揭秘现代前端开发秘籍:Vue.js与ES6如何联手打造惊艳应用?
【8月更文挑战第30天】本文介绍如何从零开始使用Vue.js与ES6创建现代前端应用。首先,通过简要介绍Vue.js和ES6的新特性,使读者了解这两者为何能有效提升开发效率。接着,指导读者使用Vue CLI初始化项目,并展示如何运用ES6语法编写Vue组件。最后,通过运行项目验证组件功能,为后续开发打下基础。适用于希望快速入门Vue.js与ES6的前端开发者。
47 3
|
1月前
|
前端开发 JavaScript 开发者
【Web 前端】彻底告别“this”指向困扰:从零开始掌握 JavaScript 中“this”的奥秘
【8月更文挑战第23天】在 JavaScript 中,`this` 关键字的指向是根据其调用上下文动态确定的,这对于 Web 前端开发者而言是一项核心技能。本文通过多个示例解释了 `this` 的指向规则:在对象方法中指向该对象,在独立函数中指向全局对象或 `undefined`,在事件处理器中指向触发事件的 DOM 元素,在构造函数中指向新创建的对象。此外,还介绍了一些技巧,如使用箭头函数、`bind` 方法以及在事件处理器中显式保存 `this` 的引用,以帮助开发者更好地理解和控制 `this` 的指向。
30 1
|
1月前
|
前端开发 JavaScript 程序员
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
|
1月前
|
存储 JavaScript 前端开发
后端程序员的前端基础-前端三剑客之JavaScript
后端程序员的前端基础-前端三剑客之JavaScript
23 4
|
1月前
|
前端开发
【前端】校园二手书交易系统javascript+css+html (源码)【独一无二】
【前端】校园二手书交易系统javascript+css+html (源码)【独一无二】
|
26天前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
46 0