JavaScript Intro For Trysky.OMC

2023-11-22 00:50
文章标签 java script intro omc trysky

本文主要是介绍JavaScript Intro For Trysky.OMC,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

JS Tutorial For TrySky IT Center (Operation and Maintenance Center)

Written by Zhang Zhihong in 2021

GO NOW

01 Introduction

HTML是一种标记语言,用来结构化我们的网页内容并赋予内容含义,例如定义段落、标题和数据表,或在页面中嵌入图片和视频。

CSS 是一种样式规则语言,可将样式应用于 HTML 内容, 例如设置背景颜色和字体,在多个列中布局内容。

JavaScript 是一种脚本语言,可以用来创建动态更新的内容,控制多媒体,制作图像动画,还有很多。(好吧,虽然它不是万能的,但可以通过简短的代码来实现神奇的功能。)

there are three ways to use the javascript:

  1. 在网页中使用<script>标签的方式插入JavaScript
  2. 直接在html元素标签中嵌入JavaScript
  3. 引入外部JavaScript文件

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的<body>和<head> 部分中。

02 First JS program

Here will show that how js work in html ,as you can seem, usually you need a “document” to start you code, you can think of it as an object.(It’s easy to understand if you learn an object-oriented programming language like Java.)
If you’re so confused, use it as a tool that you can use to run JavaScript statements.

//1.0
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>document.write("now,I want to write a js program for my html");document.write("<h1>now,I want to write a js program for my html in h1</h1>");</script>
</head><body><h1>now,I write a normal h1 in html</h1>
</body></html>

In the code above, “document.write” was used to write sentences into web page, it is not different from which write in html. But it depend on JavaScript.

So, now you have learn how to use JS in first way: “1.在网页中使用<script>标签的方式插入JavaScript”

Here placed <script> lable in <head>, in fect, you can placed <script> lable in <head> or </body>, in most time, I suggest you write <script> lable in </body>, and put it at the bottom! If you use Link, keep it at the bottom!

(As for the bottom problem, you can see in the code below, When you put the <script> lable at the bottom, it will be the last to be interpreted.Sometimes you can put a few <script> lable in front, but if you have <script> lable that use ID, it’s a good idea to put the <script> lable at the bottom. Once you learn how to use ID in JS, you will understand it more deeply. )

//2.0
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><h1>now,I write a normal h1 in html</h1><script>document.write("now,I want to write a js program for my html");document.write("<h1>now,I want to write a js program for my html in h1</h1>");</script>
</body>
</html>

what about second way, I don’t think it is a good way to code, if you are intersted, you can learn it in Internet.

Now I would like to tell you third way: “3.引入外部JavaScript文件”
It is nothing different from CSS, just link it !

//3.0
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>I am a html sentence</p>
</body>
<script src="poem1.js"></script>
</html>

As you can see, we don’t use the “link” like CSS but “src” in <script> lable, and my external JS file named “poem1.js”, so I link it like what in code. Here is the code for my JS file.

//3.0
document.write("<p>I am an external JS file</p>")

And output is:

I am a html sentenceI am an external JS file

Now I add some code for my js file “poem1.js”: I add a “function”, it’s name is “myFunction”, and the content of this function is " document.getElementById(“poem”).innerHTML = "I am an external JS file by id "; "

The last sentence “myFunction()” means that I call(use) this function.

//4.0
document.write("<p>I am an external JS file</p>")function myFunction() {document.getElementById("poem").innerHTML = "I am an external JS file by id";
}myFunction()

What it mean is that put the sentence “I am an external JS file” in html, write it out. But the problem is where it put ?

hh you guess it! Writing it at where have ID named “poem”.
So, my html file is:

//4.0
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><p id="poem"></p>
</body>
<script src="poem1.js"></script></html>

Output is:

在这里插入图片描述

As I mentioned earlier, if the ID is used but the <script> label is not placed at the bottom, then the following happens:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="poem1.js"></script>
</head>
<body><p id="poem"></p>
</body></html>

And the output is:
在这里插入图片描述

JS doesn’t work! Why?

Because HTML files are interpreted sequentially, when a <script> label is interpreted earlier (at which point the ID has not yet been seen by the interpreter), the interpreter will skip the JS statement because it cannot find the ID. So by putting JS at the bottom, you can make sure that you’ve explained all the ID before you run JS(<script> label).

This is the end. Thank.

2021.1.13.by zhang

这篇关于JavaScript Intro For Trysky.OMC的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/406293

相关文章

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

Spring WebFlux 与 WebClient 使用指南及最佳实践

《SpringWebFlux与WebClient使用指南及最佳实践》WebClient是SpringWebFlux模块提供的非阻塞、响应式HTTP客户端,基于ProjectReactor实现,... 目录Spring WebFlux 与 WebClient 使用指南1. WebClient 概述2. 核心依

Spring Boot @RestControllerAdvice全局异常处理最佳实践

《SpringBoot@RestControllerAdvice全局异常处理最佳实践》本文详解SpringBoot中通过@RestControllerAdvice实现全局异常处理,强调代码复用、统... 目录前言一、为什么要使用全局异常处理?二、核心注解解析1. @RestControllerAdvice2

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注

Spring事务传播机制最佳实践

《Spring事务传播机制最佳实践》Spring的事务传播机制为我们提供了优雅的解决方案,本文将带您深入理解这一机制,掌握不同场景下的最佳实践,感兴趣的朋友一起看看吧... 目录1. 什么是事务传播行为2. Spring支持的七种事务传播行为2.1 REQUIRED(默认)2.2 SUPPORTS2

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

Java进程异常故障定位及排查过程

《Java进程异常故障定位及排查过程》:本文主要介绍Java进程异常故障定位及排查过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、故障发现与初步判断1. 监控系统告警2. 日志初步分析二、核心排查工具与步骤1. 进程状态检查2. CPU 飙升问题3. 内存

java中新生代和老生代的关系说明

《java中新生代和老生代的关系说明》:本文主要介绍java中新生代和老生代的关系说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、内存区域划分新生代老年代二、对象生命周期与晋升流程三、新生代与老年代的协作机制1. 跨代引用处理2. 动态年龄判定3. 空间分

Java设计模式---迭代器模式(Iterator)解读

《Java设计模式---迭代器模式(Iterator)解读》:本文主要介绍Java设计模式---迭代器模式(Iterator),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录1、迭代器(Iterator)1.1、结构1.2、常用方法1.3、本质1、解耦集合与遍历逻辑2、统一

Java内存分配与JVM参数详解(推荐)

《Java内存分配与JVM参数详解(推荐)》本文详解JVM内存结构与参数调整,涵盖堆分代、元空间、GC选择及优化策略,帮助开发者提升性能、避免内存泄漏,本文给大家介绍Java内存分配与JVM参数详解,... 目录引言JVM内存结构JVM参数概述堆内存分配年轻代与老年代调整堆内存大小调整年轻代与老年代比例元空