#2. JavaScript 활용

by 남민우_ 2024. 10. 28. 22:51

자바스크립트(이하 js)는 웹페이지에 추가적인 동작, 예를 들어 검색창을 클릭하면 연관 검색어가 나오거나 아이콘을 클릭하면 다른 사이트로 이동되거나 하는 등의 움직임을 더해주기 위해 사용된다.

CSS까지 적용된 코드에 이어서 실습을 진행했다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BootCamp Flix</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

        * {
            font-family: "Raleway", sans-serif;
        }

        .main {
            color: white;

            background-image: url('https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg');
            background-position: center;
            background-size: cover;
        }

        body {
            background-color: black;
        }

        .myCards
        {
            width:1200px;
            margin : 20px auto 20px auto;
        }

        .MyLables
        {
            width: 500px;
            margin : 20px auto 20px auto;

            border:1px solid white;
            padding : 20px;
            border-radius: 5px;
        }

        .form-floating > input
        {
            background-color: transparent;
            color:white;
        }
        .form-floating > label
        {
            color:white;
        }
        .input-group>label
        {
            background-color: transparent;
            color:white;
        }
        .MyLables > button
        {
            width:100%;
        }
    </style>
</head>

<body>
    <header class="p-3 text-bg-dark">
        <div class="container">
            <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
                <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
                    <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
                        <use xlink:href="#bootstrap"></use>
                    </svg>
                </a>

                <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
                    <li><a href="#" class="nav-link px-2 text-danger">BCFlix</a></li>
                    <li><a href="#" class="nav-link px-2 text-white">Home</a></li>
                    <li><a href="#" class="nav-link px-2 text-white">Series</a></li>
                    <li><a href="#" class="nav-link px-2 text-white">Moive</a></li>
                    <li><a href="#" class="nav-link px-2 text-white">Saves</a></li>
                </ul>

                <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
                    <input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."
                        aria-label="Search">
                </form>

                <div class="text-end">
                    <button type="button" class="btn btn-outline-light me-2">Login</button>
                    <button type="button" class="btn btn-danger">Sign-up</button>
                </div>
            </div>
        </div>
    </header>
    <div class="main">
        <div class="p-5 mb-4 bg-body-tertiary rounded-3">
            <div class="container-fluid py-5">
                <h1 class="display-5 fw-bold">킹덤</h1>
                <p class="col-md-8 fs-4">병든 왕을 둘러싸고 흉흉한 소문이 떠돈다.
                    어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하.
                    정체 모를 악에 맞서 백성을 구원할 희망은 오직 세자뿐이다.</p>
                <button type="button" class="btn btn-outline-light">영화 기록하기</button>
                <button type="button" class="btn btn-outline-light">상세 정보</button>
            </div>
        </div>
    </div>
    <div class = "MyLables">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="영화 이미지">
            <label for="floatingInput">영화 이미지 주소</label>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="영화 제목">
            <label for="floatingInput">영화 제목</label>
        </div>
        <div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01">별점</label>
            <select class="form-select" id="inputGroupSelect01">
              <option selected>별점 선택</option>
              <option value="1">⭐</option>
              <option value="2">⭐⭐</option>
              <option value="3">⭐⭐⭐</option>
              <option value="4">⭐⭐⭐⭐</option>
              <option value="5">⭐⭐⭐⭐⭐</option>
            </select>
          </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="영화 추천 이유">
            <label for="floatingInput">영화 추천 이유</label>
        </div>
        <button type="button" class="btn btn-danger">기록하기</button>
    </div>
    <div class="myCards">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">⭐⭐⭐</p>
                        <p class="card-text">영화 코멘트</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">⭐⭐⭐</p>
                        <p class="card-text">영화 코멘트</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">⭐⭐⭐</p>
                        <p class="card-text">영화 코멘트</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">⭐⭐⭐</p>
                        <p class="card-text">영화 코멘트</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

JS/자바스크립트

자바스크립트는 역사적으로 웹브라우저에서 실행되는 스크립트 언어로 사용됨. 현재는 웹 언어의 표준으로 사용.

추가적으로 서버를 만드는데에도 사용된다.

변수, 자료형, 함수, 반복문, 조건문 으로 5가지가 문법의 기초라고 본다.

<script>
    let a = 'hello';
    console.log(a);
</script>

