JavaScript 시리즈 소개 - #1 - 문자열 개체가 있는 양식
3547 단어 introductionwebdevjavascript
<!--Code Segment1-->
<!DOCTYPE html>
<html>
<head>
<title>Form with String object</title>
</head>
코드의 이 부분에서는
<title> 태그 안에 포함된 <head> 태그 안에 "문자열 개체가 있는 양식"인 웹 페이지에 제목을 지정합니다.<!--Code Segment1-->
<body style="background-color:orange">
style 태그의 <body> 속성 내에서 background-color ~ orange 의 CSS 스타일을 지정하고 있습니다. 그러면 웹 페이지의 배경색이 주황색으로 설정됩니다.<!--Code Segment3-->
<h3>Enter your text in the given text area</h3>
<form name="wordcount">
<textarea name="wordcount2" rows="12" cols="38" wrap="virtual" style="color:white;background-color:black;font-size:20px;"></textarea><br></br>
<input type="button" value="Calculate Words" onClick="Countit()">
<input type="text" name="wordcount3" size="20">
</form>
이 코드 세그먼트에서 우리는
<form>인 wordcount에 이름을 부여하고 사용자가 텍스트를 입력할 텍스트 영역을 지정합니다. 텍스트 영역 이름은 wordcount2 로 지정되며 JavaScript에서 특정 문서 요소에 액세스하는 데 도움이 됩니다. 텍스트 영역에 다음과 같은 특정 스타일을 지정합니다.(wrap 속성은 텍스트 영역의 텍스트가 양식으로 제출될 때 줄 바꿈되는 방식을 지정합니다.
Wrap를 virtual로 설정하면 긴 줄이 textarea로 줄 바꿈되지만 전송된 데이터에서는 줄 바꿈되지 않습니다. 처리 스크립트로.)값이
Calculate Words 인 버튼도 배치되며, 이 버튼을 누르면 단어 수의 결과가 표시됩니다. 즉, Countit() 기능이 호출됩니다. 그리고 출력을 표시할 텍스트 영역이 지정됩니다.<!--Code Segment4-->
<script type="text/javascript">
function Countit()
{
var formcontent = document.wordcount.wordcount2.value
formcontent = formcontent.split(" ")
document.wordcount.wordcount3.value = formcontent.length
}
</script>
Countit() 태그 안에 <script>라는 함수를 만들었습니다. 이 함수 내에서 문서 요소 이름으로 참조되는 사용자가 입력하는 텍스트를 보유할 문자열 객체formcontent를 시작했습니다. 그런 다음 String 개체에서 split() 함수를 호출하고 결과를 동일한 개체에 저장합니다.Use of split() function:
Split a string into an array of substrings
Eg:
var str = "How are you doing today?";
var res = str.split(" ");
Output:
["How", "are", "you", "doing", "today?"]
그런 다음 배열의 길이 속성을 사용하여 배열 String 개체
formcontent의 길이를 계산하고 결과를 텍스트 요소wordcount3의 값 속성에 출력합니다.<!--Code Segment5-->
</body>
</html>
이것은 코드 세그먼트의 끝입니다.
산출:
읽어 주셔서 감사합니다,
동일한 시리즈에 대한 다음 몇 개의 기사를 주시하십시오.
따르다:
Reference
이 문제에 관하여(JavaScript 시리즈 소개 - #1 - 문자열 개체가 있는 양식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/subhajit_saha/introduction-to-javascript-series-1-form-with-string-object-3emm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
