본문 바로가기

개발일지/Front

javaScript 첫시작! 글자와 그림출력하기(기본구조)

아직 한 시간 밖에 안 배워서 부족하지만 기록해 보려고 합니다.


 

확장자는 똑같이 .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(""); 큰 따옴표가 이미 있기 때문에 그 안에 들어오는 것은 무조건 작은 따옴표로 바꿔줘야 한다.