Head 파트에 <script> 사이에 작성하며, 해당 코드의 console 코드는 웹 페이지에서 F12 -> console 에서 볼 수 있는 개발자를 위한 디버깅 코드다.

자료형

리스트(List) 와 딕셔너리(Dictionary) 로 이루어져 있다.

1. 리스트

let a = ['사과', '배', '수박'];
console.log(a[0]);

2. 딕셔너리

let person = {'name' : 'bob', 'age' : 30, 'height' : 180
console.log(person['name']);

리스트는 [ , ] 대괄호, 딕셔너리는 { , } 중괄호를 사용한다.

조건문

let age = 35;
if(age<20) console.log('청소년입니다');      
else console.log('성인입니다');

C/C++, C# 등 다른 언어와 비슷한 형태를 취한다.

반복문

let ages = [15, 30, 24, 25, 2667];

ages.forEach(a=>{
	if(a<20) console.log("청소년입니다");
	else console.log("성인입니다");
});

ListName.forEach 로 작성하는데, C++과 Foreach 라는 키워드 자체는 동일하지만 구조가 조금 다르다.

JS활용 - 웹페이지 동작

<script>
function hey() 
{
	alert("안녕하세요");
}      
</script>
     
<button onclick = "hey()" type="button" ...

스크립트 파트에 함수를 만들어놓고, Body 파트에 실행할 함수의 조건을 설정한다.

위 코드의 경우 해당 button 을 클릭(onClick) 하면 함수가 호출되는 형식이다.

다만 함수의 내용이 길어질 경우, 모든 경우를 다 작성하기 힘들어지는데, 이때 미리 만들어지 라이브러리를 가져와서 더 쉽고 직관적으로 작성하도록 할 수 있다.

이 경우 'JQuery' 를 사용한다.

JQuery

JS를 더 쉽게 작성할 수 있도록 미리 만들어둔 라이브러리이다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

이 코드를 <style> 위에 삽입하여 JQuery 를 동작할 수 있다.

활용 예시

function hey() 
{
	$('#title').text('쥬라기월드');
}

$('#title') 이 코드가 title 항목을 가리킨다.

추가로 몇가지 예시를 더 들어본다.

let c = [
	{'name':'영수', 'age':30},
	{'name':'철수', 'age':35}
]

List 안에 Dictionary 를 삽입한 형태이다. 더 다양한 구조의 데이터를 설계할 수 있다.

이때, C의 0번째 데이터를 출력하면, 영수의 Dictionary 가 출력된다.

변수 안에 일정 데이터, 혹은 다른 변수를 넣을 때가 있는데, 이때는 ` 백틱을 사용한다.

let temp_html = `<p>감자</p>`;
$('#q1').append(temp_html);

텍스트를 넣을 때는 다음과 같이 사용하고

let a = fruits[0];
let temp_html = `<p>${a}</p>`;
$('#q1').append(temp_html);

변수를 할당할 때는 다음과 같이 ${변수} 와 같은 문법으로 사용한다.

foreach 사용 예시

fruits.forEach(a=>
{
	let temp_html = `<p>${a}</p>`;
	$('#q1').append(temp_html);
});

foreach + 변수 사용 예시

let people = [
	{ 'name': '서영', 'age': 24 },
    { 'name': '현아', 'age': 30 },
	{ 'name': '영환', 'age': 12 },
	{ 'name': '서연', 'age': 15 },
	{ 'name': '지용', 'age': 18 },
	{ 'name': '예지', 'age': 36 }
]

$('#q2').empty();

people.forEach(a => {
	let name = a['name'];
	let age = a['age'];
	let temp_html = `<p>${name}는 ${age}살입니다</p>`;
	$('#q1').append(temp_html);
});

'내일배움캠프 학습 > HTML' 카테고리의 다른 글

방명록 만들기 (0)	2024.10.30
#5. 웹페이지 배포 (1)	2024.10.29
#4. FireBase 활용 (1)	2024.10.29
#3. JS 실습 (2)	2024.10.28
#1. 웹개발 기초 (2)	2024.10.28

남민우의 공부 블로그

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문

JS/자바스크립트

자료형

조건문

반복문

JS활용 - 웹페이지 동작

JQuery

활용 예시

'내일배움캠프 학습 > HTML' 카테고리의 다른 글

관련글 더보기

추가 정보

인기글

최신글

티스토리툴바