Elice --Cloud--Track/4~7 주차

4주차 블로그 챌린지-js , DOM

babystep 2023. 12. 17. 23:33
728x90

 

[ 자바스크립트 소개 ]

 [ 01 자바스크립트 ]

  • 목차
    • 1 자바 스크립트
    • 2 자바스크립트의 변수
    • 3 변수 데이터 확인 방법
    • 4 자바 스크립트 데이터 타입 
  • 01 자바스크립트
    • 웹 / 서버/ iot등 다양한 분야에서 활용할 수 있는 프로그래밍 언어
  • 02 자바스크립트의 변수
    • var value 라고 변수 선언가능
    • var fruit = "apple";
    • Console.log(fruit); // apple 출력
    • //변수명은 숫자로 시작할 수 없음
      • var 1Str < ---  XXX
    • // 변수명은 최대한 자세하게 작성
      • var randomNumber; <---- X X
    • // 의미가 불명확하게 하면안된다.
      • var tMAX <-- t 이게 무슨 값인지 알수없다.
    • <body>
    • 선언
    • 데이터 변경
    • 변수 생성 시 주의 사항
    • 자바스크립트 사용방법

<script src="index.js"></script>

</body>

  • 변수 데이터 확인 방법
    • 우클릭 후 크롬 개발자 검사 or F12

 

  • 03 자바스크립트 데이터 타입
    • String : 문자열
    • Number : 숫자
    • Function : 함수
    • Array : 배열
    • Object
    • Boolean
    • Undefined :
    • var str1 = "Hello world";
    • var str2 = 'Nice to meet you'
    • var str3 = "20" // 숫자가 아닌 문자열
    • 큰 따옴표 또는 작은 따옴표 안에 작성된 데이터
    • var str1 = "Elice' ; // 큰따옴표와 작은따옴표 혼용 불가
    • var str2 = "He's a boy";
    • var str3  = 'He\'s a boy'; // 역슬러시해야 뒤에 s a boy 인식 !!
    • var num1= 10;  // 정수
    • var num2 = -10; // 음수
    • var num3 = 3.14;  // 실수
    • 예시1 )
      • var func1 = function(){
    • 8가지 데이터 타입
    • 문자열
    • 문자열 주의사항
    • 숫자
    • 함수

console.log("Func1");

} // 함수 생성

func1(); // 함수 호출

 

  • 예시2 )
    • function func1() {

console.log("Func1");

} // 함수 생성

func(); //함수 호출

  • 함수생성
    • function 키워드를 사용하여 생성

 

  • 함수 호출
    • 함수 안에 이쓴 코드를 실행시키겠다는 의미

 

  • 예시3 )
    • var area = function ( width, height ) {

return width * height;

}

area (10, 20);

 

  • 매개변수 : 인자로부터 전달받은 값이 들어가는 통로

상황에 따라 생략 가능

  • 인자 : 함수에게 전달하는 데이터
  • return   : 함수안에 데이터를 저장할 때 사용
  • 함수 데이터 호출 방법
    • var area  = function ( width, height ) {

return width * height;

}

// 세 변수를 생성한 후 그 변수를 console.log로 감싸기

var result = area( 10, 20 );

console.log(result );

 

// 함수 자체를 console.log() 로 감싸기

console.log(area(10, 20));

  • 배열
    • var fruit = ["사과", "배","수박"];

console.log(fruit[0]); //0번째 인덱스의 데이터 추출 // 사과

  • 데이터의 좌표값(index) 작성

첫 번째 좌표 값은 0

  • 배열 데이터 변경하기
    • var fruit = ["사과","배","수박"];

fruit[0] = "포도";

console.log(fruit);

  • 인덱스를 사용하여 접근 후 새로운 데이터 대입
  • 객체
    • var student = {

name : "inkon",

age : 20,

skills : ["자바스크립트", "HTML", "CSS"],

sum : function ( num1, num2 ) {

return num1 + num2;

}

}

  • name : 프로퍼티
  • "inkon" : 데이터
  • sum : 메서드 :
  • 객체는 프로퍼티 , 메서드 , 데이터 로 구성
  • 여러 종류의 데이터 타입 삽입 가능

 

  • 객체 데이터 출력하기

 

  • var student = {

name : "inkon",

age : 20,

skills : ["자바스크립트", "HTML", "CSS"],

sum : function ( num1, num2 ) {

return num1 + num2;

}

}

 

