[이브와 블렌디드러닝] 웹개발 기초 04

✋ 한이음 블렌디드 러닝으로 제공하는 스파르타 코딩 클럽 웹개발 기초를 듣고 정리한 글입니다.

▶ 강의 링크

📍 자바스크립트란?

프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
모든 브라우저가 기본적으로 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(); //CHOISOOK 
3. 특정 문자로 문자열을 나누고 싶은 경우 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

Author And Source

이 문제에 관하여([이브와 블렌디드러닝] 웹개발 기초 04), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ssook1222/이브와-블렌디드러닝-웹개발-기초-04

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)