멋쟁이사자처럼(명지대) 2주차 수업

Crmal·2022년 5월 26일
JavaScript멋쟁이사자처럼(명지대)
0

멋쟁이사자처럼(명지대) 세션

목록 보기
2/4

2주차

목표

  • JS가 뭔지 아는 것
  • js의 특징에는 뭐가 있구나
  • 조건문, 함수, 배열, 반복문, 연산자를 이해하고 문서를 보고 쓸 수 있는 정도가 되는 것

HTML로 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있습니다.

웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js 같은 비 브라우저 환경에서도 사용하고 있습니다.

JavaScript란?

정의

🪓 객체 지향 프로그래밍 언어

특징

1. JS = 모든게 객체.

  • 객체란?
  • 1급객체란 ?
    • 변수에 할당할 수 있다.
    • 다른 함수를 인자로 전달 받는다.
    • 다른 함수의 결과로서 리턴 될 수 있다.

2. 동적

  • 사용자가 주는 정보를 토대로 정적인 HTML을 유동적으로 변경할 수 있게 만들어주는 언어다.
  • JavaScript로 코드를 만들면 버튼을 눌렀을 때 웹페이지를 어두워지게 만들어지는 등 사용자가 주는 정보에따라 웹페이지를 변화 시킬 수 있다.

3. java 와 JS

문법상 비슷한 부분은 두 언어의 문법 모두 C언어 기반, 그치만 다름

자바(Java)자바스크립트(JavaScript)
컴파일 언어인터프리터 언어
타입 검사를 엄격하게 함.타입을 명시하지 않음.
객체 지향 언어프로토타입 기반

자바스크립트의 실행

HTML 안 script 태그

HTML과 JavaScript의 만남(script 태그)

HTML과 JavaScript의 만남 (이벤트)

브라우저

  1. 모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장
  2. 목적 : HTML, CSS, 자바스크립트를 실행하여 웹 페이지를 화면에 렌더링하는 것

운영 체제단축키
WindowsF12 또는 Ctrl + Shift + I
macOScommand ⌘ + option ⌥ + I

크롬에서 키보드 F12(개발자도구) 누르고 콘솔(console)을 누른 뒤 콘솔 창에 따라 쳐보세요.

console.log("Hello Likelion");

Node.js

  1. 얘도 js 엔진 내장

  2. 목적 : 서버 개발 환경을 제공 + a

DOM제어

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스

  • document.innerHTML - HTML 변경 , innerText
  • document.write() - HTML 출력
  • alert() - 경고 상자 쓰기
  • console.log() - 브라우저 콘솔에 쓰기
  • onclick - 사용자가 HTML 요소를 클릭시 실행
  • document.querySelector()- 선택자와 일치하는 문서 내 첫 번째 Element를 반환 일치하는 요소가 없으면 null을 반환
    MethodDescription
    document.getElementById(id)요소의 id로 요소 찾기
    document.getElementsByTagName(name)태그 이름으로 요소 찾기
    document.getElementsByClassName(name)클래스 이름으로 요소 찾기

간단하게 글자색을 바꿔보아요

예제코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Likelion</title>
  </head>
  <body>
    <h2>Red</h2>
    <h2 id="blue">Blue</h2>
    <h2 class="green">Green</h2>
    <button onclick="querySel()">querySelector</button>
    <br />
    <br />
    <button onclick="getId()">getElementById</button>
    <br />
    <br />
    <button onclick="getClass()">getElementsByClassName</button>
  </body>
  <script>
    function querySel() {
      document.querySelector("h2").style.color = "red";
    }
    function getId() {
      document.getElementById("blue").style.color = "blue";
    }
    function getClass() {
      document.getElementsByClassName("green")[0].style.color = "green";
    }
  </script>
</html>
  • 이벤트
    이벤트란 시스템에서 일어나는 사건인데,  그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것



변수

  • 변수란 var, let, const 키워드를 사용하여 선언하고 할당 연산자를 사용해 값을 할당하는 것

    let score;  // 변수의 선언
score = 80; // 값의 할당
score = 90; // 값의 재할당

  • 변수 선언과 변수 할당

    const - 상수 : 값 변하지 ❌
    let - 변수 : 값 변할 수 ⭕️
    var - 전역 변수 → 비권장

  const a = 'likelion'; // 문자열 
  let b = 0; // 숫자
  var c = false; // 불린 - true, false
  const d = null; // 널 값을 의도적으로 빈값을 둠 (빈상자)
  let e = undefined; // 언디파인드 값이 존재하지않음 (상자x)
  var f = []; // 배열 ['1', 1, 'likelion']
  const g = {}; // 객체 { name: likelion, session: 2 }
  let h = function() {}; // 함수 function likelion() { console.log("Hello Likelion");

CamelCase

맨 앞글자를 소문자로 표기 나머지 뒤에 따라붙는 단어들의 앞글자는 대문자
  • 소문자로
  • likeLion ⭕️ userName ⭕️
  • likelion ❌
  • Likelion ❌
  • like_lion ❌

연산자

  • i++, ++i
  • 삼항연산자 ?
const isMember = '$1.00';
isMember ? '$2.00' : '$10.00'

추가정보

조건문

if(1 === 2){ 
	console.log("맞아요!");  // 조건1이 맞는 경우 
}
else if(1 === 2) {
	console.log("위에 조건은 아니긴한데 이번 조건은 맞아요!"); // 조건2가 맞는 경우 
}
else {
	console.log("다아닌데요?"); //조건 1,2가 아닌 경우
}

