- 탬플릿 리터널
- 함수
- onclick
1) 탬플릿 리터널
할당된 값을 불러올 때 사용한다.
<script>
let name = '김함수';
let age = 20;
let addr = '서울특별시 동작구';
let tel = '010-1234-5678';
let msg = '이름은 '+name+
'이고 나이는 '+age+
'이며 주소는 '+addr+
'이고 전화번호는 '+tel+
'입니다.';
// 문자 중간 enter 불가능.
document.write(msg,'<br>');
msg = `이름은 ${name}이고
나이는 ${age}이며
주소는 ${addr}이고
전화번호는 ${tel}입니다.`;
// 문자 중간 enter 가능
document.write(msg,'<br>');
</script>
아래 방식이 탬플릿 리터널인데 기존 방식보다 여러 줄을 작성할 때 자유롭고 편리하다.
작성할 땐 작은 따옴표( ' )가 아닌 백틱 ( ` )을 사용하며 변수나 수식, 값을 불러올 땐 ${} 형식으로 불러오면 된다.
2) 함수
자주 사용하는 명령(실행문, 내용, 문장, 수식, 제어문등)을 함수로 담아두었다가 필요할 때 꺼내 사용한다.
코드를 줄일수 있고 재사용할 수 있다는 장점이 있다.
====================== 형식-1 ======================
function 함수명() { //함수명규칙=변수규칙동일
실행문
} - 정의문
함수명() : 호출
====================== 형식-2 ======================
function 함수명(매개변수, 매개변수) {
실행문
}
함수명(값, 값)
====================== 형식-3 ======================
function 함수명(매개변수, 매개변수) {
실행문
return 반환값
}
let 변수명 = 함수명(값, 값)
총 3가지 형식을 배웠다.
* 어제 인사이드 자바스크립트에서 다른 방법도 배웠지만 책에서도 그렇듯 function을 사용하는 방법을 추천받았다.
<script>
function make() {
document.write('안녕하세요.<br>');
document.write('나는 김함수입니다.<br>');
}//정의문
make();
</script>
function make()로 함수를 만들고 make() 함수를 불러오면 '안녕하세요. 나는 김함수입니다.'라는 메시지가 출력되게 해 보았다.
*<br>을 추가해 줄 바꿈을 하였다.
<script>
function make(lname, age) { // 2)함수 정의
// 3)실행문
document.write(`성은 ${lname}이고 나이는 ${age}살입니다.<br>`)
}
make('김', 10) // 1)함수 호출
make('이', 22)
make('최', 21)
make('박', 30)
</script>
make안에 lname, age 매개변수를 받고 각각 적절한 위치에 백틱( ` )과 ${ } 를 사용해 불러와지도록 document를 작성했다.
3) onclick
클릭했을 때 함수가 실행되도록 구현하고 싶을 때 사용한다.
* onclikc = "함수명()" 좋은 방법은 아니지만 아직 실무에서 쓰이기에 배워두라고 하셨다.
<script>
function make1() {
alert('==== 나는 호출 ====');
}
function make2() {
alert('==== 나는 인사 ====');
}
</script>
</head>
<body>
<p>
<button onclick="make1()">호출</button>
<button onclick="make2()">인사</button>
</p>
</body>
body 부분엔 button을 사용해 함수를 연결하고 script에서 각각 나는 호출, 나는 인사라는 alert창이 실행되도록 해보았다.
<script>
function hello(name) {
alert(`나는 ${name}`);
}
</script>
</head>
<body>
<p>
<button onclick="hello('강호동')">강호동</button>
<button onclick="hello('이승기')">이승기</button>
<button onclick="hello('은지원')">은지원</button>
<button onclick="hello('MC몽')">MC몽</button>
<button onclick="hello('김C')">김C</button>
<button onclick="hello('이수근')">이수근</button>
</p>
</body>
이처럼 함수 매개변수 안에 이름을 넣고 함수에서 매개변수 부분을 name으로 정의하고 alert 창에서 name을 불러오게 하면 함수를 하나만 만들어 쉽게 구현할 수 있다.
<script>
function make(num) {
let result = '';
for (let i = 1; i <= 9; i++) {
result = result +(num+' X '+i+' = '+ num * i+'\n');
}
alert(result);
}
</script>
</head>
<body>
<button onclick="make(2)">2단</button>
<button onclick="make(3)">3단</button>
<button onclick="make(4)">4단</button>
<button onclick="make(5)">5단</button>
</body>
함수와 for문을 사용해 각 단의 버튼을 누르면 위와 같은 내용이 출력된다,
2, 3, 4, 5를 num으로 받고, result와 for문 안에서 사용하는 i를 정의한다.
첫 result는 result + i가 1일 때 괄호 안의 내용으로 바뀌고 다시 올라가 i가 2일 때 괄호 안의 내용과 합쳐지게 된다. (i가 9가 될 때까지)
result = result + i1
result = result + i1 + i2
...
result = result + i1 + i2 + i3 ...+ i9
i가 10이 될 때 i<=9 값이 false가 되어 for문을 실행이 끝나 밑으로 내려오면 그때 당시의 result 값인 result = result + i1 + i2 + i3 ...+ i9가 나타나게 된다.
<script>
function make(num) {
let result = 0;
for (let i = 1; i <= 9; i++) {
result = result +(num+' X '+i+' = '+ num * i+'\n');
}
alert(result);
}
</script>
* result의 최초값이 ""이므로 결과창엔 나오지 않지만 결과가 궁금하여 다른 값을 넣어보니 맨 앞에 남게 되었다.