📚[Javascript]

텁텁·2025년 4월 3일

Javascript 란?

프로그래밍 언어 중 하나로, 브라우저가 이해할 수 있는 언어이다.
웹 페이지의 동적인 기능을 담당한다.
범용성이 매우 좋은 언어로 웹 개발에 필수적인 요소로 여겨진다.

Javascript 기초문법

<Script>태그를 이용해서 사용한다.

태그 안에 사용할 함수 등을 작성한다.

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

개발자도구(F12) 콘솔창에 '안녕하세요'가 출력된다.

변수 & 기본연산

let으로 변수를 선언

let a = 2
a = 'Bob' // 문자열은 작은 따옴표로 감싸준다.

// 변수 선언 후 다시 선언하지 않고 값을 넣는다.

사칙연산과 문자열 더하기가 가능하다.

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

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

사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재한다.

// 나머지 구하기(20을 7로 나누었을 때 나머지 값 6)
let a = 20
let b = 7
a % b = 6

// 특정 문자를 기준으로 문자열 나누기
let myemail = 'sparta@gmail.com'
let result = myemail.split('@') // ['sparta','gmail.com']

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

배열 & 딕셔너리

배열 : 순서를 지켜서 가지고 있는 형태

컴퓨터는 기본적으로 0부터 세기 때문에 첫번째 값은 [0]으로 불러온다.

let a_list = []
// 선언 후 초기화를 따로 진행하거나

let a = ['사과','수박','딸기','감']
// 로 선언과 초기화를 동시에 진행

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

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

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

let a_dict = {} // 또는
let a = {'name':'영수','age':27} // 로 선언

console.log(a)
console.log(a['name']) // 영수
console.log(b_dict['age']) // 27

리스트와 딕셔너리의 조합

꺽쇠와 키-밸류, 두 가지로 이뤄진 형태의 자료를 많이 사용한다.

let a = [
    {'name':'영수','age':27},
    {'name':'철수','age':15},
    {'name':'영희','age':20}
]

console.log(a[0]['name']) //영수
console.log(a[1]['age']) //15

반복문 & 조건문

반복문 : 같은 코드를 여러 번 실행할 때 사용되는 문법
forEach : 배열의 각 요소를 하나씩 순회하면서 지정한 콜백 함수를 실행하는 메서드

let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
    console.log(a)
}) // 사과 ~ 귤 까지 출력

조건문 : 주어진 조건에 따라 다른 코드를 실행하는 문법
If else

if (조건) {
    // 조건에 맞으면 실행
} else {
    // 아닐 때 실행행
}

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('청소년입니다')
    }
})

Javascript 활용문법(DOM)

Alert(경고창) 띄우기

<Script>태그안에 함수를 만든다.

<script>
    function hello() {
        alert('안녕하세요!')
    }
</script>

버튼에 함수 연결 : 클릭 시 해당 함수 실행

<button onclick="hello()">인사</button>

Javascript로 HTML 조작
- document : 웹문서
- . : ~의 라는 의미
- getElementById : 해당 ID를 가진 요소를 가져온다.
- 바꿀 내용 기입
```
document.getElementById('가져올 ID').style.color = 'red';
// 컬러 값을 red 로 변경
```

jQuery

복잡한 Javascript 문을 간결하게 줄여주는 라이브러리
1. Javascript 와 jQuery 비교
- 길고 복잡한 Javascript 문

```javascript
document.getElementById('hello').innerHTML = '안녕';
```
- 간결하고 직관적인 `jQuery` 문
```javascript
$('#hello').html('안녕');
```

jQuery 사용법
- jQuery CDN
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
```
- 미리 작성된 Javascript 코드를 가져온다 > '임포트'
- <head> 태그 안에 작성

jQuery 연습

기본 뼈대.

<script>
    function checkResult() {
       // 이곳에 작성해서 테스트 값 변경
    }
</script>
<body>
    <div id="test" onclick="checkResult()">
        테스트
    </div>
</body>

문자열 자료형형

 $('#q1').text('쥬라기월드');
// 쥬라기 월드

리스트 자료형

let a = ['사과', '배', '감', '귤']
$('#q1').text(a[2]);
// 감

딕셔너리 자료형

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

리스트-딕셔너리 자료형

let c = [
    { 'name': '영수', 'age': 30 },
    { 'name': '철수', 'age': 35 }
]
$('#q1').text(c[1]['name']);
// 영수

텁텁

차근차근

이전 포스트

SQL 마무리

다음 포스트

📚[Javascript]

Javascript 란?

Javascript 기초문법

Javascript 활용문법(DOM)

jQuery

SQL 마무리

📚[Java] 다형성, 분수의 덧셈 문제풀이

0개의 댓글