KTDS_자바&파이썬 웹애플리케이션전문가 양성과정교육_30일차(JS,JQuery)

자바&파이썬 웹애플리케이션 전문가 양성과정 채용연계형 교육과정 30일차

KT 자바교육 후기 (2021-07-22 ~ 2021-12-03) 

2021-09-02 비대면 연장 필수.. (참고, 8월 16일 ~ 9월 3일 비대면 주간, 4단계 거리두기로 인하여)

.JQuery, 함수, AFTER, BEFORE, PREPEND, APPEND

---

[오전]

  복습 및 실습 과제

 

 

배열 실습 과제

scores 배열 변수를 만들어, 6개의 숫자를 할당하세요.

totalScore 변수를 만들고 배열에 담긴 6개의 숫자를 모두 더해 할당하세요.

averageScore 변수를 만들고, totalScore와 scores.length 를 이용해 평균을 구해 출력해 보세요.

 

 

>> JS_ 배열의 총합 구하기, 배열 연습 문제 :: HappyEndingIsMine (tistory.com)

 

---

[오후]

함수 – 일반 함수

작업 단위를 정하고, 일부를 분리시켜 관리함.

function sayHello() {
console.log(“안녕하세요?”);
}
sayHello();

function calcAndPrintNumbers() {
  var numberOne = 10;
  var numberTwo = 20;
  var result = numberOne + numberTwo;
  console.log( numberOne + “ + ” + numberTwo + “ = ” + result );
}

calcAndPrintNumbers();

 

 

 

함수 – 리턴 함수

일반 함수가 결과 값을 반환함.

function getCalcNumbers() {
  sayWelcome();
  var numberOne = 10;
  var numberTwo = 20;
  var result = numberOne + numberTwo;
  // console.log( numberOne + “ + ” + numberTwo + “ = ” + result );
  return result;
}


var calcResult = getCalcNumbers();
console.log(calcResult); // 값 30

 

 

 

함수 – 매개변수가 있는 함수

함수에 필요한 데이터를 전달함

function getCalcNumbers( numberOne, numberTwo ) {
  sayWelcome();
  var result = numberOne + numberTwo;
  return result;
}

var result = getCalcNumbers(10, 60);

 

 

 

함수 – 중첩 함수

함수 안에 함수가 다시 포함되어, 감추고 싶은 기능을 구현한다. 

Javascript에는 Access 제한자가 없기 때문에 기능을 감추고 싶다면, 함수 안의 함수로 구현해야 한다.

function getCalcNumbers ( numberOne, numberTwo ) {
  var result = calcPlus ( numberOne, numberTwo );
  function calcPlus ( numberOne, numberTwo ) {
    return numberOne + numberTwo;
  }
  return result;
}

var result = getCalcNumbers(10, 60);

 

 

 

함수 – 콜백

처리 후 작업 

함수에서 특정 작업이 완료되었을 때, 추가로 실행해야 하는 작업을 기술한 함수.

함수가 종료되는 시점이 불분명할 때, 콜백을 사용한다.  예> Ajax와 같은 Network 작업

함수가 파라미터로 전달된다

ffunction getCalcNumbers ( callback ) {
  sayWelcome();
  var result = callback ( 10, 60 );
  return result;
}

var callbackFunction = function ( numberOne, numberTwo ) {
  return numberOne + numberTwo;
}

var result = getCalcNumbers ( callbackFunction );

 

 

 

함수 – 함수를 리턴하는 함수

Private 한 변수나 함수를 가릴 때 사용함

function getCalcNumbers ( numberOne, numberTwo ) {
  return function () {
  return numberOne + numberTwo;
  }
}

var calc = getCalcNumbers(10, 80);
var result = calc();

 

function counter ( ) {
  var count = 0;
  return function () {
    return ++count;
  };
}

var count = counter();
var result = count; //값 1

var result = count; //값 2

var result = count; //값 3

 

---

변수의 영역

다른 언어에서 변수의 영역

 

 

 

Javascript 에서 변수의 영역

Javascript는 function기반의 영역을 사용함. 

function 내부에서 선언된 변수는 function의 모든 영역에서 사용 가능하다.

function foo ( ) {
  var count = 0;
  if ( true ) {
    var bar = 10;
  }
}

 

 

 

내장함수 – alert()

