CSS기초(띵동코딩)2 - 1

1. 자바스크립트란?

• 자바스크립트는 프로그래밍 언어로 웹페이지의 동적인 동작을 만들 수 있음
• 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어
• 자바스크립트로 작성한 프로그램을 스크립트(script)라고 부름
  => 웹페이지의 HTML 안에 작성할 수 있고 웹페이지를 불러올 때 스크립트가 자동으로 실행됨
• 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고 실행할 수 있음

2. 자바스크립트 기초 지식 쌓기

ⅰ.경고창 뜨게 하기

• alert를 사용하여 경고창을 뜨게 할 수 있음

// 함수 만들기
function hey() {
	alert("안녕");
}

// button 함수에 연결하기
<button onclick="hey()">로그인하기</button>
// onclick : 버튼을 눌렀을때 실행됨

❌ 콘솔창 여는 방법
✔ 기본방법 - 마우스 오른쪽 클릭 → 검사 → 콘솔
✔ 윈도우 단축키 - F12
✔ 맥 단축키 - alt(option) + command + i

ⅱ. 변수와 데이터

• 변수는 데이터를 담는 그릇, 담는 데이터가 변할수 있어서 변수라함
• 변수 선언 방법 - let으로 변수를 선언함

let a = 1;
// 1을 a라는 변수에 넣는다라는 의미

// 변수 재할당 하기
// => 한번 선언했으면 다시 선언하지 않고 값을 넣음
a = 2

• 변수명 만들기 규칙
  
  • 카멜 케이스
    ✔ 자바스크립트 변수는 띄어쓰기 대신, "대문자"를 써야함
    ✔ camelcase: 낙타 등처럼 구불한 모양이라 카멜케이스라함

let cameCase = 1;

• 문자열
  • 문자열은 따옴표안에 묶어줘야지 문자열인지 알수 있음

let firstName = "대한";
let lastName = "민국";

console.log(firstName + lastName) // 대한민국

// 문자열 자르기
let myemail = "abc@gmail.com";
console.log(myemail.split("@")) // ["abc", "gmail.com]

