小寫大寫轉換
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 see another application of JavaScript. We'll see the use/application JavaScript objects and properties/methods to build a web app that converts lowercase to uppercase letters.
在本文中，我們將看到JavaScript的另一個應用程序。 我們將看到使用/應用程序JavaScript對象和屬性/方法來構建將小寫字母轉換為大寫字母的Web應用程序 。
The application will get user input via a text box or text area and will output the result in the same text box.
該應用程序將通過文本框或文本區域獲取用戶輸入，并將結果輸出到同一文本框中。
Seems like magic right!!!
好像是魔術吧！
You may think applying the knowledge is the same as when you were getting lectures on it! But that's not true.
您可能會認為，應用知識與獲得知識一樣！ 但這不是事實。
The application of every concept in programming needs extra tips and knowledge to be successful.
每個概念在編程中的應用都需要額外的技巧和知識才能成功。
First of all, let's begin by revising the syntax of JavaScript string object methods...
首先，讓我們從修改JavaScript字符串對象方法的語法開始...
JavaScript string methods are used to perform specific tasks on string objects or strings (some).
JavaScript字符串方法用于對字符串對象或字符串(某些)執行特定的任務。
For example:
例如：
var x = hello.toUpperCase();
Assigns the text hello to variable x in uppercase.
將文本hello分配給大寫的變量x 。
Now, let's move to our project.
現在，讓我們轉到我們的項目。
Open a text editor and type the code below.
打開文本編輯器，然后輸入以下代碼。
Save the file with the name uppercase.html
保存文件，命名為uppercase.html
NB: You can still use your own desired CSS style!
注意：您仍然可以使用自己想要CSS樣式！
In the case of this project, we'll get the input in the text box/area using its element and then apply the JavaScript string object method to it.
對于本項目，我們將使用其元素在文本框/區域中獲取輸入，然后對其應用JavaScript字符串對象方法。
Code:
碼：
<!DOCTYPE html>
<html>
<head>
<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">
<a href="https://go237.com"><img src="images/logo.png" alt="comic.browserling.com logo" title="Tools For All"></a>
</div>
<div id="body">
<h1>Coders</h1>
<div id="text">
Good coders code, great coders reuse.
</div>
<hr>
<center>
<script type=t ext/javascript>
function convert (){ w = document.getElementById('#1').value; var p = w.toUpperCase(); document.getElementById('#1').value = p ; }
</script>
<center>
<form>
<textarea name="text" rows="10" cols="30" placeholder='Your text here!' id='#1'></textarea>
<br/>
<br/>
<img id='pic' src="1.gif" width: '30%'>
<br/>
<br/>
<input type="button" onclick='convert();' value='Convert!' ); '></button>
</center>
</form>
</body>
</html>
In this project, I used my own CSS styles. You can feel free to use any you desire.
在這個項目中，我使用了自己CSS樣式。 您可以隨意使用任何您想要的東西。
Open the html file and test out your web application.
打開html文件并測試您的Web應用程序。
Output Image:
輸出圖像：
Thanks for coding with me. Your comments are most welcome.
感謝您與我一起編碼。 非常歡迎您發表評論。
翻譯自: https://www.includehelp.com/code-snippets/lowercase-to-uppercase-converter-javascript-tool-web-app-project.aspx
小寫大寫轉換
