✋ 한이음 블렌디드 러닝으로 제공하는 스파르타 코딩 클럽 웹개발 기초를 듣고 정리한 글입니다.
📍 자바스크립트란?
- 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
- 모든 브라우저가 기본적으로 javascript를 알아들을 수 있게 설계되어 있고, 모든 웹서버는 HTML+CSS+Javascript를 주게 되어 있으므로 알아두어야 한다.
📍 자바스크립트와 html 문서 연동
css를 html의 style 태그에 넣어두었다면, 자바스크립트는 script 태그 안에 넣어 연동한다.
1. 다른 파일 연결하여 사용
<head>
<script src="자바스크립트 파일경로"></script>
</head>2. html 코드 안에 넣어 사용
<head>
<script>
console.log("hello,world!"); /*브라우저의 콘솔로 출력*/
alert("hello,world!"); /*대화상자로 출력*/
</script>
</head>📍 버튼 누르면 경고창 뜨게 하는 기초 예시
1. 아래와 같은 함수를 작성한 후 script 태그에 넣는다.
<head> <script> function hi(){ alert('hi'); } </script> </head>
2. 이전 예제나 만들어 둔 버튼 태그에 아래와 같은 코드를 적어 버튼과 함수를 연결한다.
<a onclick="hi()" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
📍 Javascript 기초문법 배우기 (1)
✅ 변수
변수(값을 담는 하나의 박스) 선언
let을 이용해 변수를 선언한다.let a = 2; a = a + 3; console.log(a);이때 숫자 외에도 문자열(작은/큰 따옴표로 감쌈), boolean 등 다양한 형태의 자료형을 변수로 지정할 수 있다.
변수끼리의 연산
사칙연산 및 문자열 더하기가 기본적으로 가능let a = 1; let b = 2; a + b; // 3 출력 a / b; // 0.5 출력 let first = 'hello'; let last = 'JS'; first+last; // 'helloJS' 출력 first+' '+last; // 'Bob Lee' 출력 first+a; // 'hello1' 출력문자와 숫자 데이터를 합하면, 숫자를 문자로 바꾼 후 합치는 연산을 수행한다.
✅ 리스트, 그리고 딕셔너리
❗️ 리스트
순서를 지켜서 가지고 있는 형태let a_list = []; //리스트를 선언 a_list=[1,2,'hey',3]; //선언한 리스트에 값을 할당 //혹은 let b_list = [1,2,'hey',3]; //리스트를 선언하면서 값을 할당 b_list[1]; //리스트의 첫번째 위치인 2를 출력(리스트는 0번부터 존재) b_list[2]; // 'hey'를 출력 //리스트에 요소 넣기, 동적으로 추가됨. b_list.push('헤이'); //cf.리스트에 요소 빼기 b_list.pop('hey'); b_list; //[1,2,"hey",3,"헤이"]를 출력 b_list.length; // 5를 출력
❗️ 딕셔너리
키(key)-밸류(value) 값의 묶음let a_dict = {}; //딕셔너리 선언 a_dict = {'name':'SSook', 'age':23}; //선언한 딕셔너리에 값을 할당 // 또는, let b_dict = {'name': 'SSook', 'age':23}; //딕셔너리를 선언하며 값을 할당 b_dict['name']; // 'SSook'을 출력 b_dict['age']; // 23을 출력 b_dict['bloodType'] = 'B'; //딕셔너리에 키:밸류 넣기 //딕셔너리에 리스트 넣기 a_dict['exList']=b_list; //a_dict의 exList키에는 b_list의 값인 {1,2,3,'헤이'}가 들어가 있다. a_dict['exList'][0]; //1 출력 b_dict; //변경 후 b_dict 값 출력
❗️ 리스트와 딕셔너리의 조합
순서를 표시하고,정보를 묶기 위해 리스트와 딕셔너리를 조합해 사용names = [{'name':'ssook', 'age:23'},{'name':'jimin', 'age:27'}]; //리스트 안에 딕셔너리가 있는 형태 new_name = {'name':'RM', 'age:28'}; names.push(new_name);
✅ 사칙연산 외의 기본 연산/함수들
1. 나눗셈의 나머지를 구하려는 경우
let a = 18; let b = 4; a % b = 2;- 트래픽을 균등하게 나눌 때 사용
- 짝수나 홀수를 구분할 때 사용
2. 모든 알파벳을 대문자로 바꾸고 싶은 경우let myname = 'choisook'; myname.toupperCase(); //CHOISOOK3. 특정 문자로 문자열을 나누고 싶은 경우 1
let myname = 'choi_sook'; let result = myname.split('_'); console.log(result[0]); //choi console.log(result[1]); //sook //한 번에 붙여쓰는 것도 가능 let yourname = 'park.ji_min'; let yourresult = yourname.split('.').split('_');4. 특정 문자로 문자열을 나누고 싶은 경우 2
let addr = '서울시-양천구-신정동'; let names = addr.split('-');5. 특정 문자로 합치고 싶은 경우
let result = addr.join('>'); console.log(result); //서울시_양천구_신정동 출력
추가
비교 연산자let a=100; a < 200; // true a > 300 ; // false
개발자에서, IT Business 담당자로. BrSE 업무를 수행하고 있습니다.