// @표시 index 찾기
console.log(myemail.indexOf("@") // 3

// 없는 글자를 찾으면 -1을 반환함
console.log(myemail.indexOf("z") // -1

• 기본 연산과 문자열 연습

let a = 2

// 결과 값이 “4” 가 나오게 만들기
a*2;

// 결과 값이 “5” 이 나오게 만들기
a*2 +1;

let myemail = "abc@gmail.com"

// ‘@’ 문자열 자리 찾기
myemail.indexOf('@') // 3

// 결과 값이 “gmail.com"가 나오게 만들기
myemail.split("@")[1]

// 결과 값이 “gmail”이 나오게 만들기
myemail.split("@")[1].split(".")[0]

ⅲ. 배열과 객체

• 배열
  • 순서가 있는 데이터들의 모음
  • 배열 생성 하는 방법: 대괄호를 사용함
  • 배열의 순서는 0부터 시작함
  • 배열의 길이 => 배열이름.length

// 배열 선언하기
let fruit = ["사과" , "배", "감"];

// 배열의 요소 접근하기
fruit[0];    // 결과는 사과
fruit[1];    // 결과는 배

// 배열의 길이 구하기
fruit.length //결과는 3

• 객체
  • key와 value로 짝을 이루고 있는 데이터 모음
  • 객체를 생성하는 방법: 중괄호를 사용하고, "key" : value로 짝을 이룸

// 객체 선언
let person = {'name':'영수', 'height':180, 'age':20}

// 키, 값 추출하기
person["name"];   // 결과값은 영수

// 객체에 입력하기
person["email"] = "abc@gmail.com";
console.log(person) // {'name':'영수', 'height':180, 'age':20, 'email' : "abc@gmail.com"}

• 배열, 객체 연습하기

let fruits = ["딸기", "사과", "감"]

// 결과 값이 “딸기” 나오게 하기
fruit[1];

// 결과 값이 “딸기사과" 나오게 하기
fruits[0] + fruits[1];

let person = {'name':'영수', 'height':180, 'age':20}

// person에 key는 “score” value는 “90” 추가하기
person['score'] = 90

// person의 score 값 추출하기
person['score']

let people = [
	{'age':27,'name':'영서'},
	{'age':15,'name':'철수'},
	{'age':30,'name':'동희'},
	{'age':32,'name':'민준'}
]
// Q1.“동희” 값을 출력해보기
people[2]["name"]

// Q2.민준의 “나이”를 출력해보기
people[3]["age"]

let fruits = ["사과", "오렌지", "키위"];
// Q1. 맨 마지막 것을 하나 제외하기
fruits.pop();

// Q2. 맨 처음 것을 하나 제외하기
fruits.shift();

ⅳ.함수, 조건문, 반복문

• 함수
  • 같은 작업을 반복해야 할 때, 함수로 만들어 호출만 하면 되어, 편리하고 가독성도 좋아짐
  • 함수 만들기
    function 함수이름(미지수) {
         실행 되길 원하는 동작 작성 하기
    }
    함수이름(미지수)   // 함수 호출하기

function sum(num1, num2){
	console.log("더하기를 합니다.", num1, num2)
    return num1 + num2
}
sum(1, 2) // 더하기를 합니다. 1 2 
          // 3

• 조건문
  • 조건에 따라, 원하는 결과를 발생시키기 위해 필요함
  • 조건문 만들기
    if (조건) {
        위 조건을 충족한다면, 해당 코드 실행
    } else if (조건) {
        위 조건을 충족한다면, 해당 코드 실행
    } else {
        위 조건들을 만족시키지 못하면, 해당 코드 실행
    }

const score = 80

if(score > 70) {
	console.log("pass");
} else {
	console.log("fail");
}
// pass

// 조건문과 함수 같이 사용하기
funtion get_result(score) {
	if(score > 70) {
		console.log("pass");
	} else {
		console.log("fail");
	}
}
get_result(60)  // fail
get_result(90)  // pass

• 반복문
  • 여러 번 반복되는 작업을 반복문으로 해결할 수 잇음
  • 함수와 달리 호출하지 않음
  • 반복문 만들기
    for (let 1. 시작조건; 2. 반복조건; 3. 더하기) {
         4. 반복 조건에 충족한다면, 매번 실행
    }

for(let i = 0; i < 10; i++) {
	console.log(i);
}
// 0 ~ 9까지 출력됨

• 함수, 반복문, 조건문 연습하기

// 이름을 입력하면, "영철님 환영합니다" 의 메세지창을 띄우는 함수를 만들어 보기
function hello(name) {
	alert(`${name}님 환영합니다`)
}

hello(영철) // 영철님 환영합니다.


// 리스트의 이름이 순차적으로 나올수 있도록 만들어 보기
let students = ["가희", "승환", "경아", "호석"]

for(let i = 0; i < students.length; i++) {
	console.log(students[i])
}

//서울에 사는 학생만 나오도록 해보기
let people = [
	{'name':'영서','city':'서울','age':20},
	{'name':'철수','city':'서울','age':8},
	{'name':'동희','city':'대구','age':24},
	{'name':'민준','city':'제주','age':15},
	{'name':'영희','city':'서울','age':35}
]
for(let i = 0; i < people.length; i++) {
	if (people[i]["city"] === "서울"){
		console.log(people[i]["name"])
	}
}

ⅴ. 모르는 문법 찾아가면서 해보기

• ex) @ 포함 여부에 따라 이메일인지 아닌지 판단하는 함수 만들어보기
  • 모르는 문법이 있을때는 모르는 부분을 구글링을 통하여 찾아가면서 하기
  • 위에 문제를 보고 검색창에 자바스크립트 문자열 포함 체크검색
  • 사용방법을 찾고 확인해서 사용하기
  • includes()
    • 배열에서 특정 요소를 포함하고 있는지 판별하는 메서드

function is_email(email){
	if(email.includes("@") === true) {
    	alert("이메일입니다");
	} else {
		alert("이메일이 아닙니다");
	}
}

• 이메일의 도메인 부분만 메세지 창에 띄어보기

function check_domain(email) {
	if(email.includes("@") === true){
    	alert(email.split("@")[1].split(".")[0]);
    } else {
		alert("이메일이 아닙니다.");
	}
}

• “@”이 없는 이메일 (=이메일을 잘못 입력한 사람을 골라내보기

let users = [
	{'name':'영희', 'email':"young@gamil.com"},
	{'name':'영숙', 'email':"suk@naver.com"},
	{'name':'민수', 'email':"minsu.gmail.com"},
  	{'name':'형준', 'email':"jun@naver,com"},
  	{'name':'철수', 'email':"su.gmail.com"},
  	{'name':'동희', 'email':"dongdong@daum.net"},
]

for(let i = 0; i < users.length; i++) {
	if(users[i]["email"].includes("@") === false){
		consoel.log(users[i]["name"])
	}
}

• “서울"에 거주하지 않는 사람 이름과 도시를 출력해 보기

let users = [
	{'name':'영지', 'city':"부산"},
	{'name':'서희', 'city':"서울"},
	{'name':'민정', 'city':"광주"},
  	{'name':'지우', 'city':"서울"},
  	{'name':'수철', 'city':"수원"},
  	{'name':'정우', 'city':"울산"},
]

for(let i = 0; i < users.length; i++) {
	if(users[i]["city"] !== "서울"){
		console.log(`이름: ${users[i]["name"]}, 사는 도시 : ${users[i]["city"]}`)
	}
}