JavaScript
- 프로그래밍 언어로, HTML 상에서 동작을 담당하는 언어
- HTML과 연동이 되어 HTML에 생명을 넣어준다고 생각하면 편하다.
사용 예시
- 버튼을 클릭하면 경고 문구 뜨게 하기
<head>
////
<script>
function hey(){
alert('안녕!');
}
</script>
////
</head>
<body>
<button onclick = "hey()" type = "button"> 기사 저장 </button>
</body>위의 ‘기사 저장’ 버튼을 누르면 브라우저가 ‘안녕!’ 이라는 경고 문구를 보여준다.
console
- 버튼을 클릭하여 console창에 문구를 띄우는 기능 만들기
- script 태그 안에 hello{}함수 구현
- 버튼에 hello 함수 연결
<head>
////
<script>
function hey(){
alert('안녕!');
}
function hello(){
console.log('hello!');
}
</script>
////
</head>
<body>
<button onclick = "hello()" type = "button"> 기사 저장 </button>
</body>브라우저에서 f12를 눌러 console tab에 가보면 버튼을 누를 때마다 hello!가 출력이 되는 것을 알 수 있다.
- console에 직접 코드를 작성하고 hey()를 입력하면 같은 결과를 얻는 것을 알 수 있다.
- 하지만 새로고침을 하면 더 이상 실행이 되지 않는 것을 알 수 있다.
이렇게 콘솔창은 개발자들이 코드를 바로 바로 작성하고 테스트 하는 것을 돕는 도구이다. 새로고침을 하면 콘솔창에 작성한 코드가 사라진다.
기초 문법
변수 선언
let num = 10;
let num2 = 20;
num = 13;
console.log(num,num2);//한번에 여러 값 출력 가능‘ ; ’ 를 붙이지 않아도 자동으로 끝에 ;를 붙여주지만 예기치 못한 오류가 발생할 수 있기 때문에 붙여주는 습관을 갖자.
기본 문법 예시들
let a = 5;
let b = 20;
let name = "Ronaldo"; // '," 둘 다 가능
let name2 = 'Ronaldo';
let a = b; //a = 20 저장, 변수 대입 가능
name +.name2; // RonaldoRonaldo 저장 됨
name + a// Ronaldo5 저장 , 이때 5는 문자열로 바뀐다.
--------bool자료형--------
let x = true;
let y = false;
let a = 4 > 2 // true
!a // false NOT 연산자로 참을 거짓으로, 거짓을 참으로 바꿔준다.
let b = 2!=2 // false
a && b // false AND 연산자로 모두 참이어야 참을 반환한다.
a || b // true OR 연산자로 둘 중 하나만 참이면 참이다.딕셔너리, 리스트
- 딕셔너리
-
key 와 value의 쌍으로 이루어진 요소들을 갖고 있다. 딕셔너리의 요소의 값은 키를 이용해서 가져올 수 있고, 각 요소에 순서는 없다.
let aDict = {}; //빈 딕셔너리 선언 let bDict = {'name':'bob','age':21}; // 이와 같이 선언 가능 bDict['name']; // 'bob'출력 bDict['age']; // 21출력 bDict['age'] = 24; bDict['name'] = "Messi"; bDict;//{'name':'Messi','age':24} 출력된다.
-
- 리스트
-
리스트는 숫자, 문자열 등 다른 값들을 여러 개 갖는 자료형
-
리스트의 각 요소에는 순서가 있고, 순서가 있기 때문에 ‘인덱스(index)’를 이용해서 각 값을 받아올 수 있다.
-
또한 리스트는 다른 리스트를 요소로 가질 수 있다.
let aList = [];// 빈 리스트 선언 let bList = [1,2,3,'hey']; bList.push('헤이'); bList // [1,2,3,'hey','헤이'] bList.length // 5를 출력 ------------------------------------- //요소로 다른 리스트를 가지는 리스트 let a_list = [1, 4, 2, [3, 1]] a_list.length // 4 a_list[3] // [3, 1] a_list[3][1] // 1 let b_list = [4, 1, 0] a_list.push(b_list) a_list // [1, 4, 2, [3, 1], [4, 1, 0]] a_list.length // 5 // 리스트와 리스트를 이어붙이고 싶다면 let c_list = a_list.concat(b_list) c_list // [1, 4, 2, [3, 1], [4, 1, 0], 4, 1, 0] a_list // [1, 4, 2, [3, 1], [4, 1, 0]] 변하지 않음
-
딕셔너리들을 요소로 갖는 리스트를 만드는 것 또한 가능하다. 이와 같은 자료형은 데이터베이스에서 비슷한 형태의 자료형을 정리 할 때 유용하다.
names = [{'name':'bob','age':20},{'name':'carry','age':38}]
// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'
new_name = {'name':'john','age':7}
names.push(new_name)
//name = [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'함수
// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들)python과 같이 함수의 반환형의 선언이 필요 없다.
내장 함수
- 모든 알파벳을 대문자로 바꾸기
let name = "sungjoo";
name.toUpperCase(); // SUNGJOO 저장- 특정 문자를 기준으로 문자열을 나누고 싶을 때
let myemail = bbuchu123@gmail.com
let result = myemail.split('@');
//reuslt = ['bbuchu123','gmail.com']이 저장된 리스트
result[0]; // bbuchu123
result[1]; // gmail.com
let result2 = result[1].split('.');
//result2 = [gmail,com] 저장된 리스트
myemail.split('@')[1].split('.')
//python과 같이 연속적으로 사용이 가능하다.- 특정 문자를 다른 문자로 바꾸기
let txt = '서울시 - 마포구 - 망원동';
let names = txt.split('-');
let result = names.join('+');// '서울시+마포구+망원동' 저장
개발로그