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

相关文章

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参数概述堆内存分配年轻代与老年代调整堆内存大小调整年轻代与老年代比例元空

深度解析Java DTO(最新推荐)

《深度解析JavaDTO(最新推荐)》DTO(DataTransferObject)是一种用于在不同层(如Controller层、Service层)之间传输数据的对象设计模式,其核心目的是封装数据,... 目录一、什么是DTO?DTO的核心特点:二、为什么需要DTO?(对比Entity)三、实际应用场景解析

Java 线程安全与 volatile与单例模式问题及解决方案

《Java线程安全与volatile与单例模式问题及解决方案》文章主要讲解线程安全问题的五个成因(调度随机、变量修改、非原子操作、内存可见性、指令重排序)及解决方案,强调使用volatile关键字... 目录什么是线程安全线程安全问题的产生与解决方案线程的调度是随机的多个线程对同一个变量进行修改线程的修改操

从原理到实战深入理解Java 断言assert

《从原理到实战深入理解Java断言assert》本文深入解析Java断言机制,涵盖语法、工作原理、启用方式及与异常的区别,推荐用于开发阶段的条件检查与状态验证,并强调生产环境应使用参数验证工具类替代... 目录深入理解 Java 断言(assert):从原理到实战引言:为什么需要断言?一、断言基础1.1 语

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次,点赞13次,收藏8次。本文详细介绍了Java分层架构中的几个关键包:DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1

Java中的雪花算法Snowflake解析与实践技巧

《Java中的雪花算法Snowflake解析与实践技巧》本文解析了雪花算法的原理、Java实现及生产实践,涵盖ID结构、位运算技巧、时钟回拨处理、WorkerId分配等关键点,并探讨了百度UidGen... 目录一、雪花算法核心原理1.1 算法起源1.2 ID结构详解1.3 核心特性二、Java实现解析2.

SpringBoot整合liteflow的详细过程

《SpringBoot整合liteflow的详细过程》:本文主要介绍SpringBoot整合liteflow的详细过程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋...  liteflow 是什么? 能做什么?总之一句话:能帮你规范写代码逻辑 ,编排并解耦业务逻辑,代码

JavaSE正则表达式用法总结大全

《JavaSE正则表达式用法总结大全》正则表达式就是由一些特定的字符组成,代表的是一个规则,:本文主要介绍JavaSE正则表达式用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录常用的正则表达式匹配符正则表China编程达式常用的类Pattern类Matcher类PatternSynta

Spring Security中用户名和密码的验证完整流程

《SpringSecurity中用户名和密码的验证完整流程》本文给大家介绍SpringSecurity中用户名和密码的验证完整流程,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定... 首先创建了一个UsernamePasswordAuthenticationTChina编程oken对象,这是S