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

지난 강의에서는 자바스크립트가 어디에 나타나며 어떤 모습인지 배웠습니다. 이제 우리는 이 언어를 배우기 시작합니다. 이번 강의에서는 JavaScript가 정보를 저장하는 방법, 정보를 기반으로 결정을 내리는 방법, 사용자 상호 작용 요구 사항에 따라 이미지를 교체하는 방법을 배웁니다.
이제 컴퓨터 프로그래밍의 기본을 배울 준비가 되셨나요? 1강, 변수.
대수학을 공부했다면 변수를 본 적이 있을 것입니다. 이전에 배우지 않았더라도 상관없습니다. 변수는 JavaScript가 정보를 저장하는 간단한 방법입니다. 예를 들어 "x=2"라고 쓰면 "x"는 값 2를 저장하는 변수입니다. 그런 다음 "y=x 3,"이라고 말하면 "y"의 값은 "5"가 됩니다.
다음은 변수를 사용하는 JavaScript 예입니다.
이 예에서는 소스 코드를 단계별로 탐색합니다.
<script> <br/> <!-- hide me <br/> 이미 시작했습니다. 두 줄 봤어요. 이는 모든 JavaScript 프로그램에 필수입니다. <br/> // 일부 변수 로드 <br/> var secs_per_min = 60; <br/> var mins_per_hour = 60; <br/> var days_per_year = 365; . 의미는 분명합니다. <br/> 다음 몇 줄은 변수 선언입니다. <br/> 변수를 처음 사용할 때는 "var"로 선언해야 합니다. <br/> var를 변수 선언으로 사용하는 것이 반드시 필요한 것은 아니지만 좋은 습관입니다. 다음 두 강의를 토론하면서 그 이유를 알아보겠습니다. <br/> <br/> 변수는 문자나 강조 문자로 시작해야 합니다. <br/> 첫 번째 문자 뒤에는 변수에 숫자가 포함될 수 있습니다. 따라서 Monkey_23은 유효한 변수 이름입니다. <br/> 대부분의 변수 이름은 대소문자를 구분하지만, 다른 JavaScript 버전에서는 반드시 그런 것은 아닙니다. <br/> 이는 일부 브라우저에서 Loop와 loop 변수가 다르다는 것을 의미합니다. 일반적으로 하나의 명명 규칙을 고수하고 동일하게 유지하는 것이 좋습니다. 저는 <br/> 변수 사이에 밑줄을 사용하는 데 익숙합니다. 다른 사람들은 secsPerMin과 같이 변수 사이의 첫 번째 단어를 대문자로 시작하는 것을 선호합니다. <br/> 변수는 그 목적을 설명해야 합니다. <br/> x, y 또는 hack_hack_hack은 귀하의 언어를 이해하려는 사람에게는 거의 쓸모가 없습니다. 변수 이름을 입력하기 어려울 정도로 길게 만들지 말고 설명할 수 있을 만큼 길게 만드세요. <br/> 변수를 정의할 때 변수에 값을 할당하거나 나중에 지정할 수 있습니다. <br/> 이 예에서 각 변수는 처음 정의될 때 값이 할당됩니다. 반드시 그럴 필요는 없습니다. 앞으로의 예에서 볼 수 있듯이 <br/> 해당 값을 모르더라도 꽤 잘 정의할 수 있습니다. <br/> <br/> 명령문은 세미콜론으로 끝납니다. <br/> 문은 JavaScript 표현식이며, 세미콜론은 끝 표시입니다. 공백과 빈 줄은 JavaScript 컴파일러에서 무시됩니다. <br/>을 읽기 쉽게 하기 위한 것입니다. 이 예제는 긴 줄로 작성할 수 있지만 주석이 있어도 매우 힘들어 보일 것입니다. <br/> 마치기 전에 때로는 세미 괄호가 필요하지 않다는 점을 언급하고 싶습니다. 일부 사람들은 끝에 세미콜론 없이 명령문을 작성하는 경우도 있습니다. 하지만 이를 추가하는 것은 좋은 <br/> 습관입니다. 프로그램을 훨씬 더 읽기 쉽게 만들 뿐만 아니라 프로그램을 채우는 빈 줄의 수도 줄일 수 있기 때문입니다. Webmonkey의 습관은 <br/> 각 명령문을 다음과 같이 끝내는 것입니다. 세미 브래킷. <br/> // 호출 수행 <br/> var secs_per_dy = secs_per_min*mINS_PER_HOUR*house_per_day <br/> 여기서는 몇 가지 기본 산술을 볼 수 있습니다. JavaScript가 이 명령문을 실행할 때마다 변수 secs_per_year는 60, 60, 24 및 365를 곱한 숫자가 됩니다. 나중에 변수 secs_per_year가 발견될 때마다 이 거대한 숫자로 대체됩니다. <br/> // 숨기기 종료 --> <br/> </script>
여기에는 새로운 것이 없으며 JavaScript 부분이 끝납니다.
이 예제의 헤더 파일에 있는 JavaScript는 모두 JavaScript가 이러한 코드를 실행할 때 위의 변수가 정의됩니다. 그러나 이 시점에서 이러한 변수는 아직 아무것도 수행하지 않았으며 이는 예제 본문에서 수행된 작업입니다.

