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

相关文章

Spring Security常见问题及解决方案

《SpringSecurity常见问题及解决方案》SpringSecurity是Spring生态的安全框架,提供认证、授权及攻击防护,支持JWT、OAuth2集成,适用于保护Spring应用,需配置... 目录Spring Security 简介Spring Security 核心概念1. ​Securit

SpringBoot+EasyPOI轻松实现Excel和Word导出PDF

《SpringBoot+EasyPOI轻松实现Excel和Word导出PDF》在企业级开发中,将Excel和Word文档导出为PDF是常见需求,本文将结合​​EasyPOI和​​Aspose系列工具实... 目录一、环境准备与依赖配置1.1 方案选型1.2 依赖配置(商业库方案)二、Excel 导出 PDF

SpringBoot改造MCP服务器的详细说明(StreamableHTTP 类型)

《SpringBoot改造MCP服务器的详细说明(StreamableHTTP类型)》本文介绍了SpringBoot如何实现MCPStreamableHTTP服务器,并且使用CherryStudio... 目录SpringBoot改造MCP服务器(StreamableHTTP)1 项目说明2 使用说明2.1

spring中的@MapperScan注解属性解析

《spring中的@MapperScan注解属性解析》@MapperScan是Spring集成MyBatis时自动扫描Mapper接口的注解,简化配置并支持多数据源,通过属性控制扫描路径和过滤条件,利... 目录一、核心功能与作用二、注解属性解析三、底层实现原理四、使用场景与最佳实践五、注意事项与常见问题六

Spring的RedisTemplate的json反序列泛型丢失问题解决

《Spring的RedisTemplate的json反序列泛型丢失问题解决》本文主要介绍了SpringRedisTemplate中使用JSON序列化时泛型信息丢失的问题及其提出三种解决方案,可以根据性... 目录背景解决方案方案一方案二方案三总结背景在使用RedisTemplate操作redis时我们针对

Java中Arrays类和Collections类常用方法示例详解

《Java中Arrays类和Collections类常用方法示例详解》本文总结了Java中Arrays和Collections类的常用方法,涵盖数组填充、排序、搜索、复制、列表转换等操作,帮助开发者高... 目录Arrays.fill()相关用法Arrays.toString()Arrays.sort()A

Spring Boot Maven 插件如何构建可执行 JAR 的核心配置

《SpringBootMaven插件如何构建可执行JAR的核心配置》SpringBoot核心Maven插件,用于生成可执行JAR/WAR,内置服务器简化部署,支持热部署、多环境配置及依赖管理... 目录前言一、插件的核心功能与目标1.1 插件的定位1.2 插件的 Goals(目标)1.3 插件定位1.4 核

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

Java堆转储文件之1.6G大文件处理完整指南

《Java堆转储文件之1.6G大文件处理完整指南》堆转储文件是优化、分析内存消耗的重要工具,:本文主要介绍Java堆转储文件之1.6G大文件处理的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言文件为什么这么大?如何处理这个文件?分析文件内容(推荐)删除文件(如果不需要)查看错误来源如何避