고급 JavaScript 튜토리얼(1강)_기본 지식

Javascript 고급 튜토리얼을 계속 배우신 것을 환영합니다. 이전에 우리는 Javascript 입문 튜토리얼을 공부했습니다. 이 연구 단계에서는 지난 튜토리얼에서 아직 이야기할 시간이 없었던 문제를 계속해서 연구할 것입니다. 또한 진정한 멀티미디어 애플리케이션을 만들 수 있게 해주는 Javascript의 놀라운 기능을 다양하게 보여 드리겠습니다.
우리가 다룰 내용은 다음과 같습니다.
변수에 값 할당
If-then 문
For 및 while 루프
함수 작성
창 열기 및 제어
읽기 HTML 양식 작성
배열 적용
이미지 변환 제어
이 주제가 낯설게 느껴진다면 먼저 이 사이트의 기본 Javascript 튜토리얼을 읽어 보시기 바랍니다.
지난 JavaScript 튜토리얼에서 우리는 JavaScript의 핵심 내용인 몇 가지 중요한 구문과 가장 일반적으로 사용되는 객체에 대해 배웠습니다. 이제 우리는 귀하의 JavaScript 지식을 심화시키고 귀하를 진정한 JavaScript 마스터로 만들 것입니다. 진정한 주인이 되기 위해 반드시 가야 할 길은 다음과 같습니다.
강의 1:
새로운 if-else 문과 변수의 진정한 의미에 초점을 맞춰 단서를 소개하고 명확하게 하며 몇 가지 팁을 소개합니다.
2과:
마법의 문자열 처리, 웹 사이트를 방문한 독자에 대한 정보 저장 및 새로운 유형의 배열 소개.
강의 3:
웹페이지의 타임라인에서도 다양한 이벤트가 다양한 시간에 발생할 수 있도록 허용하고 JavaScript 스크립트를 다양한 브라우저에서 실행하는 방법을 소개합니다.
강의 4:
이미지, 이미지 맵 및 JavaScript를 미리 로드합니다. 자신만의 객체를 생성하고 루프를 사용하여 원하는 것을 빠르게 찾으세요.
강의 5:
JavaScript 개발 및 테스트를 위한 도구와 JavaScript 코드를 빠르게 실행하기 위한 팁.
이 튜토리얼을 공부하고 나면 JavaScript에 대해 더 완벽하게 이해하게 될 것입니다. 이 지식을 익히면 다양한 인터넷 애플리케이션을 만들 수 있습니다.

JavaScript에서 가장 일반적으로 사용되는 문은 if-else입니다. 다음은 원숭이에게 보상하는 예입니다.
if (monkey_behavior == "good")
{
var toy == "videogames"
} else {
var toy == " Rocks";
}
일반 영어로 번역하면 위 코드는 "원숭이가 잘 행동하면 비디오 게임을 하도록 허용하고 그렇지 않으면 죽여라"를 의미합니다. 위 예는 if-else 문의 표준을 보여줍니다. . 형식이지만 기회주의를 원하는 사람들을 위한 지름길은 다음과 같습니다.
var toy = (monkey_behavior=="good") ? "videogames" : "rocks"
이 표현은 위의 진술 효과는 정확히 동일합니다. 이 조건문은 테스트 조건, 테스트가 참인 경우 반환되는 값, 테스트가 거짓인 경우 응답 값의 세 부분으로 구성됩니다. 위의 예에서 테스트 조건은 (monkey_behavior=="good")입니다. 테스트 조건이 true이면 videogames 문자열이 반환되고, 테스트 조건이 false이면 세미콜론 오른쪽에 있는 값인 rock이 반환됩니다.
이 단축키는 함수 호출에 사용할 때 매우 편리합니다. 예를 들어 다음을 수행하는 데 사용할 수 있습니다.
var 비밀번호 = "open sesame";
var Answer = 프롬프트("비밀번호는 무엇입니까? ",""); = 비밀번호) ? "환영합니다!" : "버즈 꺼짐")
코드 실행 과정을 보려면 여기를 클릭하세요. 입력한 문자가 필수 비밀번호인지 여부에 따라 "환영합니다" 메시지가 표시되거나 경고음이 울립니다.
해당 조건문이 없는 경우 코드는 다음과 같이 작성해야 합니다.
var 비밀번호 = "open sesame";
var Answer = 프롬프트("비밀번호는 무엇입니까? ","");
if (답변 == 비밀번호)
{
Alert("환영합니다")
} else {
Alert("buzz off");
}
분명히 코드는 훨씬 길지만 의미를 이해하기가 더 쉽습니다. 조건문의 선택은 각 개인의 선호도에 따라 다릅니다.

