在线词典web项目
Hi! At times, beginners always find it hard getting the application of the theory they learn in programming or a particular language.
嗨！ 有时，初学者总是很难在编程或特定语言中应用他们学到的理论。
In this article, we'll look at another application of JavaScript. We'll see the use/application of the switch statement which will help us build a simple web dictionary app.
在本文中，我们将介绍JavaScript的另一个应用程序。 我们将看到switch语句的使用/应用程序，它将帮助我们构建一个简单的Web字典应用程序。
I called it a web dictionary app because the switch statement gives us the opportunity to program different outputs when different requests are made.
我之所以称它为网络词典应用程序是因为switch语句使我们有机会在提出不同请求时对不同的输出进行编程。
The application will get user input via a form and will output the result as an alert.
该应用程序将通过表单获取用户输入，并将结果输出为警报。
It equally has an assigned default value if no result is found.
如果未找到结果，它同样具有分配的默认值。
First of all, let's begin by revising the syntax of the switch statement.
首先，让我们开始修改switch语句的语法。
The switch statement is used to avoid writing several if...else statements.
switch语句用于避免编写多个if ... else语句 。
switch(expression) {
case a:
code block
break;
case b:
code block
break;
default:
code block
}
Therefore, it evaluates different entries(case) and checks for its specific output, else it displays the default value.
因此，它将评估不同的条目(案例)并检查其特定输出，否则将显示默认值。
Open a text editor and type the code below.
打开文本编辑器，然后输入以下代码。
Save the file with the name Web Dictionary.html
用“ Web Dictionary.html ”名称保存文件
In this project, I added just some few test word in the switch case.
在这个项目中，我在switch case中仅添加了一些测试词。
Every acronym has it's meaning registered in the switch statement and a default value has been set for a case with no results.
每个缩写都有其含义，它已在switch语句中注册，并且为没有结果的情况设置了默认值。
NB: You can still use your desired CSS style!
注意：您仍然可以使用所需CSS样式！
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script type="text/javascript">
function Dic() {
var Word = document.getElementById('word').value;
var w = document.getElementById('go').value;
switch (Word) {
case 'PDF':
alert("portable digital format");
break;
case 'ASCII':
alert("american standard code for information interchange");
break;
case 'SIM':
alert("subscriber identity module");
break;
case 'HTML':
alert("hypertext markup language");
break;
case 'PHP':
alert("hypertext preprocessor");
break;
case 'CSS':
alert("cascading style sheet");
break;
case 'MTN':
alert("Mobile telephone network");
break;
case 'ISP':
alert("internet service provider");
break;
case 'DSL':
alert("digital subscriber line");
break;
default:
alert("Thanks for trusting us! No match found!")
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>C.P.O TOOLS</title>
<meta name="description" content="Good coders code, great coders reuse.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style-index.css">
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="logo">
<a href="https://go237.com"><img src="images/logo.png" alt="comic.browserling.com logo" title="Tools For All"></a>
</div>
<div id="logo-text">
Tools For All
</div>
</div>
<div id="body">
<h1>Coders</h1>
<div id="text">
Good coders code, great coders reuse.
</div>
<hr> Free Computer Acronym (Abbreviation) Dictionary!!
<br> Test Acronyms include...</br>
<br>PDF
<br>MTN
<br>DSL
<br>SIM
<br>ASCII
<form>
<br>
<input type="text" id="word" size='30' required placeholder='Word' />
<br/>
<br/>
<button onclick='Dic2();' id='go' /> Search!</button>
</form>
<br/>
<br/>
<hr>
</body>
</html>
Output Image:
输出图像：
Thanks for coding with me. Your comments are most welcome.
感谢您与我一起编码。 非常欢迎您发表评论。
在线词典web项目
4275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
