[AIVLE_AI] 웹 프로그래밍 1일차
Hello, SOOON_ZERO! [AIVLE_AI] 웹 프로그래밍 1일차 본문
sooonzero.tistory.com
Javascript
사용목적
CPU, RAM, SSD(HDD) 자원을 활용
용어
| 변수선언 | RAM 사용하는 문법: RAM 저장공간을 만들어 데이터 저장 |
| 데이터타입 | RAM 효율적으로 사용하는 문법 |
| 연산자 | CPU 사용하는 문법: 산술, 비교, 논리, 할당, 삼항 |
| 조건문 | 조건에 따라 다른 코드 실행 |
| 반복문 | 특정 코드를 반복적으로 실행 |
| 함수 | 중복 코드를 묶어서 실행 > 코드 유지보수 향상 |
| 객체 | 식별자 1개로 여러개의 데이터 저장(컬렉션): 변수, 함수를 묶어서 코드 작성(클래스) 문법 |
개요
웹브라우저에서 동작되는 동적으로 웹페이지를 바꾸고 이벤트를 처리하는 언어
인터프리터, 동적타이핑, 객체지향
| 컴파일러 언어 | 속도 빠름, 코드 실행전에 빌드(컴파일)과정 필요, 문법 어려움 |
| 인터프리터 언어 | 속도 느림, 코드 실행전에 빌드과정 불필요, 문법 쉬움 |
ECMAScript: ECMA5, ECMA6, ECMA8 버전이 있음
http://www.ecma-international.org/publications/standards/Ecma-262.htm
ECMA-262 - Ecma International
ECMAScript® 2022 language specification, 13th edition - ECMAScript is a programming language based on several technologies like JavaScript.
www.ecma-international.org
1. 변수선언: Variable
| 식별자 | 메모리 저장공간을 구분하는 문자열 | |
| 식별자 규칙: 문법 |
대소문자, 숫자, _ , $ 사용가능 숫자 가장 앞에 사용 X 예약어 사용 X |
|
| 식별자 규칙: 컨벤션 (컨벤션은 어겨도 코드는 실행된다.) |
상수 | UPPER_SNAKE_CASE |
| 변수 | camelCase | |
| 함수 | camelCase | |
| 모듈 | PascalCase, UpperCamelCase | |
// 식별자 1개, 데이터 1개
var data1 = 10;
// 식별자 n개, 데이터 n개
var data2 = 20, data3 = 30;
var data2 = 20,
data3 = 30;
// 식별자 n개, 데이터 1개
var data4 = data5 = 40;
// console.log() : 식별자(변수)에 저장된 데이터 출력
console.log(data1, data2, data3, data4);10 20 30 40
2. 데이터 타입: Datatype
| number | 숫자 데이터 타입(정수, 실수) |
| string | 문자열 데이터 타입 |
| boolean | 논리값 데이터 타입 |
| function | 코드 저장하는 함수 데이터 타입 |
| object | 객체를 저장하는 데이터 타입 |
var data1 = 1.2;
var data2 = 'js';
var data3 = true;
var data4 = function(){ console.log('func'); };
var data5 = {key: 'value', func: function(){ console.log(123); }};
// typeof : 데이터타입 출력
// 동적타이핑 : 데이터 타입을 설정하지 않아도 자동으로 데이터를 확인해서 데이터 타입 설정
console.log(typeof data1, typeof data2, typeof data3, typeof data4, typeof data5);number string boolean function object
없는 데이터의 표현
| undefined | 선언은 되었으나 값이 할당되지 않음 |
| null | 선언이 되어 값이 없음이 할당됨 |
| NaN | Number 데이터 타입에서의 undefined, null |
var data = undefined;
console.log(typeof data, data);undefined undefined
var data = null;
console.log(typeof data, data);object null
var data = NaN;
console.log(typeof data, data);number NaN
// NaN 데이터 타입은 비교연산하면 항상 NaN 출력
console.log(NaN == NaN, NaN > NaN);false false
데이터 타입의 형변환
| Number() | 숫자 데이터 타입으로 변환 |
| String() | 문자열 데이터 타입으로 변환 |
| Boolean() | 논리값 데이터 타입으로 변환 |
var data1 = '1', data2 = 2;
console.log(typeof data1, data1);
console.log(typeof data2, data2);string 1
number 2
console.log(data1 + data2, Number(data1) + data2);12 3
묵시적 형변환
여러 데이터 타입을 혼합해서 연산하면 묵시적 형변환이 발생함(파이썬은 에러발생)
// 문자 > 숫자 : Number()
typeof (data1 - 0)'number'
// 숫자 > 문자 : String()
typeof ('' + data2)'string'
3. 연산자: operator
| 산술 | 데이터 + 데이터 = 데이터 | +, -, *, /, %, **, ++, -- |
| 비교 | 데이터 + 데이터 = 논리값 | ==, ===(데이터 타입까지 비교), !=, !==, <, >, <=, >= : 조건 1개 |
| 논리 | 논리값 + 논리값 = 논리값 | !, &&, || : 조건 2개 이상 |
| 할당 | 변수 산술= 데이터 | 변수에 누적해서 연산 수행 |
| 삼항 | (조건) ? (참) : (거짓) | 간단한 조건문 구현 |
산술연산자
var data1 = 11, data2 = 4;
console.log(data1 / data2, data1 % data2, data2 ** 3);2.75 3 64
++data : +1 후에 데이터 대입
var data1 = 1, data2 = 2;
data1 = ++data2;
console.log(data1, data2);3 3
data++ : 데이터 대입 후에 +1
var data1 = 1, data2 = 2;
data1 = data2++;
console.log(data1, data2);2 3
비교연산자
데이터 타입까지 비교: ===, !==
데이터만 비교: ==, !=
var data1 = 1, data2 = '1';
console.log(data1 == data2, data1 === data2);true false
논리연산자
console.log(true && false, true || false)false true
Quiz
조건 1개 : 예금 잔고에서 인출이 가능하면 true, 불가능 하면 false 출력
var balance = 10000, withdraw = 7000;
console.log(balance >= withdraw);true
조건 2개 : 1회 최대 출금금액은 5000원으로 제한
console.log((balance >= withdraw) && (withdraw <= 5000));true false
false
삼항연산자 : 조건 ? 참 : 거짓
var balance = 10000, withdraw = 12000;
var msg = balance >= withdraw ? '인출가능' : '인출불가';
console.log(msg);인출불가
할당연산자
var data1 = 10;
// data1 = data1 + 20;
data1 += 20;
console.log(data1);30
4. 조건문: condition
if, else if, else
switch, case, default
학점출력 예제
var point = 87;
if(point >= 90){
console.log('A');
} else if(point >= 80){
console.log('B');
} else if(point >= 70){
console.log('C');
} else if(point >= 60){
console.log('D');
} else{
console.log('F');
}B
승점출력 예제
var point = '승';
switch(point){
case '승':
console.log('승점', 3);
break;
case '무':
console.log('승점', 1);
break;
default:
console.log('승점', 0);
}승점 3
5. 반복문: loop
while, for, break, continue
반복문 사용하지 않은 코드
console.log('python');
console.log('python');
console.log('python');python
python
python
while 반복문을 사용한 코드
var count = 3;
while (count){ // 조건을 확인하는 부분에서 true, false 가 아니면 Boolean()으로 형변환해서 판단
count -= 1;
console.log('python');python
python
python
참과 거짓을 나타내는 함수 Boolean 동작 확
console.log(Boolean(0), Boolean(1))false true
r count = 5;
for(var i = 0; i < count; i++){
if(i === 2){
continue;
}
console.log(i, 'js');
if(i >= 3){
break;
}
};0 js
1 js
3 js
실수하기 쉬운 코드 : 부동소수점 문제
var data1 = 0.1, data2 = 0.2;
data1 + data2 === 0.3false
->왜냐하면 data1 + data2 = 0.30000000000000004 로 나오기 때문
해결법 : 반올림 : Math.round()
Math.round(1.2345 * 1000) / 1000;1.235
(Math.round( (data1 + data2) * 10 ) / 10) === 0.3true
Quiz
중복번호를 허용한 로또번호 출력
var count = 6, lotto = '';
for(var i = 0; i < count; i++){
var randomNumber = Math.ceil(Math.random() * 44) + 1;
lotto += randomNumber;
if(i != count - 1) lotto += ' ';
}
console.log(lotto);39 23 9 36 43 38
6. 함수: function
| 중복코드를 묶어서 코드 작성 및 실행 | 코드 유지보수가 좋아짐 |
| 사용법 | 함수선언(코드작성) > 함수호출(코드실행) |
| function, argument, parameter, 표현식, 선언식, hoisting, scope, 익명함수, return | |
Quiz
함수를 활용한 로또번호 생성기
방법1: 함수 없이 작성한 코드
// 로또번호출력
var count = 6, lotto = '';
for(var i = 0; i < count; i++){
var randomNumber = Math.ceil(Math.random() * 45);
lotto += randomNumber;
if(i != count - 1) lotto += ' ';
}
console.log(lotto);
// js문자열출력
console.log('js');
// 로또번호출력
var count = 6, lotto = '';
for(var i = 0; i < count; i++){
var randomNumber = Math.ceil(Math.random() * 45);
lotto += randomNumber;
if(i != count - 1) lotto += ' ';
}
console.log(lotto);41 12 39 26 25 18
js
6 11 35 38 38 32
방법2: 함수를 활용한 코드
function showLotto(){
var count = 6, lotto = '';
for(var i = 0; i < count; i++){
var randomNumber = Math.ceil(Math.random() * 45);
lotto += randomNumber;
if(i != count - 1) lotto += ' ';
}
console.log(lotto);
};
showLotto();
console.log('js');
showLotto();8 5 37 4 43 12
js
2 43 2 34 45 21
방법3: argument, parameter : 함수를 호출하는 코드에서 함수를 선언하는 코드로 데이터 전달
function showLotto(endNumber){ // endNumber : parameter
var count = 6, lotto = '';
for(var i = 0; i < count; i++){
var randomNumber = Math.ceil(Math.random() * endNumber);
lotto += randomNumber;
if(i != count - 1) lotto += ' ';
}
console.log(lotto);
};
// 로또번호 1~45까지 출력
showLotto(45); // 45 : argument
// 로또번호 1~50까지 출력
showLotto(50);18 39 9 1 25 22
29 30 7 10 25 33
함수 선언식과 표현식
// 함수선언 1 : 함수선언식
function plus1(n1, n2){
console.log(n1 + n2);
}
plus1(1, 2);3
// 함수선언 2 : 함수표현식
var plus2 = function(n1, n2){
console.log(n1 + n2);
}
plus2(1, 2);3
// 선언식과 표현식의 차이
// 선언식 함수 선언하는 코드가 최상단으로 올라서 우선적으로 선언후 다른 코드 실행
// hoisting : 선언식으로 작성된 코드를 우선적으로 메모리에 할당
plus3(1, 2);
function plus3(n1, n2){
console.log(n1 + n2);
}3
hoisting : 호이스팅
선언식으로 변수(함수)가 선언되면 코드의 최상단으로 올라가서 선언됨
// 선언식은 함수 호출 후에 함수가 선언되어도 함수 호출 가능
plus4(1, 2);
function plus4(n1, n2){
console.log(n1 + n2)
};3
scope : 스코프
전역변수(함수밖) : global
지역변수(함수안) : local
지역영역에서 전역영역 변수 사용: var 사용 X
전역영역에서 지역영역 변수 사용: return 사용
var data = 10;
function change(){
data = 20; // var 사용하지 않으면 전역변수로 사용
}
change();
console.log(data);20
var data = 10;
function change(){
var data = 20; // var 사용하면 지역변수로 선언
}
change();
console.log(data);10
지역영역의 변수를 전역영역으로 가져와서 사용 : return
var data = 10;
function change(){
var data = 20;
return data;
}
data = change();
console.log(data);
console.log(data);
var data = 'js';
console.log(data);
var data = 'python';
console.log(data);undefined
js
python
anonymous function : 익명함수
선언과 동시에 호출
전역함수로 사용할수 없도록 선언 > 외부에서 내부의 함수나 변수 사용 불가 > 보안이 좋아짐
// 내부
var join1 = function(id, pw){
console.log(id, pw);
}// 외부 : 브라우져의 개발자 도구 사용
join1('andy', '1234');andy 1234
// 내부
(function join2(id, pw){
console.log(id, pw);
}('andy','1234'));//외부: 브라우져의 개발자 도구 사용
join2('andy', '1234');error
return
함수에서 실행된 결과를 변수에 저장 하거나 출력
함수에서 코드 실행 중단
var plus = function(n1, n2){
console.log(n1+n2);
}
result = plus(1, 2);
console.log('result', result);result 3
var echo = function(){
consol.log(1);
return
console.log(2);
}
echo();1
default parameter(없는데 구현가능하다)
var plut = function(n1, n2);
n2 = n2 || 10; //n2에 데이터가 없으면 10 저장
reutrn n1 + n2;
}console.log(plus(10, 20));10 20
30
console.log(plus(10))10 undefined
20
Module Pattern(모듈패턴) : 모듈패턴 모듈패턴을 이용한 객체생성
// Account 객체가 있으면 있는 객체 사용하고, 없으면 새로운 객체 생성
var Account = Account || {};
(function(_Account){
var balance = 0;
function getBalance(){
return balance;
}
_Account.getBalance = function(){
console.log('getter');
return getBalance();
}
_Account.setBalance = function(money){
console.log('setter', money);
balance = money;
}
_Account.deposit = function(money){
balance += money;
}
_Account.withdraw = function(money){
balance -= money;
}
})(Account);// getter
console.log(Account.getBalance());getter
0
// setter
Account.setBalance(10000);// getter
console.log(Account.getBalance());getter
10000
Account.withdraw(2000);// getter
console.log(Account.getBalance());getter
8000
7. 객체 : Object
컬렉션 데이터 타입(Array(배열)), Class(클래스) 문법
컬렉션 데이터 타입으로 사용
식별자 1개, 데이터 n개
var data = [1, 2, 3, 'A', 'B'];
console.log(typeof data, data);object [ 1, 2, 3, 'A', 'B' ]
var data = {one: 1, 2: 'two'};
console.log(typeof data, data);object { '2': 'two', one: 1 }
클래스 문법의 객체
변수, 함수를 묶어서 코드 작성 실행, 객체지향 구현
var obj = {
data: 'js',
plus: function(n1, n2){
return n1 + n2;
},
}obj.data;'js'
obj.plus(1, 2);3
function Person(name){
this.name = name;
}
var person = new Person('andy');
console.log(person);Person { name: 'andy' }
var data = {};
data.name = 'andy';
data['addr'] = 'seoul';
console.log(data);{ name: 'andy', addr: 'seoul' }
Object : 객체
// 객체 생성 1
var obj = { name: 'andy' };
console.log(obj);{ name: 'andy' }
// 객체 생성 2
function Person(name) {
this.name = name;
}
var person = new Person('andy');
console.log(person);Person { name: 'andy' }
console.log(typeof obj, typeof person);object object
// 객체의 변수 추가 및 수정
var obj = {};
obj.name = 'andy';
obj['addr'] = 'seoul';
console.log(obj);{ name: 'andy', addr: 'seoul' }
// 데이터 읽어오기
console.log(obj['name'], obj.addr);andy seoul
// 객체에 함수 저장
var calc = {
plus: function(n1, n2){
return n1 + n2;
}
}
console.log(calc.plus(1, 2));3
// 객체의 변수(함수) 삭제
var obj = {
name: 'andy',
addr: 'seoul'
};
console.log(obj);
delete obj.addr;
console.log(obj);{ name: 'andy', addr: 'seoul' }
{ name: 'andy' }
json object
웹서비스에서 데이터를 주고받을 때 주로 사용하는 데이터 포맷
객체 > 문자열
var obj = { name: 'andy', addr: 'seoul' };
var json = JSON.stringify(obj);
console.log(typeof obj, obj);
console.log(typeof json, json);object { name: 'andy', addr: 'seoul' }
string {"name":"andy","addr":"seoul"}
문자열 > 객체
var jsonObj = JSON.parse(json);
console.log(typeof jsonObj, jsonObj);object { name: 'andy', addr: 'seoul' }
웹브라우저 객체
| window | 전역객체 : 모든 전역변수를 저장하는 객체 |
| location | url 데이터를 포함하는 객체 |
| document | 페이지 문서에 대한 정보를 저장하는 객체 |
window
location
document
javascript를 이용한 element 선택
| 아이디 | document.getElementById() |
| 클래스 | document.getElementByClassName() |
| 속성값 | document.getElementByName() |
| 태그 | document.getElementsByTagName() |
| 셀렉터 | document.querySelector() |
%%html
<button class="test-btn">Click</button>
<script>
var obj = document.querySelector(".test-btn");
obj.addEventListener("click", function(){
alert("TEST");
});
</script>
%%html
<input class="class-txt" type="text" value="mail_2">
<script>
var obj = document.getElementsByClassName("class-txt");
console.log(obj[0].value);
</script>
%%html
<input type="text" name="email" value="mail_3">
<script>
var obj = document.getElementsByName("email");
console.log(obj[0].value);
</script>
%%html
<input type="text" name="email" value="mail_4">
<script>
var obj = document.getElementsByTagName("input");
console.log(obj[3].value);
</script>
jQuery
javascript에서 어렵게 사용하는 웹브라우져 객체들을 쉽게 사용할수 있게 만들어주는 자바스크립트 라이브러리
https://jquery.com/ (https://jquery.com/)
장점:
이벤트 핸들링이 편하다: 클릭, 포커스, 숨기기
Dom(document) 변경이 편하다.
Ajax 통신이 편하다.
javascript event
%%html
<button class='kt-btn'>click</button>
<script>
var obj = document.querySelector('.kt-btn');
obj.addEventListener('click', function(){
alert('KT');
})
</script>
jquery event
%%html
<button class="test2-btn">Click</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$('.test2-btn').on("click", function(){
alert("jQuery TEST");
});
</script>
change document
%%html
<p class="data">Data</p>
<button class="test3-btn">Click</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$('.test3-btn').on("click", function(){
$('.data').text("Science");
});
</script>
%%html
<p class='kt-txt'>KT</p>
<button class='kt-btn1'>hide</button>
<button class='kt-btn2'>show</button>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js'></script>
<script>
$('.kt-btn1').on('click', function(){
$('.kt-txt').hide(1000);
})
$('.kt-btn2').on('click', function(){
$('.kt-txt').show(1000);
})
</script>
Ajax(비동기) 통신으로 데이터 가져오기
- 직방 사이트의 API로 활용하여 데이터 가져오기
%%html
<input type="text" class="addr" value="논현동">
<button class="get-data">Info</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.get-data').on("click", function(){
var addr = $('.addr').val();
var url = 'https://apis.zigbang.com/v2/search?leaseYn=N&q=' + addr + '&serviceType=원룸';
$.getJSON(url, function(result){
console.log(result.items[0]);
})
});
</script>
ngrok
개인 로컬 호스트를 터널링을 통해 외부 인터넷 환경으로 연결해주는 툴
| Mac | $ brew install ngrok $ ngrok http 8000 * 5000 port는 OS에서 사용중이라 localhost와 연결되지 않아 에러가 발생함 $ ngrok http 'file:///Users/rada/Desktop/kt/code/code' * 디렉토리를 공유할수 있음 |
| Windows | https://ngrok.com/download 압축 해제 후 ngrok.exe 파일이 있는 디렉토리로 이동 Anaconda Prompt에서 실행 $ ngrok config add-authtoken xxxxxxx $ ngrok.exe http 8000 $ ngrok http 'file:///Users/rada/Desktop/kt/code/code' $ ngrok http 'file:///C:\Users\User\Desktop\code' |
'KT AIVLE School 3기 > AIVLER 활동' 카테고리의 다른 글
| [AIVLE_AI] WEB/WAS/DB 2일차 (0) | 2023.05.08 |
|---|---|
| [AIVLE_AI] WEB/WAS/DB 1일차 (0) | 2023.05.08 |
| [AIVLE_AI] 웹 프로그래밍 1일차 (0) | 2023.05.08 |
| [AIVLE_AI] AICE ASSOCIATE 시험 후기 (0) | 2023.05.05 |
| [AIVLE_AI] 가상화 클라우드 3일차 (0) | 2023.05.05 |