사용자에게 경고창 보여주기

alert( “알림 메시지” );
alert( 10 );
alert( “알림 메시지” + 60 );
alert( 70 + 60 );
alert( foo() );

 

 

 

내장함수 – confirm()

사용자에게 예 / 아니오 선택창 보여주기

confirm ( “선택하세요.” );

true 리턴 false 리턴
var result = confirm ( “선택하세요.” );

if ( result ) {
  // 확인을 클릭했을 때
} else {
  // 취소를 클릭했을 때
}

 

 

 

객체 - 리터럴

Javascript에서 가장 기본적인 객체 생성 방법

var object = {}; // 객체 생성

object.name = “Jang Min Chang”; // object 객체에 name field 추가.
object.job = “Developer”; // object 객체에 job field 추가.

console.log( object.name ); //→ Jang Min Chang

console.log( object.job ); //→ Developer

console.dir( object );

 

 

멤버변수 / 함수를 선언할 수 있다

var object = {}; // 객체 생성
object.name = “Jang Min Chang”; // object 객체에 name field 추가.
object.job = “Developer”; // object 객체에 job field 추가.

object.hello = function() {
  alert ( “안녕하세요.” );
};

object.hello();

 

 

 

객체 - 클래스

function Car ( ) {
  this.carBrand = “Hyundai”;
  this.carName = “i40”;
}

var car = new Car();
console.log( car.carBrand ); //→ Hyundai

console.log( car.carName ); //→ i40

console.dir( car );

 

 

 

New 키워드를 이용해 객체를 만들어낼 수 있다.

function Car ( carBrand, carName ) {
  this.carBrand = carBrand;
  this.carName = carName;
}

var car = new Car ( “KIA”, “K7” );
console.log( car.carBrand ); //→ KIA

console.log( car.carName ); //→ K7

console.dir( car );

 

function Car ( carBrand, carName ) {
  this.carBrand = carBrand;
  this.carName = carName;
  this.showMyCar = function ( ) {
    console.log( this.carBrand );
    console.log( this.carName );
  };
}

var car = new Car ( “KIA”, “K7” );
car.showMyCar();

 

---

jQuery

Node(Element)를 간편하게 컨트롤 하기 위한 라이브러리

jQuery는 아래 작업들을 편하게 만들어준다.

 (1)HTML 문서에서 Element 찾기 

 (2)HTML Content 변경하기 

 (3)사용자의 Action 에 반응하기

 (4)웹 페이지의 내용을 애니메이션 하기

 (5)네트워크에서 새로운 컨텐츠 받아오기 

 

 

jQuery 로 처리할 수 있는 Element 들의 기능들. 

 (1)CSS (2)Event (3)Animation (4)Create, Modify, Delete 등을 처리. 

 

 

Network 

비동기 통신을 간편하게 처리함.

 

 

 

JQuery를 시작하기 전.. 

사실 HTML 문서는 DOM(Document Object Model) 의 집합.

 

Javascript로 DOM 들을 컨트롤 하려면..

Document.get….. 길고 복잡하다.

 

---

jQuery로 자바스크립트 개발자들을 구원하다!

https://ko.wikipedia.org/wiki/존_레식

 

---

jQuery 는 브라우저별로 적절한 처리를 수행해 준다.

→ 크로스 브라우징!

 

 

jQuery 사용 준비하기

 

---

셀렉팅

 

여러 엘리먼트 변경해보기

jQuery 셀렉터는 CSS와 동일하다.

 ( . 은 클래스, #은 아이디, p는 태그 )

 

 

여러 엘리먼트 변경해보기

 

---

하위 요소 셀렉팅

자식 요소 가져오기

하위 요소 셀렉팅은 자식 요소 중 존재하는 것이 있다면, 모두 가져온다. 

Step(Depth)에 상관없이 모두 가져옴.

 

 

CSS와 유사하다!

 

 

---

다중 요소 셀렉팅

 

---

PSEUDO Classes

 *0번째는 짝수 번째로 판단한다.

 

---

DOM Traversing

HTML Document 탐색하기

 

---

 

---

 

---

DOM 다루기

---

DOM 다루기 : BEFORE

DOM 다루기 : AFTER

DOM 다루기 : PREPEND

DOM 다루기 : APPEND

 

---