all AI news
JS Study Notes(1) CN
April 10, 2024, 5:55 a.m. | Emmmeline
DEV Community dev.to
study note. study from: https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript
一、 什么是JS
高层定义:
- 有了JS,网页展示的信息不再是简单的静态信息,而是实时的内容更新(i.e. 交互式的地图,滚动播放的视频)
- HTML/CSS/JS的层次结构
- HTML 会将文本标记,赋予结构和目的
- CSS用来装饰,让文本变得更好看
- JS用来实现动态行为
二、 它到底可以做什么
2.1 可以做到普通的编程特性
- 在变量中储存有用的值e.g. 请求客户输入一个变量名,将这个名字输入到name变量中
- 操作一段文本,e.g.将两个字符串结合起来
- 运行代码以响应网页中发生的特定事件。
2.2 令人兴奋的功能
应用程序接口 API-Application Programming Interface
API分为两类:
- 浏览器API:
1. !!文档对象模型DOM(document obj model) e.g. 某个页面出现了一个弹窗,或者显示了一些新内容
2. 地理位置API: 获取地理信息
3. 影音类API: 利用多媒体,在网页中直接播放音乐和影片
- 第三方API- 没有默认嵌入浏览器,一般要从网上获取他们的信息:
1. 推特API: 可以在网站上展示最新推文
2. 谷歌地图API: 可以在网站嵌入定制的API
# 三、 JS在页面上做了什么/JS运行时,背后发生的事情
### 3.1 过程
浏览器在读取一个网页时,代码(HTML/CSS/JS)将在一个运行环境(浏览器标签页)中得到执行。
- 注意!: 网页文档的代码需要按照其在页面上出现的顺序加载和执行。e.g. 如果JS先于要修改的HTML和CSS加载和运行,则可能发生错误。
- 每个标签页中的代码独立运行。一个标签页的代码不影响另一个。
### 3.2 JS运行次序
- 引用对象前,必须确保对象已经存在:
```jsx
const para = document.querySelector("p");
para.addEventListener("click", updateName);
function updateName() …
api application application programming interface css document html programming
More from dev.to / DEV Community
Jobs in AI, ML, Big Data
Data Engineer
@ Lemon.io | Remote: Europe, LATAM, Canada, UK, Asia, Oceania
Artificial Intelligence – Bioinformatic Expert
@ University of Texas Medical Branch | Galveston, TX
Lead Developer (AI)
@ Cere Network | San Francisco, US
Research Engineer
@ Allora Labs | Remote
Ecosystem Manager
@ Allora Labs | Remote
Founding AI Engineer, Agents
@ Occam AI | New York