console.log(student.name); // 객체명.프로퍼티명

console.log(student['name']; // 객체명["프로퍼티명"]

  • 객체 데이터 변경하기
    • var student = {

name : "inkon",

age : 20,

skills : ["자바스크립트", "HTML", "CSS"],

sum : function ( num1, num2 ) {

return num1 + num2;

}

}

 

student.name = "Park"; // name 프로퍼티의 데이터 변경

console.log(student.name); // Park 출력

  • undefined, null
    • var unde;

var empty = null;

  • undefined :  변수 안에 데이터를 입력하지 않은 상태 ( 데이터가 없는 것 )
  • null : 개발자가임의로 변수 안에 빈 데이터를 삽입한 상태 ( 빈 데이터를 지정한 것 )
  • Boolean
    • var t = true;
    • var f = false;
  • 04 자바스크립트의 프로퍼티와 메서드
    • 초콜릿의 종류별 갖고 있는 고유한 성질
    • 자바스크립트에서 사용자를 위해 사전에 작성된 편의 기능
    • var str1 = "Hello World";
    • 데이터 타입의 프로퍼티와 메서드
    • 문자열 프로퍼티와 메서드

str1.length; //문자열 길이 11

str1.charAt(0); // 문자열 H 추출

str1.split(" "); // 공백 기준으로 문자 나누 후 배열 [Hello, world] 로 출력

 

  • 배열 프로퍼티와 메서드
    • var fruit  = ["사과","배","포도"];

fruit.length; //데이터 개수

 

fruit.push("딸기");   // 배열 뒤에 데이터 삽입

fruit.ushift("레몬"); // 배열 앞에 데이터 삽입

 

fruit.pop(); // 배열 뒤의 데이터 제거

fruit.shift();; // 배열 앞의 데이터 제거

 

  • math ( 라이브러리 ) 의 수학 연산 메서드
    • Math.abs(-3); // 절댓값
    • Math.ceil(0.3); // 올림
    • Math.floor(10.9); // 내림
    • Math.random(); // 임의의 숫자 출력
  • 문자를 숫자로 변환하는 메서드
    • parseInt("20.6"); // 정수 형태의 20 으로 변환
    • parseFloat("20.6"); // 실수 형태의 20.6으로 변환

 

[ 02 자바스크립트 기초 문법 및 활용 ]

  • 01 연산자
    • consolelog(20 + 10); // 30
    • 산술 연산자

consolelog(20 - 10); // 10

consolelog(20 * 10); // 200

consolelog(20 / 10); // 2

consolelog(20 % 10); // 0

  • 문자열 산술 연산자
    • consolelog("20" + "10"); // 2010  // 플러스만 문자열 이어준다.

consolelog("20" - "10"); // 10

consolelog("20" * "10"); // 200

consolelog("20" / "10"); // 2

consolelog("20" % "10"); // 0

  • 증감 연산자
    • var num = 10;

console.log(++num); // num+1후 num 출력 11

console.log(--num); // num-1후 num 출력  10

 

console.log(num++); // num+1 후 num 출력   10 / num 은 11

console.log(num--); // num-1 출력후 num  11  / num은 10

  • 비교 연산자
    • console.log( 10 == 20 ); // 값이 같다.   False

console.log(10 === 20 ); // 데이터 타입과 값이 같다  False

console.log(10 !== 20 ) ; // 값이 같지 않다. True

 

console.log(10 > 20 ); False

console.log( 10 >= 20 ); False

console.log ( 10 < 20); True

console.log ( 10 <= 20 );  True

  • == 과 === 의 차이
    • 10 == "10" // True
    • 10 === "10" // False
  • 논리 연산자
    • //앞 뒤 조건 모두 참인 경우에만 True 반환하는 AND 연산자

console.log( 10 === 10 && 20 === 30 ) // false

 

// 둘중 하나만 참이여도 true 반환하는  OR 연산자

console.log( 10 === 10 || 20 === 30 ); // True

[ 03 DOM 과 이벤트 소개 ]

  • 목차
    • 1 DOM 이란 ?
    • 2 자바 스크립트와 DOM
    • 3 Node 객체
    • 4 이벤트 (Event)


  • 01 Dom 이란?
    • 문서 객체 모델 ( Document Object Model ) 의 약자 
    • 객체 지향 모델로써 구조화된 문서를 표현하는 형식
    • 트리로 표현한다. 
    • 문서 객체 모델 ( Document Object Model  )

  • HTML 문서에 대한 인터페이스
    • DOM 은 XML 이나 HTML 문서의 프로그래밍 인터페이스 

DOM은 문서의 구조화된 표현 (structured representation) 을 제공하여 프로그래밍 언어가 문서구조, 스타일, 내용 등을 변경할 수 있도록 한다. 

  • DOM 의 종류
    • Core Dom 모든 문서 타입을 위한 DOM 모델
    • HTML DOM : HTML 문서를 위한 DOM 모델
    • XML DOM : 문서를 위한 DOM 모델
  • HTML DOM
    • HTML 문서를 조작하고 접근하는 표준화된 방법

모든 HTML 요소는 HTML DOM을 통해 접근가능 

  • XML DOM
    • XML 문서에 접근하여 그 문서를 다루는 표준화된 방법을 정의

모든 XML 요소는XML DOM 을 통해 접근 가능

  • Document 객체
    • Document 객체는 웹페이지를 의미한다.

웹페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다. 

  • Document 메소드
    • HTML 요소의 선택 
    • HTML 요소의 생성
    • HTML 이벤트 핸들러 추가
    • HTML 객체의 선택 
    • HTML 요소와 관련된 작업을 도와주는 다양한 메소드 제공 
  • HTML 요소의 선택
    • document.getElementById() 
      • 해당 아이디의 요소를 선택
    • document.getElementsByClassName()
      • 해당 클래스에 속한 요소를 선택
    • document.getElementsByName()
      • 해당 name 속성값을 가지는 요소를 선택
    • document.querySelectorAll()
      • 해당 선택자로 선택되는 요소를 모두 선택
    • document.querySelector()
      • 해당 선택자로 선택되는 요소를 1개선택
    • 새로운 HTML 요소를 선택하기 위해 제공되는 메소드
  • HTML 요소의 생성
    • HTML 요소를 생성하기 위해 제공되는 메소드
      • 메소드 : document.createElement()
        • 지정된 HTML 요소를 생성
      • 메소드 : document.write()
        • HTML 출력 스트림을 통해 텍스트를 출력
    • HTML 이벤트 핸들러 추가
      • HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 속성
        • 요소.onclick = function(){}
        • 마우스 클릭 이벤트와 연결된 이벤트 핸들러 
  • DOM의 트리 구조 ( HTML -> DOM ) 
    • <!DOCTYPE html>

<html>

<title> 자바스크립트 기초</title>

</head>

<body>

<article>

<header>header</header>

<section>

<header>header 1 </header>

section 1 

</section>

</article>

</body>

</html>


  • 위 html 구조를 아래처럼 트리로 표현할 수있다. 


  • 02 자바스크립트와 DOM
    • // HTML <li> 요소를 선택
    • DOM 요소의 선택

var selectedItem  = document.getElementsByTagName(“li:)


// 아이디가 “id”인 요소를 선택

var selectedItem = document.getElementById(“id”);


// 클래스가 “odd”인 요소를 선택 

var selectedItem = document.getElementsByClassName(“odd”);


// name 속성값이 “first”인 요소를 선택

var selectedItem = document.getElementsByName(“first”);



  • DOM 요소의 스타일 변경
    • // 아이디가 “even”인 요소를 선택

var selectedItem  = document.getElementById(“text”);


// 선택된 요소의 텍스트 색상을 변경

selectedItem.style.color = “red”

  • DOM 요소의 내용 변경 
    • // 아이디가 “even”인 요소를 선택

var str = document.getElementById(“text”);


// 선택된 요소의 내용을 변경

str.innerHTML = “요소의 내용을 바꿉니다”;



 

 

 

 

 

추천인 코드 : o6i4B3y95   :  앨리스트랙 참여 링크 

 

 

#엘리스트랙 #엘리스트랙후기 #온라인코딩부트캠프 #온라인코딩학원 #백엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #DOCKER #백엔드 #자바스프링 #스프링강의 #백엔드인강 #RESTAPI #스프링개발자

728x90