[WEB] Javascript 실습

HyeJi9908·2022년 9월 13일

[WEB] 기초

목록 보기

4/8

🎈 실습1 - 버튼 생성

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      alert("hello world");		-> 경고창 생성
    </script>
  </head>
  <body>
    <input type="button" value="white" onclick="alert('Hello world!')"/>		-> 버튼 생성 및 클릭 이벤트로 경고창 생성
    <input type="text" onfocus="alert('focus')" onblur="alert('blur')">			-> 텍스트 필드 및 필드 클릭시 경고창 생성
  </body>
</html>

🎈 실습2 - 사용자가 텍스트 필드에 입력한 값을 버튼 클릭 이벤트를 통해 경고창에 띄우기

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      alert("hello world");
    </script>
  </head>
  <body>
    <input type="text" id = "user_input"/>		-> 사용자가 텍스트 필드에 입력한 값을 'user_input' 이라는 id로 저장
    <input type="button" value="white" onclick="alert(document.getElementById('user_input').value)">		-> 버튼 클릭 이벤트로, 경고창 띄움 + 경고창에 사용자가 입력한 텍스트를 id로 가져와 표시함
  </body>
</html>

🎈 실습3 - 버튼 클릭 시 특정 태그의 id값을 가져와 클래스 지정하기(feat. css)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>						-> css
      li{
        color:blue;
      }
      ul li{
        font-size:40px;
      }
      .em{						-> em이라는 클래스의 css
        text-decoration:underline;
      }
    </style>
  </head>
  <body>
    <ol id ="target">			-> ol태그에 id 부여
      <li>html</li>
      <li>css</li>
      <li>JavaScript</li>
    </ol>
    <ul>
      <li>최진혁</li>
      <li>최유빈</li>
      <li>한아람</li>
      <li>한이은</li>
    </ul>
    <input type="button" value="강조"		
       onclick="document.getElementById('target').className='em'"/>			-> 버튼 클릭시 target이라는 id를 가져와 해당 태그에 em클래스로 지정되게끔 함 + em클래스에 지정됨으로써 해당 태그에 em클래스의 css인 언더라인 css 적용됨
  </body>
</html>

🎈 실습4 - 버튼 이벤트로 배경색 변경

(+ nav태그와 article태그 사이 버튼을 위치시켜야 한다)

page_vc.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body id = "target">					-> body 태그에 id 설정
	<header>
		<h1><a href="http://localhost/">JavaScript</a></h1>
	</header>
	<nav>
		<ol>
			<li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
			<li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
			<li><a href="http://localhost/page_op.html">연산자</a></li>
		</ol>
	</nav>
	
    -> 버튼위치를 고려하여 nav태그와 article태그 사이 위치시키기
	<div id = "control">						-> 버튼을 그룹핑하기 위해 div 태그로 묶기 + id 설정
		<input type="button" value="white" onclick="document.getElementById('target').className='white'"/>
		<input type="button" value="black" onclick="document.getElementById('target').className='black'"/>
	</div>								-> 버튼을 누르면 target id를 가져와 css파일의 'className'이름의 클래스 적용

	<article>
		<h2>변수와 상수</h2>
		변수란

		<ul>
			<li>	변수는 바뀔 수 있는 값이고, 상수는 바뀌지 않는 값입니다.</li>
			<li>  변하는 값</li>
		</ul>

		상수란
		<ul>
			<li>	변하지 않는 값</li>
			<li>  a=10 일 때 오른쪽 값인 10이 상수가 된다.</li>
 		</ul>


	</article>
</body>
</html>

style.css

body.white{				-> body태그에 특정 클래스 이름 white로 설정
  background-color: white;
  color: black;				-> 글
  시 색 검정
}

body.black{				-> body태그에 특정 클래스 이름 black 설정
background-color: black;
color: white;
}

header{
  border-bottom:1px solid gray;
  padding:20px;
}
nav{
  border-right: 1px solid gray;
  width:200px;
  height: 600px;
  float: left;
}
nav ol{
  list-style: none;
}
article{
  float: left;
  padding:20px;
}
h2{
  font-size: 50px;

}
#control{		-> html파일 내 control 이름의 아이디를 가진 태그 css
  float: right;			-> 오르쪽에 위치시키기
}

HyeJi9908

이전 포스트

[WEB] JavaScript vs PHP

다음 포스트

[WEB] Javascript 실습

[WEB] 기초

🎈 실습1 - 버튼 생성

🎈 실습2 - 사용자가 텍스트 필드에 입력한 값을 버튼 클릭 이벤트를 통해 경고창에 띄우기

🎈 실습3 - 버튼 클릭 시 특정 태그의 id값을 가져와 클래스 지정하기(feat. css)

🎈 실습4 - 버튼 이벤트로 배경색 변경

[WEB] JavaScript vs PHP

[WEB] PHP 실습

0개의 댓글