[웹개발의 봄, Spring] 3주차 (2) - javascript, jQuery 기초

[웹개발의 봄, Spring] 3주차 (1) - 타임라인 서비스 서버 완성하기

---

​Javascript 기초 

🔎 Javascript란?

브라우저를 살아 숨쉬게 만드는 친구입니다.

클릭, 마우스 오버 시 색 변화, 숨기기, 나타내기, 등등 수많은 일을 할 수 있다😎

 

🔎 Javascript 변수, 자료형

/*변수*/
let a = 3; // 변수를 처음 선언할 때 let을 써줍니다. 자료형은 써주지 않아도 되어요.
let b = 2;
console.log(a + b); // System.out.println()과 같은 녀석입니다.

/*문자, 숫자*/
let name = 'bknam';
let course = "웹개발의 봄 Spring" // 자바와 다르게 홑/쌍따옴표 상관없습니다.
let num = 10;
console.log(num + name); // 문자 + 숫자 하면 둘 모두를 문자로 묶습니다.

/*리스트*/
let fruits = ['사과', '딸기', '수박']; // List 보다 편하게 사용할 수 있습니다.
console.log(fruits[0]);

/*딕셔너리*/
let course = {
	'title': '웹개발의 봄, Spring',
	'tutor': '남병관'
};

 

🔎 Javascript 반복문, 조건문, 함수

/*과일이 몇 개인지 세는 함수*/

let fruits = ['사과', '딸기', '수박', '감', '배', '딸기', '감'];

function countFruit(name) {
	let result = 0;
	for (let i=0; i<fruits.length; i++) {
		let fruit = fruits[i];
		if (fruit == name) {
			result += 1;
		}
	}
	return result;
}

let count = countFruit('감');
console.log(count); // 배열에 들어있는 감의 개수 인쇄

 

🔎 Javascript 백틱

/*백틱*/
let name = '내 이름';
let text = `${name}님의 스프링 5주 완주를 축하합니다!`;
console.log(text);

 

jQuery 기초

🔎 jQuery 란?

jQuery는, 미리 작성된 자바스크립트 함수 모음이다.

많이 쓰이는 HTML, CSS 조작 함수를 미리 만들어서 제공해주는 것이다.

만들 필요 없이 사용법만 알면 된다😎

 

사용하기 전에! head 태그 사이에 임포트 해주기

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

 

🔎 html 숨기기, 나타내기

$('#post-box').show();
$('#post-box').show();

 

🔎 html 없애기, 추가하기

$('#cards-box').empty();
$('#cards-box').append(`<div class="card">
    <img class="card-img-top"
         src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
         alt="Card image cap">
    <div class="card-body">
        <a href="#" class="card-title">여기 기사 제목이 들어가죠</a>
        <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
        <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
    </div>
</div>`);

 

🔎 input 값 가져오기, 넣기

$('#post-url').val();
$('#post-url').val('new text');