이제 변수가 정의되었으므로 이를 사용하여 작업을 수행해 보겠습니다.
<script> <br/> <!-- hide me <br/> JavaScript로 변수와 웹페이지를 작성하는 방법을 소개합니다. <br/> // JavaScript를 사용하여 HTML을 작성하는 방법은 다음과 같습니다. <br/> document.writeln("<b>The Monkey dances ") <br/> document.writeln(secs_per_year) <br/> document.writeln(" 초당 초.<p>"); <br/> 다음 세 줄에 대한 관심 사항은 다음과 같습니다. <br/> document.writeln() 웹 페이지에 삽입 내용을 작성합니다. <br/> document.writeln()에서 많은 세부 작업을 수행할 수 있지만 지금까지는 <script> 태그와 </script> 태그 사이에 있다는 점만 기억하면 됩니다. (" 어쩌구!") 웹페이지에 HTML을 작성할 때 따옴표 안의 문자가 나타나는데, 따옴표 밖의 문자는 변수로 간주됩니다.
첫 번째와 세 번째 줄에서 따옴표 안의 단어는 우리가 표시하려는 단어이고 secs_per_year에는 따옴표가 없습니다. 따라서 JavaScript는 이를 변수라고 생각하고 이를 변수 값으로 교환합니다. 다행스럽게도 헤더 파일에서 secs_per_year를 큰 숫자로 정의했기 때문에 표시할 수 있습니다. 그렇지 않으면 JavaScript가 오류를 보고합니다.
따옴표로 묶인 모든 단어를 문자열이라고 하며 JavaScript는 이를 컴파일하지 않습니다.
이 예에서는 큰따옴표(")가 사용되었으며, 작은따옴표(')도 사용할 수 있습니다. 둘은 서로 바꿔 사용할 수 있습니다. 두 번째 줄이
document.writeln("secs_per_year")인 경우 JavaScript
은 31,536,000 대신 secs_per_year를 직접 표시합니다.
이 예와 문자의 차이점은 중요하므로 계속하기 전에 이를 이해해야 합니다.
document.writeln()을 사용할 수 있습니다.
첫 번째와 세 번째 줄의 및 태그에 주의하세요.
다음은 이 예의 요약입니다. "일반적인 경우는 무엇입니까? 헤더 파일과 본문 파일에는 무엇이 표시되나요? ”
일반적으로 이는 별로 중요하지 않습니다. 대부분의 JavaScript를 페이지 헤드에 배치하는 것이 좋습니다. 이는 본문보다 먼저 읽혀지므로 본문에 나타나는 변수(예: secs_per_min)은 모두 헤드에 정의되어 있습니다. JavaScript가 document.writeln(secs_per_min) 명령을 실행하려고 시도한 후 JavaScript가 오류를 보고합니다.
이제 변수에 대해 연습하겠습니다. 하지만 먼저 문자열에 주의하세요. 🎜>이전 섹션에서 언급했듯이 작은따옴표나 큰따옴표에 관계없이 따옴표 사이의 문자를 문자열이라고 합니다. 변수가 숫자일 수도 있고 문자열일 수도 있습니다.
var nice_monkey = "원숭이가 당신을 보고 웃으며 셰익스피어를 낭송합니다.";
var bad_monkey = "원숭이가 당신을 노려보며 트림을 합니다."
변수를 선언할 때 변수에 값을 할당합니다. 변수를 사용하여 이러한 문자열과 동일하게 만들 수 있으므로 이러한 문자열을 작성할 때 다음과 같이 작성할 수 있습니다.
document.writeln(nice_monkey)
다음은 문자열로 수행할 수 있는 작업의 예입니다. > 소스 코드를 자세히 살펴보면 새롭고 흥미로운 내용을 자주 발견할 수 있습니다.
다음과 같은 새로운 내용을 살펴보세요.
var Monkey = Prompt("원숭이의 이름은 무엇입니까?", "The Monkey" );
여기서는 사용자 피드백 프롬프트 메소드를 호출하고 사용자가 정보를 입력하도록 요청하는 대화 상자를 시작합니다.
이에 유의하세요. 프롬프트 메소드에는 두 개의 변수가 있으며 둘 다 대화 상자의 입력 영역 위에 표시됩니다. 이 경우 "원숭이의 이름은 무엇입니까?"입니다. 이 예에서 두 번째 매개변수인 "The Monkey"는 입력 상자의 기본값입니다. 기본값을 원하지 않으면 다음과 같이 두 번째 매개변수에 따옴표를 추가합니다.
var Monkey = Prompt("What's the Monkey's name?", ""); > 다음 줄은 이전에 본 것과 마찬가지로 직접 변수 할당입니다.
var techy_monkey = 원숭이 요구 기술
이 줄에서는 문자열 연산자인 누적 토큰을 소개합니다. 두 문자열 사이에 누적된 표시가 나타나면 두 변수가 동일한 문자열에 나타나는 것을 "체인"이라고 합니다. 따라서 업스트림에서는 위의 세 가지 변수가 포함된 문자열을 포함하는 techy_monkey라는 새 변수를 생성합니다. 즉, 결과는 "원숭이가 요구, 아니, 받기를 고집한다" "충돌하지 않는 컴퓨터, 그리고 수제 브라우저!"
var techy_monkey = 기술을 요구하는 원숭이
그래서 또는; say:
var techy_monkey = "원숭이는 충돌하지 않는 컴퓨터와 직접 만든 브라우저를 요구합니다!"
다음 단락에서는 문자열 사용에 대한 추가 팁을 보여줍니다. 작동 원리는 동일합니다.
var italic_hippy = hippy_monkey.italics();
var shouting_hippy= hippy_monkey.toUpperCase()
color var red_bold_tech =bold_tech.font(' 빨간색' ;
그런데 훨씬 나아 보이네요! 이제부터 JavaScript로 document.writeln(italic_hippy)를 작성하면 이탤릭체 문자가 표시됩니다.
다음 줄에 설명된 기술은 HTML로 구현할 수 없습니다. 이로 인해 hippy_monkey의 모든 문자가 대문자로 표시됩니다.
세 번째 줄은 문자열 속성을 변경하는 예를 보여줍니다. . 모든 문자에는 색상이 있으며 string.fontcolor('new color') 명령을 사용하여 색상을 변경할 수 있습니다. 다음과 같이 할 수도 있습니다.
var red_bold_tech = ""bold_tech ""
하지만 읽기가 쉽지 않습니다.
var red_bold_tech = bold_tech .fontcolor('red');
이 예에서는 다음 줄 외에 다른 응용 프로그램도 볼 수 있습니다.
document.writeln(bold_tech "
")
하나의 문자열 외에도 두 개의 문자열을 연결하여 결과를 표시합니다. 다음과 같이 두 줄로 작성할 수도 있습니다.
var broken_bold =bold_tech "
";
document.writeln(broken_bold)
그러나 이를 위해서는 다른 변수를 만들어야 하며, 한 줄을 더 작성해야 합니다.
이제 변수와 문자열에 대해 모두 배웠으니 연습해 보세요.
<script> <br/> <!-- 숨기기 <br/> var name = 프롬프트( "주제 입력: ",""); <br/> var verb = 프롬프트("술어 입력: ","") <br/> var adjective= 프롬프트("객체 입력: ","" ); 🎜> var 문장 = 이름 " " 동사 " " " 형용사 ".<p>"; <br/> document.writeln(sentence); <br/> document.writeln(sentence.bold()); <br/> document. writeln(sentence.toUpperCase()); <br/> document.writeln(sentence.fontcolor('red')) <br/> // 숨기기 종료 --> <br/> </script> 해당 작업을 마쳤다면 이제 if 절 연습을 시작할 시간입니다.

"if" 절을 적용하면 사용자가 입력한 값에 따라 프로그램이 다르게 반응하도록 할 수 있습니다. 예를 들어, 당신은 다른 사람과 다르게 반응하도록 프로그램을 작성할 수 있습니다. 기본 형식은 다음과 같습니다.
if(일부 조건이 true)
{
do Something
do Something;               뭔가를 하세요;
조건이 true이면 중괄호 안의 명령문을 실행합니다.
기억하세요: 공백은 프로그램을 읽을 수 있게 유지하는 유일한 방법입니다. 물론 전체 if 문을 한 줄로 작성할 수도 있지만 읽기 어려울 것입니다.
다음은 if 절의 예입니다.
<script> <br/> <!-- 숨기기 <br/> var Monkey_love = 프롬프트("Monkey를 좋아하시나요?", "예 또는 아니요를 입력하세요."); > if (monkey_love == "예") <br/> { <br/> Alert("감사합니다! 오셔서 반갑습니다! 계속 읽어주세요!") <br/> } <br/> // 숨기기 종료 -& gt; <br/> & lt;/script & gt; <br/> 인스턴트 대화 상자에 yes를 입력하면 따뜻한 인사말을 받게 됩니다. 다른 것을 입력하면 아무 일도 일어나지 않습니다. <br/> 문장의 핵심은 다음과 같습니다. <br/> var Monkey_love = Prompt("Do you like Monkey?", "Type yes or no.") <br/> if (monkey_love == "Yes") <br/> { <br/> Alert("감사합니다! 오셔서 반갑습니다! 계속 읽어주세요!") <br/> } <br/> 첫 번째 줄을 보셨습니다. 대화 상자를 불러오고 사용자 피드백을 Monkey_love 변수에 로드합니다. 그러나 두 번째 줄은 약간 다릅니다. 조건이 있습니다. 즉, 변수 Monkey_love가 "yes" 값과 같으면 중괄호 안의 명령문이 실행됩니다. 다른 값과 같으면 실행되지 않습니다. <br/> 이 조건에서 두 개의 등호 표시에 주목하세요. 이곳은 사람들이 혼동하기 쉬운 곳 중 하나입니다. 태그만 사용한다면 실제로 JavaScript에 Monkey_love가 "yes"인지 테스트하도록 지시하는 것입니다. 다행히도 대부분의 브라우저는 이러한 오류를 인식하고 이러한 명령문을 실행할 때 경고합니다. 하지만 지금은 이런 실수를 하지 않도록 주의하는 것이 가장 좋습니다. <br/> 다른 중요한 조건은 다음과 같습니다. <br/>(variable_1 > Variable_2)는 Variable_1이 Variable_2보다 큰 경우 참입니다. <br/>(variable_1 < Variable_2)는 Variable_1이 Variable_2보다 작으면 참입니다. <br/>(variable_2 < = 변수_2)는 변수_1이 변수_2보다 작거나 같은 경우 참입니다. <br/> (변수_1 != 변수_2)는 변수_1이 변수_2와 같지 않으면 참입니다. <br/> 조건을 보다 합리적으로 만드는 방법에는 두 가지가 있습니다. <br/> In If you 중괄호로 묶인 명령문을 실행하기 전에 두 가지가 "예"가 되도록 하려면 다음을 수행하십시오. <br/> if ((variable_1 > 18) && (variable_1 < 21)) <br/> { <br/> document .writeln( "variable_1은 투표할 수 있지만 마실 수는 없습니다.") <br/> } <br/> 여기서 두 개의 "&&"는 JavaScript에서 "and"를 의미합니다. 또한 전체 절은 두 부분으로 구성되어 있으며 &&는 괄호로 묶어야 합니다. <br/> 두 가지 중 하나가 참이 되도록 하려면 다음을 수행하십시오. <br/> if ((variable_1 == "bananas") || (variable_1 == "JavaScript")) <br/> { <br/> document. writeln ("원숭이는 "variable_1을 가지고 있어서 행복합니다); <br/> } <br/> 다시 연습해 보세요! <br/> <script 언어="JavaScript"> var color = Prompt("You which 색상은 빨간색입니까 아니면 파란색입니까? ",""); <br/> var 형용사; <br/> var 글꼴 색상; <br/> if (color == "red") { <br/>adjective = "생생함."; <br/>fontcolor="red"; <br/> } else if (color == "blue") { <br/> adjective = "멋지다." <br/>fontcolor="blue"; <br/> } else { <br/> 형용사 = "혼란스럽다."; <br/>fontcolor="black"; <br/> } <br/> var 문장 = "좋아요"fontcolor "? The Internet Monkey는 당신이 " adjective " <p>"; <br/> document.writeln(sentence.fontcolor(fontcolor)) <br/> </script>

사용자가 링크 위로 마우스를 이동하면 , JavaScript는 링크 이벤트를 보냅니다. 사용자가 클릭하면 onClick이라는 링크 이벤트가 전송됩니다. 다른 하나는 onMouseOver라고 하며 사용자가 마우스를 그 위로 이동할 때 전송됩니다.

이러한 이벤트를 사용하여 사용자에게 표시되는 내용에 영향을 줄 수 있습니다.

첫 번째 흥미로운 점은 <script> 태그가 없다는 것입니다. 이는 onClick 및 onMouseOver 따옴표 안에 나타나는 모든 내용이 JavaScript에서 이해되기 때문입니다. 실제로 문장 끝 부분에 따옴표를 사용하면 JavaScript를 한 줄로 작성할 수 있습니다. 전체 JavaScript 프로그램을 onClick 따옴표 안에 넣을 수는 있지만 보기에 좋지 않습니다. <br/><br/> 첫 번째 줄을 보십시오: <br/><br/> <a href="#" onClick="alert('오, 다시 해보세요!');">저를 클릭하세요!&lt ; /a> <br/><br/> 이것은 공식적인 타겟팅 태그와 비슷하지만 "누군가가 이 링크를 클릭하면 따옴표 안의 JavaScript를 실행합니다"라는 마법의 onClick=""이 있습니다. 세미콜론. <br/><br/> 또한 href=""의 따옴표 안에는 아무 것도 없습니다. 이는 링크가 있더라도 클릭해도 해당 링크로 이동할 수 없음을 나타냅니다. <br/><br/> 다음 줄은 다음과 같습니다. <br/><br/> <a href="#" onMouseOver="alert('Hee hee!');">나 위에 마우스를 올려보세요! 🎜 ><br/> onClick 대신 onMouseOver가 사용된다는 점을 제외하면 첫 번째 줄과 같습니다. <br/><br/> 이제 링크 이벤트 학습이 끝났으니 멋진 그림교체에 참여해주세요! <br/><br/>JavaScript의 주요 응용 프로그램 중 하나는 마우스를 움직일 때 자동으로 이미지를 전환하는 기능입니다. <br/><br/> 빠르고 기본적인 이미지 교환 예시는 다음과 같습니다. <br/><br/>  <img src="/static/imghwm/default1.png" data-src="button_r.gif" class="lazy" name="the_image" alt="JavaScript 초보자 튜토리얼(2강)_기본 지식" > <br/> <a href="#" onMouseOver="document.the_image.src='button_d.gif';" >change <br/><br/> 이 예제를 단계별로 분석해 보겠습니다. <br/><br/> 첫 번째 줄은 다음과 같습니다. <br/><br/> <img src="/static/imghwm/default1.png" data-src="button_r.gif" class="lazy" name = "the_image" alt="JavaScript 초보자 튜토리얼(2강)_기본 지식" > <br/><br/> 이는 표준 <img src="/static/imghwm/default1.png" data-src="newhome.gif" class="lazy" src= alt="JavaScript 초보자 튜토리얼(2강)_기본 지식" > 태그와 유사하지만 이름은 the_image이고 이름은 임의입니다: my_image, a_box.... 그러나 내부에는 공백이 허용되지 않습니다. <br/><br/> 다음 줄은 다음과 같습니다. <br/><br/> <a href="#" onMouseOver="document.the_image.;">change > <br/> 사진 교환이 이루어지는 곳입니다. 이전에 MouseOver에서 본 것과 같습니다. <br/> onMouseOver 인용문에 나타나는 주요 JavaScript는 다음과 같습니다. <br/><br/> document.the_image.; <br/><br/> 이 문장은 다음과 같습니다. src를 버튼_d.gif로 변경하세요." 전체 문은 큰따옴표를 사용하는 반면 'button_d.gif'는 작은따옴표를 사용합니다. 두 따옴표는 서로 바꿔 사용할 수 있지만 한 따옴표 안에 다른 따옴표가 있으면 혼동하지 않도록 주의하세요. " 'something' " 또는 ' "something" ' 은 쓸 수 있지만, " 'something" ' 또는 " "something" "은 쓸 수 없습니다. <br/><br/>document.writeln()이 어떻게 작동하는지 자세히 설명하지 않은 것처럼 이 예제에서도 이미지 교환이 어떻게 작동하는지 설명하지 않았습니다. 다음 강의에서는 "목표지향 프로그래밍"과 "파일 개체 모듈"에 대해 자세히 배우게 됩니다. <br/><br/> 참고하세요! 교환할 이미지는 원본 이미지와 크기가 동일해야 합니다! 그렇지 않으면 변형됩니다. <br/><br/> 아래에는 두 가지 코드가 있습니다. (참고: 관심이 있으시면 살펴보세요. 여기에는 설명이 없습니다. 건너뛰어도 됩니다.) <br/><br/> <script 언어="JavaScript"> <br/> <!-- hide me <br/> <br/> var temp = ""; <br/> var image1 = 'netteach.gif'; <br/> var image2 = 'phtshop1.gif' <br/> var image3 = 'newhome.gif' <br/><br/> var user_name = 프롬프트 ("이름이 무엇입니까", ""); <br/> if (user_name == "") <br/> { <br/> user_name = "낯선 사람" <br/> } <br/> document.write( user_name); // 숨김 종료 --> <br/> </script>



이제 오늘 배운 내용을 복습해 보겠습니다.

변수
변수 값은 숫자 또는 문자열일 수 있습니다. 변수 이름을 지정할 때 기억해야 할 몇 가지 제한 사항과 규칙이 있습니다.

문
문은 반원 괄호로 끝납니다.

문자열
문자열은 따옴표로 묶인 일련의 작업입니다. 따옴표는 작은따옴표나 큰따옴표일 수 있습니다. 문자열을 사용하여 할 수 있는 놀라운 일이 많이 있습니다. "+"를 사용하여 두 문자열을 연결할 수 있습니다.

document.writeln()
Document.writeln()은 웹 페이지에 텍스트와 HTML을 작성하는 데 사용할 수 있습니다.

프롬프트
프롬프트를 사용하여 사용자 입력 피드백을 받을 수 있습니다.

if--else
if--else 절을 ​​사용하면 JavaScript가 다양한 사용자 응답에 따라 다르게 동작하도록 할 수 있습니다.

링크 이벤트
href의 OnClick 및 onMouseOver는 사용자 응답에 따라 JavaScript를 실행할 수 있습니다.

이미지 변환
이미지 이름을 지정한 후 JavaScript를 사용하여 표시되는 이미지를 변경할 수 있습니다.

위에서 말한 모든 내용을 마스터했다고 생각하신다면 축하드립니다!
아직 배울 점이 많습니다. 다음 시간에는 JavaScript의 핵심인 문서 개체 모델(Document Object Model)에 대해 알아보고 창과 프레임을 열고 조작하는 방법과 새로운 브라우저를 구축하는 방법을 알아보겠습니다.