본문 바로가기
웹개발 종합반

<스파르타 코딩 클럽>웹개발 종합반 1주차 -WIL(2)

<병아리> 2022. 5. 15. 00:36

javascript 기초문법

 

// 변수, 자료형, 함수, 조건문, 반복문

 

<변수>

  • 변수 대입의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (( a = 2 ) 2를 a라는 변수에 넣는다)
  • let으로 변수를 선언
  • 알아보기 쉽게 이름 짓는것이 좋음
let num = 20
num = 'Bob'

<자료형>

1. 리스트 : 순서를 지켜서 가지고 있는 형태

let a_list = ['사과','배','참외']

추가시 : a_list.push('감')

a_list = ['사과','배','참외','감']

2. 딕셔너리 : 키(key)-밸류(value) 값의 묶음

let a_dict = {'name':'bob;,'age':27}

추가시 : a_dict['height']=180

 

<그외 기본연산>

let a = 100
a % 8 = 4                            (a를 8로 나눈 나머지)
a == 100                             (같다)
a != 200                             (같지않다)
myemail.split('@')                   (@를 기준으로 나눈다)
예시 ) let myemail = 'sparta@gmail.com'

let result = myemail.split('@') // ['sparta','gmail.com']

result[0] // sparta
result[1] // gmail.com

let result2 = result[1].split('.') // ['gmail','com']

result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com

myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!

<함수>

// 만들기
function 함수이름(필요한 변수들) {
	내릴 명령들을 순차적으로 작성
}

예시)
function sum(num1, num2) {
	return num1 + num2;
}

sum(3, 5); // 8
sum(4, -1); // 3

<조건문>

function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else {
		alert('청소년이에요')
	}
}

is_adult(25)

+) && 는 and  ,  || 는  or

 

<반복문>

for (let i = 0; i < 100; i++) {
	console.log(i);
}

예시)
for (let i = 0 ; i < scores.length ; i++) {
	if (scores[i]['score'] < 70) {
		console.log(scores[i]['name']);
	}
}

// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.

 

*1주차 과제

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>조명을 팝니다. | 부트스트랩 연습하기</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Jua', sans-serif;
        }

        .myphoto {
            background-image: url("https://image.ohou.se/i/bucketplace-v2-development/uploads/productions/156815629461267391.png?gif=1&w=640&h=640&c=c");
            width: 500px;
            height: 300px;
            background-position: center;
            background-size: cover;
            border-radius: 10px;
        }

        .price {
            font-size: 20px;
        }


        .page {
            width: 500px;
            margin: auto;
        }

        .item-desc {
            width : 500px;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .item-order {
            width : 500px;
        }

        .btn-order {
            width :100px;
            margin : auto;
            display : block;
        }
    </style>
    <script>
        function order() {
            alert('주문이 완료되었습니다!')
        }
    </script>
</head>

<body>
<div class="page">
    <div class="myphoto"></div>
    <div class="item-desc">
    <h1>조명을 팝니다 <span class="price" >가격 30,000원/개</span></h1>
    <p>원하는 문구로 레터링하여 나만의 조명을 직접 만들어 보세요!</p>
        </div>
    <div class="item-order">
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-default">주문자 이름</span>
        </div>
        <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
    </div>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <label class="input-group-text" for="inputGroupSelect01">수량</label>
        </div>
        <select class="custom-select" id="inputGroupSelect01">
            <option selected>--수량을 선택하세요--</option>
            <option value="1">1개</option>
            <option value="2">2개</option>
            <option value="3">3개</option>
        </select>
    </div>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-default">주소</span>
        </div>
        <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
    </div>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-default">전화번호</span>
        </div>
        <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
    </div>
    <button type="button" onclick="order()" class="btn btn-primary btn-order">주문하기</button>
</div>
</div>
</body>

</html>

'웹개발 종합반' 카테고리의 다른 글

<스파르타 코딩 클럽>웹개발 종합반 2주차 -WIL (2)  (0) 2022.05.17
<스파르타 코딩 클럽>웹개발 종합반 2주차 -WIL (1)  (0) 2022.05.17
<스파르타 코딩 클럽>웹개발 종합반 1주차 -WIL(1)  (0) 2022.05.14

'웹개발 종합반' Related Articles

티스토리툴바