다음은 변수 적용의 예입니다.
var happy = "a 바나나 스플릿"
Alert("원숭이는 행복을 "행복이라고 생각합니다"
이 코드 줄은 행복 변수라는 변수를 호출한 다음 경고 대화 상자에서 이 변수를 호출합니다. 다른 사람들의 JavaScript를 보면 변수를 선언할 때 var를 사용하는 것을 볼 수 있는데, 이러한 사용법이 문제를 일으킬 수 있습니다. 우선, MSIE의 일부 버전이 충돌하거나 비정상적으로 실행될 수 있습니다. 이러한 상황은 Mac 컴퓨터의 MSIE에서 발생할 가능성이 가장 높습니다. 둘째, 매우 복잡한 JavaScript를 작성하는 경우 자체 함수를 작성해야 하므로 변수가 무엇을 의미하는지 이해해야 합니다.
지난 JavaScript 튜토리얼: Lesson 4에서 언급했듯이 함수는 호출된 후 특정 기능을 수행하는 JavaScript 프로그램 코드입니다. 최고의 기능은 모듈식이며 입력 변수와 출력 결과를 제어할 수 있습니다. 그리고 일단 컴파일되면 문제가 생길까 걱정할 필요가 없으며 다른 기능과 충돌하지도 않습니다. 이러한 안정적인 속성을 사용하여 함수를 작성하려면 다른 함수에 인수로 전달된 변수를 쉽게 변경하지 않도록 해야 합니다. 다음 예에서는 이러한 세부 사항에 주의를 기울이지 않으면 어떤 일이 발생하는지 보여줍니다. 화씨를 섭씨로 변환하는 프로그램을 작성한다고 가정해 보겠습니다. 무슨 뜻인지 보려면 화씨/섭씨를 클릭하세요. 화씨 50도를 변환하면 다음 메시지가 표시됩니다.
"화씨 50도는 섭씨 10도입니다.
코드는 다음과 같습니다.
function fahrenToCelsius( 요금)
{
temp = (faren - 32) * 5/9;
return temp
}
function ConvertTemp()
{
temp = 프롬프트(" 화씨는 몇 도인가요? ","50");
celsius = fahrenToCelsius(temp);
Alert(temp " 화씨는 " celsius " 섭씨입니다.");
}
이 프로그램은 매우 간단합니다. ConvertTemp()라는 함수는 fahrenToCelsius()라는 또 다른 함수를 호출하고 결과를 반환합니다. 이 프로그램을 잘 이해하지 못한다면 JavaScript 기본 튜토리얼의 4단원을 다시 배워야 합니다.
이 예제에서 혼란스러운 점은 두 함수 모두에 temp라는 변수가 있다는 것입니다. ConvertTemp() 함수에서 그 역할은 (사용자가 제공한) 화씨 값을 저장하는 것입니다. fahrenToCelsius() 함수에서는 변환된 섭씨 온도 값인 섭씨를 계산하는 데 사용됩니다. 이는 우리를 혼란스럽게 할 뿐만 아니라 Javascript 프로그램도 혼란스럽게 합니다. 변수를 사용하여 이 코드를 실행하려고 하면 다음과 같은 일이 발생합니다. 화씨 50도를 변환하려는 경우 "화씨 10도는 섭씨 10도입니다."라는 메시지가 표시됩니다. 화씨 50도를 입력하면 프로그램이 이를 10도로 해석하는 이유는 무엇입니까? 이 프로그램의 실행 과정을 연구해 보자. ConvertTemp() 함수를 호출하고 프롬프트 표시줄에 "50"을 입력하면 temp = 50이 표시되고 "temp"가 FarnToCelsius() 함수에 전달됩니다. FarnToCelsius()에서 매개변수 Faren은 50으로 설정되고 "temp"는 (50 - 32) x 5/9로 설정되어 결과는 10이 됩니다. 결과를 반환하기 전 매개변수 값은 다음과 같습니다.
Faren = 50
temp = 10
이제 FarenToCelsius()는 변수 celsius에 10을 반환합니다.
temp = 10
celsius = 10
이제 "화씨 10도는 섭씨 10도입니다"라는 잘못된 진술을 얻게 됩니다. 주의해서 두 함수의 변수에 동일한 이름을 지정하지 않으면 이러한 문제를 피할 수 있습니다. 하지만 이것도 최선의 해결책은 아닙니다. 계속해서 더 많은 함수를 추가하면 함수에서 변수의 이름을 바꾸지 않도록 하기가 어려워집니다. 그리고 loop, index, count, the_name 등 많은 변수 이름을 재사용하는 경우 다른 이름을 사용하는 것은 정말 골치 아픈 일입니다.
가장 좋은 해결책은 fahrenToCelsius() 함수에 사용되는 temp 변수와 ConvertTemp() 함수에 사용되는 temp 변수가 서로 다른 것임을 JavaScript가 이해하도록 하는 것입니다. 각 함수에 해당 함수 내에서만 적용되는 temp 변수가 있는 경우 다른 함수에서 동일한 이름을 가진 변수가 혼동되는 것에 대해 걱정할 필요가 없습니다. 그리고 이를 위해 var가 사용됩니다.
JavaScript에서 같은 이름을 가진 다양한 변수 간의 혼동을 피하기 위해 변수 선언 시 변수 앞에 var를 추가할 수 있습니다. 함수 내에서 var로 선언된 변수를 지역변수(Local Variable)라고 하며, 함수 내부에만 존재합니다. 일반적으로 지역 변수를 사용해야 합니다.
다음은 var 선언을 사용한 후의 올바른 JavaScript 코드입니다.
function fahrenToCelsius(faren)
{
var temp = (faren - 32) * 5 / 9
return temp; > }
function ConvertTemp()
{
var temp = 프롬프트("화씨는 몇 도입니까? ","50")
var celsius = badFahrenToCelsius(temp); " 화씨는 " celsius " 섭씨입니다.");
}
이제 50을 입력하면 (convertTemp 함수 내부에서) temp = 50
temp가 Inside의 fahrenToCelsius() 함수에 전달됩니다. fahrenToCelsius() 함수에서 paren 매개변수는 50으로 설정되고 temp는 다음 코드로 설정됩니다.
var temp = (faren - 32) * 5 / 9> 이 temp 변수는 이전에 var 선언을 사용했기 때문에 다른 함수의 temp라는 변수와는 다릅니다. fahrenToCelsius()가 실행되면 이 함수의 온도가 사라집니다. 따라서 fahrenToCelsius()가 값을 반환하기 전에, Farn = 50
(fahrenToCelsius 내부) temp = 10
(convertTemp 내부) temp = 50
fahrenToCelsius()는 변수 temp 값 10을 반환합니다. fahrenToCelsius() 함수에서 나오면 임시 변수에서 함수의 역할이 종료됩니다. fahrenToCelsius()가 반환되면 변수 값을 10으로 설정합니다.
(convertTemp 내부) temp = 50
(convertTemp 내부) celsius = 10
이제 표시되는 정보는 우리가 원하는 것입니다. 화씨 50도는 섭씨 10도입니다."