[JS]Javascript & JQuery

javascript

[JS]Javascript & JQuery

개발 공주 2023. 5. 18. 21:28

728x90

Javascript 는 웹을 움직이게 하는 코드!
jQuery는 html 뼈대를 선택해서 쉽게 조작할 수 있다!

Javascript 맛보기

1) 자바스크립트란?

프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다.

2) 자바스크립트 기초

경고창 뜨게 하기

함수를 만들어두기

function hey(){
	alert('안녕!');
}

👉 팁 <head> ~ </head> 안에 <script> ~ </script>로 공간을 만들어 작성합니다.

script 태그 안에 자바스크립트를 작성하는 것이죠 아래 코드를 통해 간단한 사용방법을 알아봅니다.

버튼에 함수를 연결하기. 버튼을 누르면 함수가 불립니다.

<button onclick="hey()">영화 기록하기</button>

직독직해하면, (1)버튼을 클릭하면, (2)hey를 불러라! (3)(3) alert(’ 안녕’)을 실행해라!

Javascript 기초 문법 배우기

console.log()

//브라우저에서 마우스 우클릭 > 검사 or 키보드 > f12를 누르면 개발자 도구가 나온다. 거기서 console 탭에서 로그가 찍혀있는 것을 확인할 수 있다.

<script>
	funtion hey() {
		console.log('안녕하세요')
	}
</script>

<body>
	<button onclick="hey()">영화 기록하기</button>
</body>

변수 & 기본연산변수 대입

( a = 2 )의 의미: 오른쪽에 있는 것을 왼쪽에 넣는 것 (2를 a라는 변수에 넣는다)
let으로 변수를 선언합니다.

let a = 2
a = 'Bob' // 문자열은 작은 따옴표로 감싸줍니다!

// 변수는 값을 저장하는 박스예요.
// 처음 변수를 저장하려면, let을 앞에 붙여주세요!
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.

사칙연산, 그리고 문자열 더하기가 기본적으로 가능하다.

let a = 2
let b = 3

console.log(a+b) // 5

let c = '대한'
let d = '민국'

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

리스트 & 딕셔너리

리스트: 순서를 지켜서 가지고 있는 형태입니다.
컴퓨터는 0부터 숫자를 센다 리스트에 들어있는 첫 번째 값은 [0]으로 불러온다

let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let a = ['사과','수박','딸기','감'] // 로 선언 가능

console.log(a[1]) // 수박
console.log(a[0]) // 사과

//리스트 길이 구하기
console.log(a.length) //4

딕셔너리: 키(key)-밸류(value) 값의 묶음리스트와 딕셔너리의 조합

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

let result2 = result[1].split('.') // ['gmail','com']

result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com

myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!

반복문

리스트, 리스트-딕셔너리 형식의 자료는 하나하나 뽑아써야 하나? no 쉽게쉽게 살자;

forEach

ex)

let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
	console.log(a)
})

반복문

ex) 만약 20살보다 크면 성인입니다 작으면 청소년입니다 를 출력하려면?

let age = 24

if (age > 20) {
	console.log('성인입니다')
} else {
	console.log('청소년입니다')
}

⇒ 반복문+조건문 합치기!

let ages = [12,15,20,25,17,37,24]

ages.forEach((a)=> {
	if (a > 20) {
		console.log('성인입니다')
	} else {
		console.log('청소년입니다')
	}
})

JQuery

JQuery가 뭐임? jQuery를 왜 씀?

웹을 조작하고 움직이게 하려고 쓰는거다.

javascript만 사용하면 복잡하니까 jQuery도 쓰는 거다!

jQuery도 남들이 만든 코드모음, 라이브러리이다! OK?ㅋ

jQuery와 Javascript - 코드 비교해보기

javscript 로 길고 복잡하게 써야 하는 것을 jQuery 로 보다 직관적으로 쓸 수 있da.

//javascript
document.getElementById("element").style.display = "none";
//jQuery
$('#element').hide();

jQuery 사용하기

미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부릅니다.

jQuery CDN 부분을 참고해서 임포트하기
https://www.w3schools.com/jquery/jquery_get_started.asp

<head> 와 </head> 사이에 아래를 넣으면 끝!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

ex) 아래코드를 실행해보자

<head>
	<script>
		function checkResult(){
			let a = ['사과','배','감','귤']
			$('#q1').text(a[0])
			$('#q1').css('color', 'red') // 글자색이 빨간색으로 바뀜
			$('#q1').css('font-size', '40px') // 글자 크기가 40px로 바뀜

			let b = {'name' : '영수' , 'age' : 30 }
			$('#q2').text(b['name'])

			let c = [
				{'name' : '영수' , 'age' : 30 },
				{'name' : '철수' , 'age' : 35 },
			]
			$('#q3').text(c[1]['age'])
		}
        function checkResult1(){
        	let fruits = ['사과', '배', '감', '귤', '수박']

            $('#q1').empty() // 비워짐
            fruits.forEach((fruit) => {
                let tamp_html = `<p>${fruit}</p>`

                $('#q1').append(temp_html)
            })
        }
        function checkResult1(){
            let people = [
                {'name' : '서영', 'age' : 24},
                {'name' : '현아', 'age' : 30},
                {'name' : '영환', 'age' : 12},
                {'name' : '서연', 'age' : 15},
                {'name' : '지용', 'age' : 18},
                {'name' : '예지', 'age' : 36},
            ]
            $('#q2').empty()
            people.forEach((person) => {
                let name = person['name']
                let age = person['age']
                let tamp_html = `<p>${name}은 ${age}살입니다.</p>`

                $('#q2').append(temp_html)
            })
        }
	</script>
</head>
<body>
	<button onclick="checkResult()"> 클릭 </button>
	<div id="q1"> 테스트 </div>
	<div id="q2"> 테스트 </div>
	<div id="q3"> 테스트 </div>
    
    <button onclick="checkResult1()"> 결과 </button>
    <div id="q1">
        <p>사과</p>
        <p>귤</p>
        <p>감</p>
    </div>
    
    <button onclick="checkResult2()"> 결과 </button>
    <div id="q2">
        <p>영수는 24살입니다.</p>
        <p>세종은 30살입니다.</p>
        <p>수영은 20살입니다.</p>
    </div>
</body>

// q1 테스트가 사과로 바뀜
// q2 테스트가 영수로 바뀜
// q3 테스트가 35 로 바뀜

'javascript' 카테고리의 다른 글

[JS]Fetch란? (0)	2023.05.18

현재글[JS]Javascript & JQuery

개발 지식 메모장