자바스크립트(javascript)는 브라우저가 알아듣는 프로그래밍 언어이다.
<head></head> 안에 <script></script>를 만들어 그 안에 자바스크립트를 작성한다.
브라우저에서 검사를 눌렀을 때 뜨는 console과 동일하다
**자바스크립트 기초문법
자바스크립트 기초문법에는 변수, 자료형(숫자,문자), 함수, 조건문(if, else), 반복문(repeat)등이 있다.
기본적으로 변수가 있고 여러 함수에 대입을 하여 사용할 수 있다.
* let 변수선언
:'~라고 하자!' 라고 변수를 선언하는 코드이다.(변할 수 있는 값) let 다음 a=2라고 했을 때 a를 물어보면 2로 대답을 하는 원리.
변수들은 사칙연산(+,-,*,/,%...), 문자열 더하기가 가능하다.
문자열이 들어갈 때는 '~'또는 "~" 따옴표로 감싸준다.(String형식)
| let a = 2 a >> 2 출력 |
* let 변수선언
:절대로 바뀌지 않는 변수를 선언하는 코드이다. 보통 대문자를 사용하는 것이 좋다.
* console.log(변수)
:콘솔창에 괄호안의 변수값을 출력해 보여준다. 여러 변수, 문자 출력이 가능하다.
* alert()함수
'내용'이라는 alert(경고창)이 뜨는 함수를 <script></script> 안에 넣고
버튼에 onclick="hey()"를 넣어 연결하면 버튼을 누를 때 '내용'이라는 경고창이 뜨게 된다.
| function hey(){ alert(' } |
| <button onclick="hey()"> |
*자료형(문자형)
:변수에 '~', "~", `~` 따옴표, 큰따옴표, 백틱(back-tick)등을 붙여 사용한다.
*자료형(숫자형)
:사칙연산가능, 소수점 표현도 가능하다.
*Boolean(불린)
| const a = True / 참 const b = False / 거짓 |
*null, undefined
let user = null // user는 존재하지 않는다는 뜻
undefined // 변수값이 정해지지 않았을 때 입력하지 않았을 때
*typeof 연산자
변수의 자료형을 알아낼 수 있다. (number, string, boolean, object, undefined)
*prompt()
:정보를 입력 받을 때 사용한다.
| const name = prompt('이름을 입력하세요') alert('환영합니다' + name + "님") |
*리스트 & 딕셔너리 :자료를 담는 방법이 필요할 때 사용한다.
*리스트: [ ]괄호 / 순서가 있는 형태의 자료, 출력시 순서를 입력하면 해당 순서가 출력된다.
| <리스트에 변수선언, 출력: let a=[ ]> let a_list = [ '가', '나', 1, 2 ] a_list[1] >> '나' 출력 a_list[2] >> 1 출력 |
| <리스트에 요소 넣기: .push()> let a_list = [ '가', '나', 1, 2 ] a_list.push( '안녕' ) a_list >> [ '가, '나', 1, 2, '안녕' ] 출력 |
| <리스트 길이 구하기: .length()> let a_list = [ '가', '나', 1, 2 ] a_list.legnth >> 4 출력 |
*딕셔너리: { }괄호 / key:value 값의 묶음
| <딕셔너리 변수선언 let a={ }> let a_dict = [ '가':1, '나':2 ] a_dict['가'] >> 1 출력 a_dict['나'] >> 2 출력 |
| <딕셔너리 key:value 넣기> let a_dict = [ '가':1, '나':2 ] a_dict['다'] = 3 a_dict >> [ '가':1, '나':2, '다':3 ] 출력 |
*리스트 & 딕셔너리 조합
| <리스트&딕셔너리에서 키:밸류찾기> profile = [ { '가' : 1 }, { '나' = 2 } ] profile[0]['가'] >> 1 출력 |
| <리스트&딕셔너리에 새로운 키:밸류 넣기> profile = [ { '가' : 1 }, { '나' = 2 } ] new_profile = {'다':3} profile.push(new_profile) profile >> [{'가':1}, {'나'}:2 {'다':3}] 출력 |
*.split( ) :특정문자로 문자열 나눌 때 사용
| let myemail = 'hello@mail.com' myemail.split('@')[0] >> ['hello'] 출력 |
myemail인 'hello@mail.com'을 '@'로 나눈 뒤 0번째 문자를 출력한다는 의미
*함수 : 정해진 동작을 실행한다.
*function
| function 함수이름(변수1, 변수2 ... ){ 내릴 명령들을 순차적 작성 } |
| 사용예시>> function sum(a, b){ alert(a+b) } sum(1, 2) >> 3 출력 |
*조건문( if, elif, else )
| function bus_card(age) { if(age > 20){ alert('성인입니다.') } elif(age>8){ alert('청소년입니다.') } else { alert('무료입니다.') } } bus_card(23) >> '성인입니다.' alert으로 출력 |
코드해석: bus_card의 age가 20이상이면 '성인입니다.' 8이상이면 청소년입니다. 나머지는 무료입니다.
*반복문(for, let)
| for (let i = 0; i <100; i++){ console.log(i) } |
코드해석: i가 0부터 시작해서 100까지 하나씩 커진다.
| 예시) let a_list = ['사과', '감', '배'] for (let i=0; i < a_list.length; i++){ console.log(a_list[i]) } 결과: ['사과', '감', '배'] |
코드해석: i가 0부터 시작해서 a_list의 길이만큼 하나씩 돌고, a_list에 있는[i]를 출력한다
'💻 개발블로그 > 웹개발' 카테고리의 다른 글
| 2주차(2) 웹개발 강의: JQuery연습예제 (0) | 2021.12.17 |
|---|---|
| 2주차(1) 웹개발 강의: JQuery (0) | 2021.12.17 |
| 1주차(3) 웹개발 강의: 부트스트랩 (0) | 2021.12.16 |
| 1주차(2) 웹개발 강의: 구글웹폰트/주석달기/CSS파일분리 (0) | 2021.12.16 |
| 1주차(1) 웹개발 강의: HTML, CSS (0) | 2021.12.16 |
