<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>글자색 바꾸기</title>
<link rel="stylesheet" href="css/change-color.css" />
</head>
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해 보세요</p>
<script src="./js/change.js"></script>
</body>🗺️ 자바스크립트 코드 작성 위치
📌 HTML 태그의 이벤트 리스너 속성에 작성
📌 <script> </script> 태그에 작성
📌 자바스크립트 파일에 작성
📌 URL 부분에 작성
<body>
<h1>어서오세요</h1>
<script>
// prompt: 외부에서 입력한 값을 가져올 수 있음
var name = prompt('이름을 입력하세요!');
document.write('<b><big>' + name + '</big></b>님, 안녕하세요!');
</script>
</body>🧮 자바스크립트 기본 함수
🖊️ prompt
- 사용자로부터 '문자열'을 입력 받아서 리턴
❗ alert
- 메시지 전달
✔️ confirm
- '확인/취소' 버튼을 가진 다이얼로그 출력
- 확인: true, 취소: false 리턴
<body>
<script>
var now = new Date();
var display = now.toLocaleTimeString();
document.write('현재 시각은 ' + display);
</script>
</body> ✔️ toLocaleTimeString(): 생성된 Date 객체에서 시간 부분을 현재 지역 표기법으로 변환하여 가져온다
➡️ locales(로케일 - 언어와 국가)과 options(옵션)을 파라미터(Parameter) 전달받아 현재 지역 표기법으로 변환한다
📌 f12: 콘솔창을 통해 간단하게 코드를 구현하거나 오류를 찾을 수 있다
📌 자바스크립트 소스 작성 시 지켜야 할 6가지 규칙
1. 대소문자 구분
sum, Sum, SUM => 모두 다르게 인식
2. 읽기 쉽게 들여쓰기 하는 습관
- Tab키 눌러 들여쓰기
3. 세미콜론(;)으로 문장 구분
- 꼭 써도 되고 안 써도 되는데... 쓰세요 걍 습관 들이셈 자바에선 무조건 써야 함
- 문장 끝에 붙인다
- 자바스크립트는 ; 안 붙여도 실행 됨 (하지만 ; 안 붙여서 오류나는 경우 봤었으니까 습관 들이는 게 조을 듯 ㅎㅎ)
- 코드 구분하기 위해 붙이는거 추천
4. 주석
한 줄 주석 ➡️ (단축키: crtl + /)
// 주석 내용 여러줄 주석 ➡️ (단축키: alt + shift + a)
/* 여러 줄을 주석 처리 */
5. 식별자 (변수, 함수, 속성 등)을 구별하기 위해 이름을 붙여주는 특정 단어
- 식별자 첫 글자는 반드시 영문자, _, $ 로 시작 (_, $로는 보통 시작하지 않긴 함)
ex. num, _num, $num - 두 단어를 연결하여 이름을 만들 때 첫 글자는 소문자, 다음 단어 시작은 대문자로 시작(카멜 케이스 camel case: ex. var carmelCase;)
- 예약어는 식별자로 사용 불가
💻 데이터타입
✅ 기본형 타입
number, string, boolean, array, object, null, undefined
- number: 정수 혹은 실수
- string: 문자 혹은 문자열
- boolean: 참 혹은 거짓
- array: 배열(데이터 집합), 객체로 취급
["집", "가고", "싶다"] - object: 데이터 속성과 값으로 이루어진 집합
{name: '수갱', age: 28} - null: 객체 값 x
- undefined: 데이터 값이 정해지지 x
array: 인덱스로 배열의 값을 불러온다! 0부터 시작!
var season = ["봄", "여름", "가을", "겨울"];
object: 함수와 속성이 함께 포함된 유형var kim = { firstName : "John", lastname : "Smith", age : 35, address : "Seoul" };
✅ 객체 타입
💻 변수란 무엇일까?
✅ 변수와 상수
➡️ 변수: 변하는 값
➡️ 변수에 값이나 식을 저장한다.
➡️ 변수를 선언하면서 저장할 수도 있고, 선언한 다음에 저장할 수도 있다.
➡️ 상수: 변하지 않는 값
변수 선언 규칙 3가지
✔️ 이름은 의미 있게
✔️ 카멜 케이스 camelCase 사용
혹은 스네이크_케이스 snake_case 를 사용하기도 함
✔️ 선언할 수 없는 이름 있음
변수명 작성 규칙
1. 문자, 밑줄(_), $fh tlwkr
2. 대소문자 구별
3. 한글 사용 가능하지만 영문자 사용 권장
4. 예약어 사용 불가
📍 전역 변수와 지역 변수
변수의 메모리 수명: 변수가 생성되어 역할을 다한 후 해제되기까지의 주기
📍 전역 변수
코드 내 어느 위치에서든 선언하여 전 영역에서 사용할 수 있는 변수
📍 지역 변수
변수가 선언된 해당 블록에서 선언하여 범위 내에서만 유효하게 사용할 수 있는 변수
참고 링크
JavaScript - 전역변수, 지역변수, 변수범위, 변수 호이스팅(Hoisting)
✔️ 실습
<body>
<button class="btn" onclick="calc()">나이 계산하기</button>
<div id="result" class="show">(결과 값 표시)</div>
<script>
function calc() {
// 변수 선언
var currentYear = prompt('올해 연도를 입력하세요.', 'yyyy'); // 올해 연도를 지정할 변수
var birthYear = prompt('나이를 입력하세요.', 'yyyy');
var age;
age = currentYear - birthYear + 1;
// 올해 연도에서 태어난 연도를 빼고 1을 더함
// 결과값 출력
document.querySelector('#result').innerHTML = '당신의 나이는 ' + age + '살 입니다.';
// 아이디 값이 result인 부분에 age 값을 html에 삽입해라 ~ 머 대충 이런
}
</script>
</body>📌 funtion: 함수선언
📌 document.write(): 화면에 텍스트 출력
📌 document.querySelector(): css 선택자 요소를 찾아 결과값 표시
📌 .innerHTML: HTML에 변경할 텍스트 삽입
참고링크
❣️getElementById 그리고 querySelector 차이점
<body>
<div id="contents">
<img src="images/sale.png" />
<ul>
<li>
<label for="oPrice">원래 가격</label>
<input type="text" id="oPrice" />원
</li>
<li>
<label for="rate">할인율</label>
<input type="text" id="rate" />%
</li>
<li>
<button onclick="showPrice()">할인 가격 계산하기</button>
</li>
</ul>
<div id="showResult"></div>
<script>
function showPrice() {
// input 태그에서 입력 받은 id 값(데이터)을 연결시켜주기
//.value -> 입력된 텍스트의 값만 가져오겠다는 의미
var originPrice = document.querySelector('#oPrice').value;
var rate = document.querySelector('#rate').value;
// 📌 1 = 100%
var savedPrice = originPrice * (1 - rate / 100);
document.querySelector('#showResult').innerHTML =
'상품의 원래 가격은 ' +
originPrice +
'원이고, 할인율은 ' +
rate +
'%입니다. 할인된 금액은 ' +
savedPrice +
'원 입니다.';
}
</script>
</div>
</body>📌 .value: 전달된 파라미터 객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 리턴
💻 연산자
피연산자에게 연산 명령을 내리기 위해 사용하는 기호
✅ 문자열 연산자
: 문자열 연결
✅ 산술 연산자 ➡️ 사칙연산 수행
: 더하기, : 빼기, : 곱하기, /: 나누기, %: 나머지, ++: 증감, --: 감소
<button class="btn" onclick="calc()">나이 계산하기</button>
<div id="result" class="show">(결과 값 표시)</div>
<script>
function calc() {
// 함수 선언
// 변수 선언
var currentYear = prompt('올해 연도를 입력하세요.', 'yyyy'); // 올해 연도를 지정할 변수
var birthYear = prompt('나이를 입력하세요.', 'yyyy');
var age;
age = currentYear - birthYear + 1;
// 올해 연도에서 태어난 연도를 빼고 1을 더함
// 결과값 출력
document.querySelector('#result').innerHTML = '당신의 나이는 ' + age + '살 입니다.';
// 아이디 값이 result인 부분에 age 값을 html에 삽입하라는 뜻!
}
</script>
- 우선 html을 실행하면 다음과 같은 페이지가 나온다.
<button>태그를 누르면onclick이벤트로 스크립트의calc()함수가 실행된다.
calc()함수가 실행되며prompt창이 두 개 뜨며 각각의 값을 입력하면
id= result인<div>박스 안에 연산 결과가 표시된다.
<script>
// 숫자를 입력받습니다.
var int = prompt('cm 단위의 숫자를 입력해주세요.');
// 입력을 숫자로 변경하고 cm 단위로 변경합니다.
var cm = Number(int); // 이 과정을 하지 않으면 string으로 출력됨
var inch = cm * 0.393701;
// 출력합니다.
alert(cm + 'cm는 ' + inch + 'inch 입니다.');
</script>- 곱셈 연산
✅ %: 나눗셈 결과의 나머지 값을 구하는 것
✅ 증감 연산자
증감 연산자는 전위(++n)와 후위(n++)로 나뉜다. 이 부분이... 정말정말 헷갈린다.
우선 전위나 후위나 증감 연산자가 사용된 후의 n을 출력하면 둘 다 +1이 증가된 값을 갖는다. 여기는 괜찮지만... 전위 연산자가 사용되었느냐 후위 연산자가 사용되었느냐에 따라서 연산 결과가 달라진다...
전위 연산자: 1 증가/감소된 값이 연산 결과 (ex. ++n)
후위 연산자: 1이 증가/감소하기 전의 값이 연산 결과 (ex. n++)
a++ : a를 사용한 후에 a 값이 1 증가
++a : a를 1 증가한 후에 a 값 사용
a-- : a를 사용한 후에 a 값이 1 감소
--a : a를 1 감소한 후에 a값 사용
연산 결과는 '증감 연산 그 자체의 값'을 말한다. 증감연산자를 사용했을 때 값을 출력해보면 다음과 같다.
전위 연산자는 증가시킨 후에 값을 사용하기 때문에 10에 1이 증가된 후의 값을 사용해서 11 + 5 = 16이라는 결과 값을 얻었다.
후위 연산자는 사용한 후에 1을 증가시키기 때문에 10 + 5 = 15 라는 결과 값을 얻었다.
a = 1;
b = ++a; // 1.증가가 우선이라 ++a → a = 2. 증가된 값을 b에 대입 b = 2.전위 연산자는 증가가 먼저 일어난다.
a = 1;
b = a++; // 1. 대입 연산을 먼저 한다. 따라서 b=1. 2. 이후 증감이 되기 때문에 a=2.후위 연산자는 연산이 먼저 일어난다.
이 두 차이를... 잘... 생각해야 한다... 난 아직도 이걸 틀린다... 어려워 😂
수업 때... 난 이걸 또 틀려버림... 크게 대답하지 않아서 다행이라고 생각했다. 나란 빡대갈이... 코딩을 해도 되는지... 이젠 알겠군요... (하지만 또 틀릴듯...)
참고 링크
증감연산자 전위, 후위 (++n, n++) 차이점 쉽게 이해하기
✅ 비교 연산자 ➡️ 두 피연산자의 값을 비교하여 참(true)/거짓(false) 구분
: 값이 같은지 비교
: 값과 데이터 타입까지 같은지 비교
!=: 값이 다른지 비교
!==: 값 또는 데이터 타입이 다른지 비교
✅ 논리 연산자
일반 논리 연산자
&& 논리곱: 두 개의 피연산자 값이 모두 참일 때만 참
논리합: 두 개의 피연산자 값 중 하나라도 참이면 참이고, 모두 거짓이면 거짓
논리 부정: 피연산자의 값이 참이면 거짓, 거짓이면 참
비트 논리 연산자
& 비트곱: 두 비트 중 모두 1일 때만 1
비트합: 두 비트 중 하나라도 1이면 1, 모두 0이면 0
비트 부정: 비트 값이 1이면 0, 0이면 1
^ 배타적 비트합: 두 비트가 같을 때 0, 다를 떄 1
✅ 조건 연산자(삼항연산자) ➡️ 조건식 판별해 참, 거짓이냐에 따라서 다음 문장을 선택적으로 실행
(조건) ? a ! b ;조건식이 참일 경우 a 실행, 거짓일 경우 b 실행
✅ 대입 연산자 ➡️ 기호를 사용하여 값이나 변수 할당
오른쪽 식의 결과를 왼쪽에 있는 변수에 대입하는 것!
a = b;: a에 b의 값이 대입되어 a = 3, b = 3이 된다.a += b;:a = a + b의 연산이 이루어져서 a = 6, b = 3이 된다.
