발표
어떤 방식을 쓰면 문제가 해결될 것인가?
why 보다는 how에 집중하기
프로그램을 만들 때 분할해서 생각하기
1. 입력
2. 입력처리
3. 처리한 결과 출력
한 번에 처리할 수가 없다.
나누어서 처리하기
프로그래밍 - 컴퓨터에게 일을 시키겠다.
프로그래밍 언어 - 컴퓨터에게 정확하게 일을 시키기 위한 언어
컴퓨터의 물리적 구조
기본 3요소
중앙처리장치
기억장치
입출력장치
외울 부분!
- 변수 : 특정 값을 저장하는 메모리 공간, 크기를 정하고 사용하는 이름을 붙인 메모리 공간
- 출력 명령어
- 입력 명령어
- 제어 명령어
- 분기 명령어 : 상황에 따라서 나누어진다.(예 : 4분기)
- 반복 명령어 : 횟수가 정해진 반복(조건에 따른), 추상적인 제안
공간의 크기 = 단위
컴퓨터의 최소 단위 - 1bit
데이터의 최소 단위 - 1byte = 8bit (방 하나칸처럼 취급)
모자라면 확장시키는 개념
date의 처리
입력값 - 변수 - 처리 - 출력
변수의 이름을 정하는 이유는?
어디인지를 찾아가기 위해서 사용하는 것 - 주소
동일한 크기로 공간을 분할하여 번호를 지정
물리적 주소 - 2진수 또는 16진수로 표현
논리적 주소 - 변수의 이름을 의미
프로그램
가상현실 사람, 사물로 생각하고 작업하기
프로그램을 작성하는 순서
1. 입력값을 따져본다.
입력값의 개수와 같은 변수를 만든다.
메모리를 사용하기 위해서는 무조건 변수 만들기!
입력값보다 더 클 수도 있다.
예) 1 + 2 = 3 입력값 1, 입력값 2, 출력값 3
변수 (Variable) 생성방법 p 463
변수 생성을 위한 키워드 - var
문법 ) 변수 선언
var 변수명;
변수사용법
변수에 값을 넣는(저장하는) 것을 '대입'이라고 한다.
연산(operation)
연산자의 정의에 따라 한 개 이상의 피연사자를 계산하여 하나의 결과를 구하는 작업
표현식(expression)
값을 만들어 내는 간단한 코드, 연산식이라고도 함
문장(statement)
표현식이 하나 이상 모인 것
프로그램(program)
문장이 모인 것
연산자(operator) 연산을 위한 명령어 또는 기호
피연산자(operand) 값을 나타내는 것, 연산의 대상
대입연산
정해진 메모리 공간의 값을 새로운 값으로 변경하는 작업
'=' : 대입 연산자
초기화하지 않으면 전에 사용하던 변수의 값이 남아 있을 수 있게 되는데
이런 남아 있는 변수의 값을 가비지(쓰레기)라고 한다.
초기화 - 어떤 특정 시작의 값이 된다. 방을 비운다.(0으로 초기화)
변수명 명명 규칙
1. 알파벳 대 소문자, 숫자, '_', '$'만 사용 가능
2. 대소문자는 구분한다. test와 TEST는 다름
3. 첫 글자로 숫자가 올 수 없다.
4. 정해진 예약어는 사용할 수 없다.
권장규칙
5. 이름에는 의미를 부여한다.(가독성)
6. 여러 단어를 조합할 경우 카멜케이스를 활용한다.
공부방법
모든 표현식에 주석을 달고
표현식을 다 지우고
주석만 보고 표현식 만들어 보기
<html>
<body>
<script>
var firstNum;
var secondNum;
var resultNum;
firstNum = 5;
secondNum = 8;
resultNum = firstNum + secondNum;
document.write(resultNum);
</script>
</body>
</html>
변수 이름 = 식별자
식별자는 중간에 변경할 수 없다.(선언한 대로 사용)
자바스크립트 문법
1. 세미콜론으로 문장을 구분 (문장의 끝에는 세미콜론을 찍는다)
2. 들여쓰기를 사용하여 영역(범위) 구분
3. 공백을 넣어서 가독성을 높인다.
4. 주석 활용을 잘하자.
자바스크립트 목적 p 441
문서에 동적인 효과를 주는 것(css도 해줌)
1. 웹 요소를 제어
2. 웹 애플리케이션 제작
3. 백엔드 프로그래밍 가능
자바스크립트 작성 위치
1. html 태그의 이벤트 속성에 작성 : onclick="자바스크립트 코드"
2. <script> 태그에 작성 - 내가 원하는 위치에 넣어도 된다.
3. js 파일로 작성(관리 수월)
자바스크립트의 입출력 방법
1. 출력
1) document.write("출력내용") - 문서에 직접 출력 <script> 태그 안에서만 가능
2) 경고창을 띄어서 출력 alert("출력내용") - 확인이라는 버튼이 추가되어서 출력된다. 창이 뜨면 문서를 사용할 수 없다.
3) 로그에 출력하는 방식 - 예 log in /log out 적법한 사용자의 입출관리, log 상태기록, 개발자도구 콘솔에서만 볼 수 있다.
<!DOCTYPE html>
<html lang="ko">
<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>
<h1>안녕하세요!</h1>
<script>document.write("<h2 style='color: lime;'>방문자님, 환영합니다.</h2>");</script>
<p>테스트용 페이지 입니다.</p>
<button onclick="alert('눌렀습니다!')">눌러보세요.</button>
<script>
console.log("이 내용은 화면에 보이지 않습니다.");
</script>
</body>
</html>자료형(데이터의 형태, 변수의 크기)
모든 데이터가 동일한 크기가 아니기 때문에 메모리 공간을 합쳐서 사용
컴퓨터의 메모리 접근 방식
데이터가 있는 시작 지점의 정보만으로 데이터를 찾아서 가져오는 방식을 사용
데이터가 묶여 있는 것을 지정해 주어야 한다.
자바스크립트는 입력하는 데이터를 저장할 때 자료형을 파악하고 그에 맞는 크기를 결정하여 처리
자료형 분류
1) 숫자형 : 0~9까지의 숫자를 사용하는 값으로 산술연산의 데이터로 사용 (number)
2) 문자열형 : 문자를 나열한 형태, 숫자형을 제외한 대부분의 값 (string)
3) 논리형 : 참/거짓을 표현하는 명제 값 (true / false)
4) 정해지지 않은 상태 : 변수에 값이 저장되지 않은 상태 (undefined)
자료형을 알게 해주는 키워드 : typeof
예) typeof 100; -> 'number'를 출력
typeof "문자열"; -> 'string'을 출력
변수에 아무 것도 지정해 주지 않을 때와 숫자를 넣어 주었을 때
논리형
데이터의 형변환 (type casting)
작은 규모의 데이터가 큰 규모의 데이터로 자동으로 변환되는 작업
숫자 + "문자" -> "숫자" + "문자" = "숫자 문자"
숫자형일 때를 나타낸 예제와
숫자+"문자"의 결합 시의 예제, 숫자와 "문자"를 더하면 숫자가 문자형으로 변화되어 최종적으로 문자형이 된다.
NoN (Not a Number) : 숫자가 아니어서 산술 연상을 할 수 없음을 나타냄
<!DOCTYPE html>
<html lang="ko">
<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>
console.log(typeof 100);
console.log(typeof "100");
console.log(typeof "안녕하세요!");
var a;
console.log(typeof a);
a = 1;
console.log(typeof a);
a = '01012345678';
console.log(typeof a);
// 숫자와 논리값을 입력할 때에는 ""를 쓰지 않는다.
var b = true;
console.log(typeof b);
var b = false;
console.log(typeof b);
var n1 = 5;
var n2 = 6;
console.log(n1 + n2);
// 숫자형 5가 문자열형으로 변환된다. 형변환
var n1 = 5;
var n2 = "6";
console.log(n1 + n2);
console.log(typeof(n1 + n2));
// 문자 + 문자 결합이라고 표현한다.
var s1 = "hello";
var s2 = "world";
var s3 = s1 + s2;
console.log(s3);
var n1 = 5;
var n2 = "오";
console.log(n1 - n2);
console.log(typeof(n1 - n2));
</script>
</body>
</html>
'공부기록 > JavaScript' 카테고리의 다른 글
| 3월 9일 (1) JavaScript - 신규 표준 문법, 제어문 for문 (0) | 2023.03.09 |
|---|---|
| 3월 8일 (2) JavaScript - 분기 제어문 switch문 (0) | 2023.03.08 |
| 3월 8일 (1) JavaScript - 연산자2, 분기 제어문 if문 (0) | 2023.03.08 |
| 3월 7일 (2) JavaScript - 변수3, 제어문, 연산자 (0) | 2023.03.07 |
| 3월 7일 (1) JavaScript - 변수2 (0) | 2023.03.07 |
