Javascript 기초

go_getter 2025. 1. 22. 19:57

Javascript 범용성

자바스크립트는 프론트엔드, 백엔드 둘 다 개발할 수 있는 프로그래밍 언어이다.

IOS, 안드로이드 앱, 게임 개발 엔진이나 IoT 애플리케이션 개발도 가능하다.

기초 문법

출력

<script>
	function hey() {
    	console.log('hello world')
    }
</script>


<body>
	<button onclick="hey()">인사하기</button>
</body>

인사하기 버튼을 클릭하면 개발자 도구 콘솔창에 hello world가 출력된다.

변수 선언

let a = 24 // 변수 선언 let
a = 'Bob'


let a = 2
let b = 3
console.log(a+b) // 5


let c = '대한'
let d = '민국'
console.log(c+d) // 대한민국

리스트

let a = ['사과','수박','딸기','감']
console.log(a[1]) // 수박

console.log(a.length) //4

대괄호 사용

딕셔너리 : 키(Key)-밸류(Value) 값의 묶음

let a = {'name':'영수','age':27}

console.log(a) // 전체 출력
console.log(a['name']) // 영수



//리스트, 딕셔너리 조합
let a = [
	{'name':'영수','age':27},
	{'name':'철수','age':15},
	{'name':'영희','age':20}
]
console.log(a[0]['name']) //영수
console.log(a[1]['age']) //15

중괄호 사용

함수

let myemail = 'sparta@gmail.com'

let result = myemail.split('@') // ['sparta','gmail.com']

result[0] // sparta
result[1] // gmail.com

myemail.split('@')[1].split('.')[0] // gmail

반복문

let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {  //반복해서 값을 하나씩 가져옴
	console.log(a)
})

자바스크립트 활용 문법(DOM)

// Alert 띄우기
function hey(){
	alert('안녕!');
}

<button class="form-button" type="button" onclick="hey()">인사 받기</button>

// HTML 조작
function hey(){
	alert('안녕!');
	document.getElementById('hello').style.color = 'red'; // getElementById id로 요소 가져오기
}

JQuery

- HTML 요소들을 조작하는 Javascript를 미리 쉽게 작성해둔 라이브러리

- 사용하려면 임포트 필요함

// 임포트 예시
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

// 기존 Javascript 코드
document.getElementById('hello').innerHTML = '안녕';

// JQuery 예시
$('#hello').html('안녕');

// 백틱 사용 예제 1
let temp_html = `<p>사과</p>`

$('#q1').append(temp_html) // temp_html 변수의 값을 #q1에 붙이기
$('#q1').empty() // #q1에 해당하는 내용을 지우기


// 백틱 사용 예제 2
function checkResult() {
	let fruits = ['사과','배','감','귤','수박']
	fruits.forEach((a)=>{
		let temp_html = `<p>${a}</p>`
		$('#q1').append(temp_html)
	})
}

백틱(``)은 html 태그를 넣을 때 사용

${ }은 자료가 있는 변수를 넣어서 태그 안에 들어갈 값을 표시할 때 사용

$('#아이디')은 통째로 html 요소를 넣을 때 사용