SMALL
안녕하세요! 보라해바라기입니다:)
학원이 끝난 후, 프로젝트를 아.. 주 천천히 보강하며 그동안 못했던 것들을 했어요!
학원이 끝난지도 벌써 한 달이 다 되어가네요..
JavaScript를 다시 한 번 복습하면 좋겠다는 생각이 들어서!
"모던 JavaScript"로 공부해보려 합니다 ㅎㅎ
한 번 더 개념을 확실히 잡아 추후의 JS 프레임워크를 사용할 때 도움이 될 수 있도록..!!!
각 챕터에서 제시하는 과제를 티스토리를 통해 기록할 예정입니다:)
2.1 (1) alert창 띄우기
<!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>alert창 띄우기</title>
</head>
<body>
<script>
alert("자바스크립트!")
</script>
</body>
</html>2.1 (2) 외부 스크립트를 이용해 alert 창 띄우기 (alert.js 파일 포함)
<!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>외부 스크립트를 이용해 alert 창 띄우기</title>
</head>
<body>
<script src="./alert.js"></script>
</body>
</html>// alert.js 파일
alert("자바스크립트!")2.4 (1) 변수 가지고 놀기
<!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>변수 가지고 놀기</title>
</head>
<body>
<script>
let admin, name;
name = "John";
admin = name;
alert(admin);
</script>
</body>
</html>2.4 (2) 올바른 이름 선택하기
<!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>올바른 이름 선택하기</title>
</head>
<body>
<p>1. 현재 우리가 살고있는 행성(planet)의 이름을 값으로 가진 변수를 만들어보세요.
변수 이름은 어떻게 지어야 할까요?</p>
<p>
=> let ourPlanetName = "Earth"
</p>
<br>
<p>2. 웹사이트를 개발 중이라고 가정하고, 현재 접속 중인 사용자(user)의 이름(name)을 저장하는 변수를 만들어보세요.
변수 이름은 어떻게 지어야 할까요?</p>
<p>
=> let currentUserName = "Ann"
</p>
</body>
</html>2.4 (3) 대문자 상수 올바르게 사용하기
<!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>대문자 상수 올바로 사용하기</title>
</head>
<body>
<p>
const BIRTHDAY = '18.04.1982';
<br>
대문자 상수로 바꿔도 괜찮을까요?
</p>
<p>
=> yes, 생년월일은 "고정된 값"이기에
</p>
<br>
<p>
const AGE = someCode(BIRTHDAY);
<br>
대문자 상수로 바꿔도 괜찮을까요?
</p>
<p>
=> No, 나이는 "해"가 지날수록 "바뀌어서" 변수로 선언
</p>
</body>
</html>2.5 문자열 따옴표
<!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>문자열 따옴표</title>
</head>
<body>
<script>
let name = "Ilya";
alert( `hello ${1}` ); // 예측: hello 1
alert( `hello ${"name"}` ); // 예측: hello name
alert( `hello ${name}` ); // 예측: hello Ilya
</script>
</body>
</html>2.6 간단한 페이지 만들기
<!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>간단한 페이지 만들기</title>
</head>
<body>
<script>
'use strict'
let name = prompt("당신의 이름은 무엇입니까?", "");
alert(name)
</script>
</body>
</html>
728x90
'JavaScript' 카테고리의 다른 글
| [모던 JavaScript] 2.12 ~ 2.16 과제 정리 (0) | 2022.11.17 |
|---|---|
| [모던 JavaScript] 2.7~2.11 과제 정리 (0) | 2022.11.16 |
| [FrontEnd2] JS 연습문제 (대수의 법칙 _ 주사위) (0) | 2022.06.05 |
| [FrontEnd2] JS 연습문제 (객체) (0) | 2022.06.05 |
| [FrontEnd2] JS 연습문제 (함수) (0) | 2022.05.29 |
댓글