내일배움단 Web1.3
[웹개발 종합반] 1주 3일차 개발일지(1주 12-16강, 숙제)
💻TIL Web.103
1. JavaScript 기초문법
앱개발 1일차와 동일한 내용을 다뤘다. 변수 이름 설정 시 camel case(특수문자 없이 첫 글자만 소문자, 다음 단어는 대문자로 이어쓰는 방식) 외에 snake case(언더바(_)를 사용해 여러 단어를 이어쓰는 방식)라는 변수 표현 방법도 있다는 걸 알았다. 나는 이전에 배운 camelCase 방법이 더 익숙해서 앞으로 camelCase 형식을 사용할 예정이다.
1) 리스트(Array)와 딕셔너리(Object)
리스트(Array)는 순서가 중요하고, 딕셔너리(Object)는 순서가 중요하지 않다. Array와 Object는 서로서로의 요소로 쓰일 수 있다.
let fruitObj = {a: 'apple', b: 'banana'};
let berriesArr = ['cranberry', 'blueberry', 'strawberry']
// Object에 Array 추가하기
fruitObj['berries'] = berriesArr;
console.log(fruitObj);
// {a: 'apple', b: 'banana', berries: Array(3)}
2) 함수
수학에서의 함수는 값을 넣으면 식에 따른 값이 나오는 것이었다면, 프로그래밍에서의 함수는 부르면 정해진 동작을 하는 것이다. 함수 끝에는 return 키워드가 사용되는데 이는 ‘정해진 동작을 끝내고 나를 변신시켜 줘!’라는 뜻으로 함수가 값을 반환하도록 해 준다. 반환할 값이 없다면 return을 쓰지 않아도 된다.
function mysum(num1, num2) {
return num1 + num2;
}
let result = mysum(2, 3);
console.log(result); // 5
함수가 alert()처럼 parameter 없이 정해진 동작을 하는 경우는 함수 옆 괄호를 비워둔다. 함수를 호출할 때 함수이름()으로 불러 작동시킬 수 있다.
function hello() {
alert('Hello!');
alert('Hello again!');
}
hello();
/*
Hello!
Hello again!
*/
더 자세한 사항은 Functions 다시 읽어보기!
3) 반복문(Loop)
반복문을 사용해서 같은 동작을 여러 번 자동으로 수행할 수 있다. Array의 index를 사용해 원하는 값만 출력할 수도 있다. 반복문 안에 조건문을 같이 쓸 수도 있다.
let scores = [
{name: 'Alex', score: 60},
{name: 'Brian', score: 80},
{name: 'Cindy', score: 65},
{name: 'Paul', score: 70},
{name: 'Olivia', score: 83}
]
for (let i = 0; i < scores.length; i++) {
let name = scores[i]['name'];
let score = scores[i]['score'];
if (score > 75) {
console.log(name, score);
}
}
/*
Brian 80
Olivia 83
*/
더 자세한 설명은 Conditionals, Loops 다시 읽어보기!
2. 숙제: 원페이지 쇼핑몰 만들기(HTML+CSS)
1) 예시 이미지
‘주문하기’ 버튼 클릭하면 ‘주문이 완료되었습니다’ alert창 띄우기
2) 결과 이미지
① 기본 화면
② ‘주문하기’ 버튼을 눌렀을 때
2) 🤔 QnA
1) button 태그는 글 속성(inline)을 가지기 때문에 가운데 정렬을 위해서 display: block을 사용해야 한다. 처음에는 <style> 태그에서 button 클래스 선택자를 이용했는데, 적용이 되지 않았다. 너비가 지정이 되지 않았나 싶어서 width 값을 줘봤는데도 적용이 되지 않았다.
/* X */
button {
display: block;
margin: auto;
}
/* O */
.btn {
display: block;
margin: auto;
}
결국 클래스 선택자를 이용해 가운데 정렬을 할 수 있었지만, button 태그 선택자를 이용해 버튼을 가운데 정렬시키는 방법도 궁금하다.
Q. 태그 선택자를 이용해 어떻게 버튼을 가운데 정렬할 수 있을까?
2) ‘버튼을 누르면 alert 창이 뜨도록 하기’ 기능을 구현하기 위해, 구글링을 통해 샘플 코드를 찾았다.
<script>
function btn() {
alert('버튼이 클릭되었습니다');
}
</script>
<body>
<button onclick="javascript:btn()">버튼</button>
</body>
<script> 태그 안에 함수를 정의하고, <button> 태그의 onclick 속성을 활용해 자바스크립트의 함수를 부를 수 있다.
Leave a comment