JavaScript 초보자 튜토리얼(4강)_기본 지식

변수는 숫자, 문자열, 객체 매개변수가 될 수 있다는 것을 배웠습니다. Javascript에는 또 다른 중요한 부분인 배열이 있습니다.
배열은 목록입니다. 목록, URL, 색상 목록 등 다양한 목록을 배열에 저장할 수 있습니다.
여기서는 색상 배열을 생성합니다.
var colors = new Array("red","blue","green")
이제 배열이 생겼습니다. 이를 사용하여 무엇을 할 수 있습니까? 배열의 장점은 배열의 개별 요소를 숫자로 호출할 수 있다는 것입니다. 첫 번째 요소의 번호는 0이며 다음과 같은 방법으로 호출할 수 있습니다.
var the_element = colors[0];
이 JavaScript 명령 줄이 실행되면 변수 the_element에 할당된 값은 문자열입니다. "빨간색". 이름을 쓰고 순서 번호를 대괄호 안에 넣어 배열의 요소를 호출할 수 있습니다. 배열의 두 번째 요소의 시퀀스 번호는 1입니다.
배열이 생성되면 배열 값을 추가하고 수정할 수 있습니다. 색상 배열의 첫 번째 요소를 빨간색에서 보라색으로 변경하려면 다음과 같이 하면 됩니다.
colors[0] = "purple"
배열은 루프에서 자주 사용됩니다. 배열과 루프의 적용은 아래에서 논의됩니다.
배열은 배열의 각 요소를 반복하여 특정 기능을 수행할 수 있기 때문에 매우 유용합니다. 다음은 URL 배열의 요소를 반복하는 예입니다.
먼저 이 예제를 작동하려면 몇 가지 변수를 선언해야 합니다.
var url_names = new Array("hits.org","awaken.org","bianca.com")
var a_url
다음으로 배열의 각 요소를 반복하고 각 URL을 열고 사용자가 경고 상자의 확인 버튼을 클릭할 때까지 기다립니다.
for(loop=0; loop {
// URL 이름을 만듭니다(예: http://www.php.cn/
a_url = "http://www." url_names[loop] "/";
// 창 열기
var new_window=open(a_url,"new_window","width=300,height=300")
// 클릭을 기다립니다
Alert("hit ok for the next site");
}
먼저 루프가 0에서 url_names.length 변수로 이동하는 것을 볼 수 있습니다. 배열 이름 뒤에 .length를 붙이면 배열에 요소가 몇 개 있는지 알 수 있습니다. 단, 배열 요소의 개수는 배열의 마지막 요소의 인덱스 번호(시퀀스 번호)와 다릅니다. 배열에 3개의 요소가 있는 경우 배열의 길이는 3이지만 배열의 마지막 요소의 인덱스 번호는 array[2]입니다. 이는 배열의 첫 번째 요소의 인덱스 번호가 array[0]이기 때문입니다. 배열 호출을 수행할 때 "개체를 찾을 수 없음"과 같은 오류 메시지가 표시되고 코드에 배열이 있는 경우 배열 요소의 인덱스 번호와 배열의 요소 수를 혼동했을 가능성이 있습니다.
또한 배열 끝에 .length를 배치하는 것은 객체에 일부 속성을 연결하는 것과 약간 비슷하다는 점을 알 수 있습니다. 이는 배열 자체가 객체이고 길이가 배열의 속성이기 때문입니다.
배열 용어 객체의 또 다른 표현은 새 배열을 생성하려면 새 명령어를 사용해야 한다는 것입니다. 위의 예에서 url_names = new Array(...)는 실제로 다음과 같이 해석될 수 있습니다. 새 배열을 생성하고 url_names를 사용하여 이에 대한 참조를 만듭니다. 이렇게 "new"라는 단어를 사용하면 새로운 객체가 생성되는 것을 알 수 있습니다.
루프의 1번째 줄은 변수를 생성합니다. 할당된 값은 문자열입니다.
a_url = "http://www." url_names[loop] "/"
루프가 시작되면 변수 loop의 초기 값은 0입니다. url_names 배열의 첫 번째 요소는 "hits.org" 문자열이므로 첫 번째 루프에서 변수 a_url은 "http://www.hits.org/" 문자열과 동일합니다.
루프의 다음 줄은 URL
var new_window=open(a_url,"new_window","width=300,height=300");창을 열 때마다 동일한 이름을 지정하므로 새 URL로 이동할 때 많은 창이 열리지 않습니다. 위의 예에서 창 이름 "new_window"를 제거하면 루프를 통과할 때마다 새 창이 열립니다.
루프의 3번째 줄은 경고 상자를 열고 사용자가 확인 버튼을 클릭하기를 기다립니다.
배열에는 문자열뿐만 아니라 다른 요소도 포함될 수 있습니다. 배열은 JavaScript 문서 개체 모델의 다양한 측면에 적용될 수 있습니다. 이 지식은 다음 강의에서 다루겠습니다.
다음은 onClick="" 링크의 코드입니다.
varchange=prompt('어떤 이미지(0 또는 1)를 변경하시겠습니까?','')
window.document.images[change ].src='3.jpg';
이 예에서는 배열이 DOM에 어떻게 개입하는지 보여주기 위해 이미지 교환을 사용합니다. 이 예제를 시도해보고 소스 코드를 살펴보세요.
document.image_name.src = 'some_image.gif';
이를 위해서는 각 이미지에 이름을 지정해야 합니다. 교환하려는 사진의 이름은 모르지만 HTML 페이지의 순서는 알고 있는 경우. 이미지는 DOM 번호로 지정할 수 있습니다.
HTML 파일의 첫 번째 이미지는 document.images[0]이고, 두 번째 이미지는 document.images[1] 등입니다. 문서에 이미지가 몇 개 있는지 알고 싶다면 이미지 배열 길이(document.images.length)를 확인하면 됩니다. 예를 들어 웹 페이지의 모든 그래픽을 Spacer GLF 이미지로 변경하려면 다음과 같이 하면 됩니다.
for(loop=0; loop {
document.images[loop].src = 'spacer.gif'
}
명확합니까?
그렇군요. 다음 시간에는 함수에 대해 배워보겠습니다.
함수는 프로그래밍에서 배워야 할 마지막 기본 구성 요소입니다. 모든 프로그래밍 언어는 함수입니다. 함수는 매번 호출 가능하며 다시 작성할 필요가 없는 것입니다.
빨리 읽는 법을 배우고, 한 번 클릭하면 현재 시간을 알려주는 긴 텍스트 링크를 사용하고 싶다면.
예를 들어... time!
소스 코드를 살펴보세요.
Time!
여기에서 JavaScript가 어떻게 작동하는지에 대한 자세한 내용은 중요하지 않습니다. 나중에 다시 검토해 보겠습니다.
중요한 것은 너무 길다는 것입니다. 이러한 시간 링크가 10개 이상 있으면 매번 이 프로그램을 잘라내어 붙여넣어야 합니다. 이로 인해 HTML이 길고 보기 흉해집니다. 또한 이 프로그램을 변경하려면 10곳에서 변경해야 합니다.
프로그램을 10번 복사하는 대신 실행할 함수를 작성할 수 있습니다. 여기서 기능 사용법을 사용하면 편집하고 읽기가 쉽습니다.
타이밍 함수 작성 방법을 참고하세요.
이 HTML 페이지에는 AnnounceTime이라는 함수가 포함되어 있습니다. 링크에서 annoumnceTime 호출:
Time!
다음과 같이:
아래쪽 선은 2과와 같습니다. :
Hello!
이를 링크에서 경고 대화상자 호출이라고 합니다. 함수는 메소드와 비슷합니다. 유일한 차이점은 메소드가 객체에 연결된다는 점입니다. 이 경고 예제에서 개체는 창 개체입니다.
다시 함수 자체로 돌아가 보겠습니다. 소스코드를 보면 해당 함수가 HTML 파일의 헤더에 위치해 있는 것을 알 수 있습니다.
                                                                                                 
           
            
        
        <본문>
        ...
        
    
    好，让我们逐行复习这个函数。首先，所有函数来自于该种格式：
    함수 functionName(매개변수 목록)
    {   진술 ...
    }
函数的命name规则于变weight差不多。 이는 동일한 이름으로 정의할 수 없습니다. 나는 内数以保证它们不与字符碰巧巧命名을 사용하고 있습니다.
    函数name后是一组参数。本例是无参数的函数，下一例中我们再举例描述。
    参数后是函数的主体.这是一组当函数调用后是想运行的语句。下면几个例子中,我打算利用这个报时器, 所以让我描述一下它是怎样工作的。
    第一行：
    var the_date = new Date();
    새로운 날짜를 맞이하여 새로운 날을 맞이합니다.先取得一个日期对象。当找到了一个new日期对象，它自动 重置到当前 日期와 时间.为了에서 对象以外得到这个信息，你必须使用这种对象방법 :
    这些方法从日期对象上取得了合适的数字。
    var the_hour = the_date .getHours();
    var the_ Minute = the_date.getMinutes();
    var the_second = the_date.getSeconds();
    你可能疑惑: 我怎样能假定日期对象知道何种方式?应从Javascript库中获取，我将尽我所能解释内置Javascript对象，但不一能彻底的使你清楚。
나머지 기능은 명확합니다. 이 메서드를 호출하여 숫자를 반환하고, 이를 문자열로 바꾸고, 경고 메서드를 호출하여 문자열 대화 상자를 표시합니다. 함수 내에서 메서드와 함수를 호출할 수 있습니다. 이에 대해 자세히 논의하겠습니다.
이제 Time Link를 통해 플레이하셨다면 뭔가 잘못된 점을 발견하셨을 것입니다. 매번 이 피드백을 받을 수 있습니다: "12:12:04", 이는 getSecond()의 반환 값인 "4"입니다. 그런 다음 이를 시간으로 결합하면 표시되는 것은 the_분입니다. ":" the_second는 우리가 원하는 것 대신 14:4를 얻습니다. 이 문제를 해결하는 것은 쉬운 작업이며, 결합된 분과 초 값을 패치하는 새로운 기능이 필요합니다.
매개변수와 반환값을 확인하세요.
매개변수 없는 함수는 소스 코드 작성 작업량을 줄이고 HTML 소스 코드의 가독성을 높이는 데 매우 유용하지만 매개변수가 있는 함수가 더 유용합니다.
이전 예에서는 반환된 분과 초가 10보다 작을 때 문제가 발생합니다. 우리가 보고 싶은 초 값은 4가 아니라 04입니다. 다음과 같이 할 수 있습니다:
var the_ Minute = the_date.getMinutes();
if (the_ Minute < 10)
{
the_ Minute = "0" the_ Minute; _second = the_date.getSeconds();
if (the_second < 10)
{
the_second ="0" the_second;
}
매우 효과적입니다. 그러나 동일한 소스 코드를 두 번 작성했다는 점에 유의하세요. 항목이 10보다 작으면 앞에 "0"을 추가하세요. 따라서 동일한 코드를 여러 번 다시 작성할 때는 함수 사용을 고려하세요. 이 예에서는 fixNumber라는 함수를 작성했습니다.
function fixNumber(the_number)
{
if (the_number < 10)
{
the_number = "0" the_number; 🎜 >                                                                       매개변수는 함수가 호출될 때 값이 설정되는 변수이기도 합니다. 이 예에서는 다음과 같이 함수를 호출합니다.
varfixed_variable = fixNumber(4)
함수에서 _number 매개변수가 4로 설정됩니다. 이제 여러분은 fixNumber의 본문을 어느 정도 이해하게 되었습니다. 의미는 변수 the_number가 10보다 작으면 앞에 0을 추가한다는 것입니다. 여기서 새로운 내용은 반환 명령입니다: the_number 값을 반환합니다. 반환 명령은 다음과 같은 상황에서 사용됩니다.
var some_variable = someFunction();
some_variable 변수의 값은 someFunction() 함수의 반환 값입니다. fixNumber에 다음을 추가했습니다. return the_number, 그런 다음 함수를 종료하고 설정을 기다리는 변수에 the_number 값을 반환합니다.
그래서 다음과 같이 코드를 작성합니다.
varfixed_variable = fixNumber(4);
the_number의 초기값은 함수 호출을 통해 4로 설정되고, 4는 10보다 작으므로, the_number는 " 04"로 변경됩니다. 그러면 the_number 값이 반환되고fixed_variable은 "04"로 설정됩니다.
원래 함수 AnnounceTime()에 fixNumber를 포함하기 위해 다음을 추가했습니다.
function AnnounceTime()
{
//날짜, 시간, 분, 초 가져오기
var the_date = new Date();
var the_hour = the_date.getHours();
var the_ Minute = the_date.getMinutes()
var the_second = the_date. getSeconds();
var 고정_초 = fixNumber(the_second)
//문자열을 모아서 알림
var the_time = the_hour ":"fixed_ Minute ":"fixed_second
Alert("The time is now: " the_time) } 가정된 시간 링크 클릭하면 시간은 12:04:05 입니다. new Date()를 사용하여 날짜를 가져오고, getHours()를 사용하여 시간을 가져오고, 이전 메서드를 사용하여 분을 가져오고, 이 예에서 분은 4여야 합니다. 그런 다음 the_ Minute 매개변수로 fixNumber를 호출합니다.
var 고정_분 = 수정번호(the_분) ;
수정번호()가 호출되면 매개변수 the_number가 the_분으로 설정됩니다. 이 예에서는 the_분은 4이므로 the_number는 4로 설정됩니다.
매개변수를 설정한 후 함수 본문에 들어갑니다. 4는 10보다 작으므로 the_number가 "04"로 변경된 후 return 명령어와 함께 the_number 값이 반환됩니다. fixNumber에 의해 "04"가 반환되면 이 예에서 고정_분은 "04"와 같습니다.
과정을 단계별로 살펴보겠습니다. 시간이 12:04:05라고 가정합니다.
AnnounceTime() 함수에서 시작합니다.
1.the_ Minute = the_date.getMinutes(); then the_ Minute = 4
2.fixed_ Minute = fixNumber(the_ Minute);는 fixNumber() 함수와 동일하며 반환됩니다. 그 값을 고정_분으로
이제 함수 fixNumber()를 입력하세요
3. 함수 fixNumber(the_number)fixNumber()가 the_분의 값으로 호출되고,_분의 값은 4이므로 이제 the_number = 4
4 . If (the_number < 10 ) {the_number = "0" the_number;} 4는 10보다 작으므로 the_number는 이제 "04"와 같습니다.
5. the_number 값을 반환하고 함수를 종료한 후 "04" 값을 반환합니다. "
이제 fixTime() 함수가 종료되었으므로 이제 AnnounceTime()으로 돌아갑니다.
6. 함수는 "04" 값을 반환하므로 고정_분은 이제 "04"와 같습니다.
이 예제에서는 매개변수가 하나만 있는 함수를 사용합니다. 실제로 함수에 대해 여러 매개변수를 설정할 수 있습니다. 다음 강의에서는 하나 이상의 매개변수를 갖는 함수에 대해 이야기하겠습니다.

이것은 제가 정의한 배열입니다.
var Monkeys = new Array("mattmarg","wendy","kristin","tim","aaron", "luke")
var kittyphile = new Array("wendy","ruby","roscoe","tim");
var discophile = new Array("mattmarg", "john travolta", "wendy")
var happy = new Array("tim", "wendy","stimpy", "aaron");
var 크랭크 = new Array("ren", "mattmarg","luke")
정의 이 배열 중 arrayIntersect 함수에 의해 제공됩니다. 우리는 net Monkeys가 디스코를 좋아한다는 것을 쉽게 알 수 있습니다. Dancing Net Monkeys
John Travolta는 디스코를 좋아하지만 그는 원숭이 목록에 포함되어 있지 않습니다. 함수 값을 호출하기 위해 Dancing Monkey는 다음을 수행할 수 있습니다.
dancing Monkeys 🎜> 교차점을 나타내는 이름, 첫 번째 배열, 두 번째 배열의 3개 매개변수를 갖는 함수입니다. 고양이를 좋아하는 사이버몽키의 이름을 알아내는 것도 쉽습니다.
소스 코드를 살펴보세요.
cat-loving Monkeys
arrayIntersect 함수 자체를 살펴보겠습니다.
function arrayIntersect(intersect_name, array_1, array_2)
{
var the_list = ""
for (loop_1=0; loop_1        {
for (loop_2=0; loop_2                                                                        The_list = the_list array_1[loop_1] " " ;
                                                     이 예제의 루프를 이해했는지 확인하세요. 핵심은 함수의 첫 번째 줄입니다.
function arrayIntersect(intersect_name, array_1, array_2)
여기에는 3개의 매개변수가 있는 arrayIntersect라는 함수가 정의되어 있습니다. 위의 예와 마찬가지로 각 매개변수는 변수와 같으며 함수가 호출될 때 값이 할당됩니다. 따라서 함수가 호출되면:
arrayIntersect('dancing Monkeys',monkeys,discophile)
다음 할당:
intersect_name = 'dancing Monkeys'
array_1 = Monkeys
array_2 = 디스코 애호가
주의할 점은 올바른 수의 매개변수를 사용하여 함수를 호출해야 한다는 것입니다. 다음과 같이 arrayIntersect를 호출하면
arrayIntersect(monkeys,discophile)
문제가 발생합니다. 시도해 보고 어떤 오류가 발생하는지 확인하세요.
모든 표준 Javascript 프로그램에서 함수는 기본 구성 요소입니다. 그러므로 그것이 어떻게 작동하는지 이해하는 것이 매우 중요합니다. 이것으로 네 번째 강의를 마치겠습니다.
JavaScript에는 언어 자체와 객체라는 두 가지 주요 부분이 있습니다. 2과에서 소개된 구문에서는 모든 프로그래밍 언어의 구성 요소인 변수, 명령문, if
문을 살펴보았습니다. 이제 나머지 Java 스크립트 구문을 배워보겠습니다.
JavaScript 구문의 경우 루프, 배열 및 함수라는 세 가지 질문만 남았습니다.
루프부터 시작해 보겠습니다.
때로는 같은 일을 계속해서 하고 싶을 때가 있습니다. 누군가에게 비밀번호를 묻고 싶은데, 올바른 비밀번호를 알 때까지 계속 묻습니다. 두 번만 시도해보고 싶다면
다음과 같이 하세요.
var the_password = "pass the 렌치"
var Answer = Prompt("What's the woyd?","" ); > If (Answer! = The_password) {
Answer = Prompt ("What's the woyd?", "")
if (password! = The_password) {
document.write ("" "" " 졌네요!

");
                                  document.write ("맞습니다!

");
}
불행하게도 올바른 결과를 얻을 때까지 계속 요청하면 이 방법이 작동하지 않습니다. 답변. 두 번이 아니라 네 번 물어보고 싶었다면 벌써
매우 짜증나는 일이 될 것입니다. 4가지 수준의 if 문을 사용하게 되는데 이는 결코 좋은 일이 아닙니다.
비슷한 일을 반복해서 수행하는 가장 좋은 방법은 루프를 사용하는 것입니다. 이 경우 루프를 사용하여
사람이 비밀번호를 말할 때까지 비밀번호를 계속 물어볼 수 있습니다. 다음은 비밀번호로 작업하는 while 루프의 예입니다. 렌치를 전달하세요.
var 비밀번호="렌치 통과"
var 답변
while (답변 != 비밀번호)
{
대답 = 프롬프트("What's the woyd?","");
}
이 일반적인 Javascript에서는 이중 변수 선언으로 시작합니다. 🎜> var 비밀번호="pass the 렌치";
var Answer
여기서는 비밀번호를 문자열로 정의하고 답변이라는 변수를 선언합니다. 우리가 왜 즉시 답변을 선언해야 하는지 이해하게 될 것입니다. 다음 줄은 매우 중요합니다.
while (답변 != 비밀번호)
{
대답 = 프롬프트("What's the woyd?",""); 고리. while 루프의 일반적인 형식은 다음과 같습니다.
while(일부 테스트는 true)
{
중괄호 안의 작업을 수행합니다.
}
위 줄은 다음을 나타냅니다. "답이 그렇지 않은 경우 Password 와 동일하면 "이 루프는 조건이 충족되지 않을 때까지 중괄호 안의 명령문을 계속 실행합니다. 사용자가 입력한 단어가 비밀번호와 일치하는 경우(예: 렌치 통과) 조건이 충족되지 않습니다.
선언되지 않은 변수에 (answer!=password) 등의 테스트를 실행하면 일부 브라우저에서는 오류가 발생하므로 반드시 답변을 선언해야 합니다. 응답에는 while 루프의 프롬프트 구성표를 통해 값이 할당되므로 처음 루프를 수행할 때 응답에는 값이 없습니다. 미리 정의하고 초기값을 ""로 설정합니다.
정의되지 않은 루프가 자주 사용되기 때문에 루프는 특정 횟수만큼 일련의 명령문을 실행하는 데 사용되는 경우가 많습니다. 이 작업을 수행하는 방법을 보여주기 위해 다음 자습서에서는 또 다른 루프가 사용됩니다.
많은 요청을 받았습니다.
var width = Prompt("몇 개의 x를 원하시나요? (1-10이 좋습니다)","5")
다음으로 몇 가지 변수를 선언합니다.
var a_line=""; Var Loop = 0;
이제 핵심은 다음과 같습니다.
While (loop & lt; width)
{
a_Line = A_LINE "x" > }
즉, "변수 루프가 요청된 X`S 선 너비보다 작으면 라인에 다른 X를 추가한 다음 루프 값에 1을 추가합니다." 루프가 더 이상 요청된 라인 너비보다 작지 않을 때까지 루프 값
에 1을 추가합니다. 다음 소스코드 분석을 참고하시기 바랍니다:
처음
a_line = "" (초기값이 ""이기 때문에)
loop=0 (초기값이 0이기 때문에)
width=2 ( 사용자 값에 의해 할당됨)
0은 2보다 작으므로
a_line = a_line "x"이므로 a_line = "x"
loop=loop 1이므로 loop = 1
루프로 돌아가기 :
두 번째
loop=1
width=2
a_line = "x"
1은 2보다 작으므로
a_line = a_line "x"이므로 이제 a_line = "xx"
loop=loop 1이므로 이제 loop = 2
루프로 돌아가기:
세 번째
loop=2
width=2
a_line = "xx"
2는 2보다 작지 않으므로 루프를 종료하고 계속 실행합니다.
다음에
Alert(a_line)
경고 대화 상자를 시작합니다.
이런 종류의 루프는 매우 일반적이어서 프로그래머는 조건부 루프를 다음과 같이 작성할 수 있습니다.
while (loop < width)
{
a_line = "x" // In a_line = a_line "x";
loop ; // loop=loop 1과 같습니다.
}
첫 번째 줄 "x"는 "자체에 x"를 더한 것을 의미합니다. 이미 a_number=5가 있는 경우 a_number =3, 즉 a_number=a_number 3으로 쓸 수 있습니다. 프로그래머들은 너무 게으르다.
하향, 루프는 "자신에게 1을 더함"을 의미합니다. 따라서 루프는 loop=loop=1입니다. loop =1로 쓸 수도 있습니다. 이 게으른 행동은 매우 효과적입니다.
숫자에 1을 더하는 방법이 여러 가지인 것처럼 루프를 작성하는 방법도 여러 가지가 있습니다. 루프가 유일한 루프 패턴은 아니지만 또 다른 인기 있는 루프는 for 루프입니다.
위 예제의 while 루프는 다음 형식으로 작성할 수 있습니다.
var a_line="";
var loop = 0
while (loop < width)
{
a_line = " x";
loop ;
}
For 루프로 작성할 수도 있습니다:
var a_line=""
for (loop=0; loop < ; width; loop )
{
a_line = "x";
}
for 루프의 형식은 다음과 같습니다.
for (초기값; 테스트; 증분)
{
이 작업을 수행합니다.
}
위의 for 루프는 loop=0을 설정하고 loop 루프를 사용하기 전에 한 가지 이해해야 할 점은 루프가 중첩될 수 있다는 것입니다. 다음은 중첩 루프의 예입니다.
프로그램은 다음과 같습니다.
var height = 프롬프트("그리드의 높이는 얼마입니까? (1-10이 좋습니다)","10")
var width= 프롬프트("넓이는 얼마나 됩니까? 그리드를 원하시나요?(1-10이 좋습니다)","10");
var a_line;
var new_window = window.open("/webmonkey/98/04/files1a/grid.html" , "looper","width=400,height=400");
new_window.document.writeln("

A 그리드

")
for (height_loop=0; height_loop< height ; height_loop )
{
a_line = "";
for(height_loop=0; height_loop a_line = "" }
new_window.document. writeln(a_line "
");
}
높이와 너비를 요청한 후 새 창을 열고 헤더를 작성한 후 for 루프를 입력합니다. 첫 번째 for 루프는 a_line=""을 설정합니다. 이 줄 없이 이 예제를 시도해보고 무슨 일이 일어나는지 확인하세요. a_line을 초기화한 후 프로그램은 너비가 필요한 값에 도달하면 X`S 라인이 생성되어 새 창에 표시됩니다. 이것은 높이 시간에 발생합니다.