[ 자바스크립트 소개 ]
[ 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 출력 스트림을 통해 텍스트를 출력
- 메소드 : document.createElement()
- HTML 이벤트 핸들러 추가
- HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 속성
- 요소.onclick = function(){}
- 마우스 클릭 이벤트와 연결된 이벤트 핸들러
- HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 속성
- 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 #스프링개발자
'Elice --Cloud--Track > 4~7 주차' 카테고리의 다른 글
| 5주차 블로그 챌린지 -js (0) | 2023.12.24 |
|---|---|
| 4주차 블로그챌린지- 리눅스 기초 (1) (1) | 2023.12.17 |
| 4주차 블로그 챌린지-DB,SQL (0) | 2023.12.15 |
| 3주차 블로그 챌린지 - java - map (0) | 2023.12.10 |
| 3주차 블로그 챌린지 (0) | 2023.12.10 |
