아직 한 시간 밖에 안 배워서 부족하지만 기록해 보려고 합니다.
확장자는 똑같이 .html을 쓴다.
<js.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
document.write("안녕하세요!");
document.write("반갑습니다!");
</script>
</body>
</html><body> 안에 <script>태그로 만드는 방법'도' 있다.
출력하려면 document.write(""); 선언하고 "따옴표" 안에 쓰면 출력이 된다.
이대로 저장하고 실행시키면 ?
| 안녕하세요!반갑습니다! |
이렇게 붙어서 출력이 된다.
<script>
document.write("안녕하세요!");
document.write('<br>');
document.write("반갑습니다!");
</script>
html에서 사용하던 줄바꿈 태그<br>를 출력 안에 넣으면 된다. "쌍따옴표", '따옴표' 둘 다 가능!
| 안녕하세요! 반갑습니다! |
이런 모양이 출력된다.
그런데 실제로는 이런 방법을 잘 쓰지 않는다고 한다. 자주 쓰는 유형을 살펴보자.
지금까지 <body>태그 안에 넣었다면 이번엔 <head>로 옮겨준다. 옮기면 바로 출력이 될까? 아니다. 함수 설정을 해놓고 body에서 불러와야 한다. 여러번 사용할 때 하나하나 복붙을 할 필요 없이 바로바로 호출만 하면 끝! 대신에 <body>쪽에서도 <script>태그 안에서 불러와야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function welcome(){
document.write("안녕하세요");
}
</script>
</head>
<body>
<script>
welcome();
</script>
</body>
</html>function 함수명(){ 중괄호 안에 선언을 해야한다 }
바디쪽 스크립트에서 함수명();으로 호출을 하면 끝
| 안녕하세요 |
여기까지가 기본골격이고 더 나아가자면...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function welcome(cc){
document.write(cc+"님 안녕하세요");
}
</script>
</head>
<body>
<script>
welcome('홍길동');
</script>
</body>
</html>
<head>태그 부분에서 함수를 만들 때 funtion welcome(cc){ ----( cc +"님 안녕하세요" }; 이렇게 선언을 해주면 <body>태그 부분에서 호출을 할 때 welcom('홍길동'); 홍길동이라는 값을 cc로 읽어들여서 함께 출력을 해준다. (----는 줄이려고 예시로 씀)
| 홍길동님 안녕하세요 |
출력을 하면 ㅇㅇ님 안녕하세요 라고 뜬다
더 나아가서···
welcome이 써있는 버튼을 누르면 버튼은 없어지고
| 홍길동님 오늘도 안녕하세요!! 감사합니다. |
이런 글씨를 띄우고 싶다. 그냥 들으면 되게 어려울 것 같은데 의외로 쉽다. 버튼은 html+css에서 form을 만들 때 사용한 적이 있다. 그걸 활용해서 사용하면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javaScript</title>
<script>
function welcome(ss, tt){
document.write(ss + "님 " + tt + " 안녕하세요!!");
document.write('<br>');
document.write("감사합니다.");
}
</script>
</head>
<body>
<button onclick="welcome('홍길동','오늘도');">welcome</button>
</body>
</html>하나씩 나눠서 설명을 하자면...
<button onclick="welcome('홍길동','오늘도');">welcome</button>일단은 버튼부터 만들자. <body>태그 안에 <button> 태그를 쓰고 옵션은 onclick 버튼을 눌렀을 때 welcome 함수가 실행된다는 뜻이다. '홍길동', '오늘도'는 이따가 다시 설명하겠다.
function welcome(ss, tt){
document.write(ss + "님 " + tt + " 안녕하세요!!");
document.write('<br>');
document.write("감사합니다.");
}head 부분에서 welcome이라는 이름의 function을 선언한다. (ss, tt)는 변수명이라고 해야할까? java와 다르게 따로 선언을 하지 않아도 된다. 바로 ss tt 라고 선언하면 됨. ( ss + "님 " + tt + " 안녕하세요!!" ) ss와 tt는 내가 임의로 설정하는 거고 name, today 이런식으로 설정해도 된다!!
<button onclick="welcome('홍길동','오늘도');">welcome</button>('홍길동','오늘도');는 ss와 tt가 되고 여기서는 ""가 아니라 ''가 쓰이는 이유는 이미 onclick="이 안에 있기 때문!"
실행을 하면
 |
 |
[welcome]
버튼이 덩그러니 놓여 있다.
그 버튼을 누르면?
홍길동님 오늘도 안녕하세요!!
감사합니다.
이런 글씨가 페이지에 뜬다.
그렇다면 javaScript에서 그림을 불러오는 태그는 뭘까? 이걸 알려면 먼저 html에서 그림을 불러오는 태그를 알아야 한다.
<img src"./img/incheon.jpg"><body> 안에 img src="(주소)" 끝!
그렇다면 위에서한 것처럼 [welcome] 버튼을 누르면 그림이 나오는 페이지는 어떻게 만들어야할까?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javaScript</title>
<script>
function welcome(){
document.write("<img src='./img/incheon.jpg'>"); //안에를 따옴표로 바꿔줘야함
}
</script>
</head>
<body>
<button onclick="welcome();">welcome</button>
</body>
</html>버튼은 위에서 한 것처럼 해야하고 위에 함수를 고쳐야한다. 글씨가 아니라 사진이 뜨는 거라고 해도 document.write("");를 쓰는 것은 똑같다. 아 그럼 html 안에 있는 주소를 그대로 복사하면 되겠네~~ 생각할 수 있지만 아니다. img src="(주소)" 주소를 감싸는 큰따옴표를 img src='(주소)' 이렇게 작은 따옴표로 바꿔줘야 한다. 왜냐면 세계가 정한 규칙이다. document.write(""); 큰 따옴표가 이미 있기 때문에 그 안에 들어오는 것은 무조건 작은 따옴표로 바꿔줘야 한다.
'개발일지 > Front' 카테고리의 다른 글
| [html] body에서 style 불러와서 사용하기 (0) | 2021.09.09 |
|---|---|
| div 페이지의 구역 나누기와 sementic 시멘틱 태그 (0) | 2021.09.04 |
| html 리스트, 프레임, 불러오기 복습 (1) | 2021.09.03 |
| list 목록 태그 알아보기 (ol ul dl - li dt dd) (0) | 2021.09.03 |
| 인라인, 블록 박스, 인라인 블록 유형 설명 (0) | 2021.09.03 |