문제

불러주는 정수 두개가 입력으로 들어오면

큰수 - 작은수의 값을 출력하세요

예제

입력 : a = 3 b = 7
출력 : 4

힌트

const a = prompt("첫번째 정수를 입력해주세요");  //입력
const b = prompt("두번째 정수를 입력해주세요");  //입력
alert(Number(aconst a = prompt("첫번째 정수를 입력해주세요");  //입력
const b = prompt("두번째 정수를 입력해주세요");  //입력
alert(Number(a) - Number(b));             //출력) - Number(b));             //출력

반복문

  • while
let i = 0;
while(i === 3){ // 조건문이 참이면 반복
	console.log("Hello Likelion");
	i++;
	if(i === 3) break;
}
  • for
for(초기식; 조건문; 증감문) { // 조건문이 참이면 반복
	console.log("Hello Likelion");
}
// 2중 반복문
for(let i = 5; i>3; i--) { // 조건문이 참이면 반복
	console.log("Hello Likelion");
	for(let j = 0; j<3; j++) {
		console.log("Hello 2Week");
	}
}
  • 예시코드
    for(let i =0; i<10; i++){
	console.log(i);
}

<실습 : HTML 안에 js 반복문을 이용하여 별을 지어보세요! >

제한시간 : 5M

  • 답
function sum(n) {
  let a = 0;
  for (let i = 1; i <= n; i++) {
    a += i;
  }
  return a;
}

const n = prompt("숫자를 입력해주세요");
alert(sum(n));
  1. index.html 만들기
  2. ! 탭
  • 힌트

for(let i = 0; i<5; i++){
  document.write('*');
}
   for(let i = 0; i<5; i++){
   	document.write('*');
   	document.write('<br>');
}

배열

const likeLionArray = ['1', 2, 'likelion'];
  • likeLionArray[0] = ‘1’ , likeLionArray[1] = 2
  • 배열내장함수

객체

객체란 ?

객체를 선언 할 때에는 이렇게 { } 문자 안에 원하는 값들을 넣어주면 됩니다.
값을 집어 넣을 때에는

키: 원하는 값
  • object
const userData = {
	'name': '박재민',
	'age' : '24',
	'phone': '01000000000'
}

함수

  • 함수

파라미터:함수에서 어떤 값을 받아올지 정해주는 매개변수

function 함수명(파라미터) {
	코드블록
}
  • 화살표함수
const 함수명 = (파라미터) => {
	코드블록
}
  • 화살표 함수를 쓰는 이유 : 간단 명료한 코드
    • 예시코드
      • 일반함수
        function add(a, b, c) {
  return a + b + c;
};
      • 화살표함수
        const add = (a, b) => {
  return a + b;
};
        화살표함수로는 더 간단하게, 한 줄로도 표현 가능 !
        const add = (a, b) => a + b;

< 실습 : 함수 호출해보기 >

<
sum함수를 만들어 1~n까지의 숫자의 합을 출력해보세요

>

const n = prompt("숫자를 입력해주세요");
alert(sum(n));

팀 실습 : 디그다 잡기

mju-likelion/Digda

팀원들을 도와주세요

코드를 짜주시지말고 설명으로 도와주세요 ! 시간 제한 이후 랜덤으로 답을 질문할 예정입니다 !

다음의 자바스크립트 문법들을 이용하여 코드의 빈칸들을 채워보세요.

아래의 리스트들이 어떤 기능을 하는지, 어떻게 사용해야하는지 모르신다면 구글링을 활용해주세요.

  • addEventListener
  • removeEventListener
  • setTimeout
  • InnerHTML

코드들을 다 채우셨다면 아래의 기능들로 코드를 바꿔주세요

  • 버튼 색상 임의의 원하는 색으로 변경
  • 성공 시에 뜨는 모달에 이미지 넣어보기

  • 현재 10번의 기회를 5번으로 바꿔주세요

    • 아래 사진 처럼 총 점수도 5점이 되어야합니다! (5점만점)

  • 점수 커트라인 30점으로 변경

git 순서

  1. git clone 을 받아주세요 !

    git clone https://github.com/mju-likelion/Digda

  2. 브랜치를 파주세요

    git checkout -b 팀명

  3. 코드 완성

  4. git commit 과 push를 진행해주세요

    git commit -m "자유롭게 메세지를 작성해주세요~"
git push

    만약 아래와 같은 에러가 뜬다면, 아래 코드를 입력해주세요

    git push --set-upstream origin 팀명

< 실습 답안 확인 >

개인 과제

  1. froggy
  2. 자기소개페이지
  • 1주차 과제인 자기소개페이지에 오늘 배운 항목 중 최소 4가지 이상을 넣어 원하는 기능을 구현하여 2주차 과제를 완성해주세요 !
  • 구현해온 항목을 다음 시간에 소개해보려고 합니다 참신하고 자유로운 기능을 기대할게요 !
  • 어떤 걸 구현해야할지 정말 감이 안잡힌다하시는 분들은 아래 세개를 구현해주세요🥺
    1. 버튼 클릭 시 다크모드 구현
    2. 버튼 클릭 시 이미지 변경
    3. 내정보 숨기기 기능
profile
Crmal
이전 포스트

멋쟁이사자처럼(명지대) 수업 1주차

다음 포스트

멋쟁이사자처럼(명지대) 3주차 수업

0개의 댓글