목차
1. 자바스크립트
2. 컴퓨터의 간단한 구조
3. 저장단위
4. 예약어
5. 연산자
6. 조건문
자바스크립트가 나타난 배경
최초의 브라우저
넷스케이프 (jsc는 없었음) -> 10일만에 jsc 쨔잔! 만들어냄. 그러니까 저급한 단어란걸 인식하고있자. -> 윈도우 마소가 넷스케이프 카피캣을 해서 익스플로러를 만들어냄 -> 문제는 서로 약간씩 다르게 기능을 하게 만듬 = 코드를 다르게 읽는거지(크로스 브라우징을 하게 만든 원흉)
파이어폭스 등장
플래시(액션 스크립트)를 자바스크립트 대신해서 적용함. -> 익스플로러, 파이어폭스, 다른 브라우저 다 다르게 함 대환장 파티
구글이 만든 크롬(2007) 등장
자바스크립트를 해석해주는 v8 엔진 기능이 매우 좋았고, 넷스케이프의 표준 문법을 지키는 브라우저.-> 익스플로러 점유율 하락, 크롬&파폭 상승 -> 표준 문법을 다같이 지키기로 함.
오늘 배울 것 es6 = 자바스크립트 / 다른 버젼도 괜찮지만 범용성이 가장 좋음.(변동이 가장 많았던 버젼 5&6)
컴퓨터의 간단한 구조
- 컴퓨터는 전압이 있고 없고로 (1, 0) 데이터를 표현하므로 기본적으로 2진법을 사용함. 손가락이 2개라고 표현.
- OS (운영체제) : 0과 1만 아는 기계랑 사람이 소통하게 해준다. 대표적으로 윈도우/리눅스/유닉스/맥북뭐시기. os가 달라서 맥이랑 윈도우가 다른거
- cpu : 연산을 처리해줌
- 메모리 : 단기기억(전원을 끄면 사라짐, 휘발성)
- 하드디스크 : 장기기억(전원을 꺼도 살아있음, 비휘발성) (데이터를 저장할때도 연산을 사용함)
저장 단위 : 2진법이 기본인 컴퓨터가 데이터를 저장하는 방법
1비트
- 데이터를 2가지로 표현하는 컴퓨터의 기본적인 단위 : 1이나 0, true나 false.
- 예) 3비트 : (1/0), (1/0), (1/0)
- 헤르츠 : 2진수를 처리하는 속도 (cpu가 높을수록 높음)
1바이트
- 1바이트 : 8개의 2진수, 8비트, 데이트 2의 8승(2^8 ) = 256, 알파벳, 특수문자, 숫자까지 모두 표현가능. 한글은 안되여.
- 2바이트 : 한글 표현 가능. 바이트 차이로 한글과 영어를 쓰면 영어가 좀 더 앞에 있는걸 느낄 수 있다. a와 ㄱ의 차이
- 16진수 : 2진수를 계산하기 쉽게 나왔다고 생각해보자 0~9, a~f
니블
- 4개씩 묶는 단위 : 1001/0000/1111/1100
- 1니블 = 4비트 = 16가지 내용을 담을 수 있음 = 16진수
- 2니블 = 8비트 = 1바이트 -> 2자리로 표현이 가능.
- 진수 : 1자리의 자릿수로 나타낼 수 있는 데이터의 가짓수
16진수는 어떻게 쓸 수 있을까
- 코인 지갑주소를 예로 들어보자 1A1... -> 1: 0001 / A : 0110/ 1 : 0001 / ... 이런 식 -> 왜? 겹치지 않으려고.
- 어떤 데이터가 들어올지 생각을 하면서 프로그램을 짜야하는 이유 0> 예) 싸이 뮤비 조회수 때문에 업데이트한 유툽
- 하지만! jsc는 범위를 지정하지 않는다. 저급한 언어라서.. 그래서 배우기 쉬움
- 아스키코드 : 영어를 표현할 수 있도록 0과 1로 표현해 놓은 코드
- 유니코드 : 영어 외 언어들을 포함한 버전, 아이콘, 임티콘 포함, 최대 4바이트도 존재함
모듈(api)
브라우저에서나 Nodejs에서만 사용하는 자바스크립트가 존재함. 표준 문법(ES6)을 지키지만 각각에서 사용하는 곳에 따라 기능을 추가해줄 수 있는건만 알아두자. 예) 이건 브라우저에서만 가능합미다!
Nodejs
내컴퓨터를 조작하는데(IO : Input & Output) 사용하는 언어
원래 브라우저 조작만 가능했는데 프로그램도 짤 수 있게 조작이 되니까! Nodejs가 나오고서부터 자바스크립트가 인기가 높아짐.
자바스크립트(ES6)를 위한 언어 시작
<head>
<script type="text/javascript">
// 이 곳에 작성
</script>
</head>
변수와 예약어
1. 내 마음대로 작성해도 되는 부분 = 변수 (variable)
2. 정해진 대로 작성해야 하는 부분 = 예약어
이거 구분을 잘 해놔야함! 그래야 자유롭게 쓸 수 있음.
예약어
변수선언 let, const
let ingoo;- ES6이 생기면서 생김. 변수를 선언하는 예약어
- 예약어 변수; 띄어쓰기까지가 예약어다.
- 시작을 숫자로 할 수 없다.
- 한정된 특수문자 사용가능.
- 변수 선언 형태 : let 변수명 = 변수값 (데이터 타입)
대입연산자 & 출력문 console.log()
let ingoo;
ingoo = 427;
console.log(ingoo); //출력문. 괄호 안에 출력하고 싶은 것 넣기- cosole.log(); //브라우저에서 보고 싶어! 하고 브라우저가 만든거
- 개발자도구 > console 에 들어가면 실행결과를 알 수 있다. 아무것도 없이 콘솔에서 한줄씩 코딩도 가능함.
데이터 타입 : 변수 하나에 데이터 하나 (개별형)
// 숫자형
let number;
number=19;
console.log(number);
// boolean형
let bool;
bool=true;
console.log(bool);
bool=flase;
console.log(bool);
//문자열
let str;
str='안녕하세요'
console.log(str);
str="안녕!"
console.log(str);
str=`안녕하세요!!!!`
console.log(str);- 숫자형태(number) : 그냥 숫자 적기
- 불리언(boolean) : 참과 거짓만 저장가능. 각가의 값 : true=1, false=0
- 문자형(string) : ''(싱글쿼터), ""(더블쿼터), ``(백틱)
데이터 타입 : 변수 하나에 여러개의 데이터 (군집형)
//배열
let arr;
arr=[1,2,3]
console.log(arr);
arr=['짱구', '미미', '짱아'];
console.log(arr);
//객체
let obj;
obj{
name:"짱구",
age:"10"
height:"130"
}
console.log(obj.naem);
// . -> obj라는 변수 아네 name이라는 key를 선택해달라- 배열 (array) : index 개념
- 객체 (object) : key:value 개념
연산자
산술연산자
+ = / % ++...
연결연산자
console.log(1+2);
console.log('안녕'+'하세요');
console.log('안녕'+1);- 앞에 있는 데이터 타입에 따라서 연산자 역할이 달라진다
- 값 +값
- 데이터 타입이 서로 다르면 연산이 안 되고 오류가 나지만, 자바스크립튼 상관없이 연산해준다
비교연산자
console.log(1==1);
console.log(1>6);
console.log(2<=2);- 비교연산자 결과물이 boolean 타입으로 반환.
- 수학적인 연산으로 1=1은 1과 1은 서로 같다. 하지만 프로그래밍 관점에서 보면 좌측 1에 우측 1이란 값을 저장한다-란 뜻이 된다. 만약 1과 1일 같다는 뜻을 말하고 싶으면 1==1을 해야한다.
- ==, >, <, >=, <=
논리연산자
console.log(1<2 && 3<5);- && (AND) -> 값(boolean) && 값(boolean)
- ||(OR) -> 값 || 값
- !(NOT) -> !값
if문
let num1=1;
let num2=2;
if(num1<num2){
//참일때 실행하는 코드영역
console.log('안녕하세요');
} else {
//거짓일때 실행하는 코드영역
console.log('내일봐요!');
}- 내가 만든 데이터가 true일 경우에 처리하는 방식과 내가 만든 데이터가 false일 경우 처리하는 방식을 다르게 하고 싶은 경우
- 전제지식 : boolean, 비교연산자, 논리연산자
- if (표현식, booelan) { }
for문
for (let i=0; i<10; i++){
console.log(i);
}어떻게 돌아가는 구조인지 보면 쉬울듯
let i = 0; i < 10; i++ : 순서대로 1 / 2 / 3 이라고 넘버링.
- 1번을 먼저 수행하고 출력.
- 다시 for문 조건식으로 들어와 2번과 비교한다.
- true일 경우 3번을 실행해 1을 추가한다.
- 최종적으로 i=1이 되고 다시 출력한다.
- i가 2번 조건에서 false가 나올때까지 반복실행된다.
'프로그래밍 > javacscript' 카테고리의 다른 글
| [220103] 자바스크립트 / let, const, ver, else if, 함수 심화,함수 연습문제 (0) | 2022.01.03 |
|---|---|
| [220102] 홈 만들기 (0) | 2022.01.03 |
| [220101] clone_아임웹 게시판 / table, border-seperate, :not(), text-transform (0) | 2022.01.01 |
| [211231] 함수의 정의와 호출, return 사용하기 (0) | 2021.12.31 |
| [211230] clone_네이버 회원가입폼 / absolute, relative (0) | 2021.12.30 |
댓글