2023년 05월 19일 수업 내용

국비 교육 내용 정리

2023년 05월 19일 수업 내용

jinpark1992 2023. 5. 19. 11:32

<자바 스크립트>

//JS 객체 생성 방법

//1)

//2)

//3)

//4) ES6 Class 기반 객체 생성 방식

class chart {

// 멤버 변수

// 생성자

constructor(width,height){

this.width = width;

this.height = height;

}

// 메소드

drawline(){

console.log("draw line");

}

const mychart = new chart(100,100);

mychart.drawline();

//1) 객체 리터별 방식 {} : 값을 넣어 주는 방식 제일 중요함!

// JS - 프로퍼티 키(key), 프로퍼티 값(value)

// java -필드(멤버변수),메서드(멤버함수)

// python - 속성(attribute,변수), 메소드

// CSS - 속성(property), 값

// HTML - 속성(attribute), 값

const user = {

//속성

age : 30,

//메소드

getData: function(){ //유형1

return 1 + 2;

getName(){ //유형2

console.log(this.name);

}

console.log(typeof user); // object

//객체 프로퍼티 값 가져오기

console.log(user.name);

console.log(user.age);

console.log(user.getData());

//빈 객체 선언 후, 프로퍼티와 메소드 추가

const emptyobj = {};

emptyobj.name = "Aleyna";

emptyobj.age = "25";

emptyobj.getData = function(){

return 4 * 100;

}

console.log(emptyobj);

console.log(typeof emptyobt);

console.log(emptyobj.name, emptyobj.age,emptyobj.getData());

// 객체 안에 객체 생성 가능

let user ={

age: 20,

getData: function(){

return "사용자";

details:{

hobby: 'coding',

majar: 'security',

getName: function(name){

return name;

}

console.log(user);

console.log(user.name,user.age,user.getData());

console.log(user.details);

console.log(user.details.hobby);

console.log(user.details.getName('Jake'));

// 객체 리터럴과 this 키워드(1)

let user = {

age: 40,

details: {

hobby: 'swimming',

major: 'law',

getHobby: function(){

return this.hobby;

}

console.group(user.details.getHobby());

// 객체 리터럴과 this 키워드(2)

let user = {

firstName: "Mike",

lastName: "Jagger",

age: 40,

details: {

hobby: 'swimming',

major: 'law',

getHobby: function(){

return this.hobby;

}

console.group(user.details.getHobby());

console.log(user.firstName);

console.log(user['firstName']);

console.log(user['first + Name']);

- 어제 내용해서 플러스 한 내용임

// for-of

// 배열(Array),string,map 등 iterable(반복 가능한) 객체에서 사용가능한 반복문

const brands = ["애플","구글","페이스북","아마존","삼성전자"];

for (let brand of brands){

console.log(brand);

}

let language = "Javascript"

for(let c of language){

console.log(c);

}

let user = {

firstName: "Mike",

lastName:"Jagger",

age: 40

}

// for(let p of user){

// // object는 iterable 하지 않기 때문에 for-of 사용 x

// }

- for in 방식 설명

// for-in

// 배열,객체(object)에 사용할 수 있는 반복문

const brands = ["애플","구글","페이스북","아마존","삼성전자"];

for(let brand in brands){

console.log(brand);

}

const person = {

firstName: "jinsu",

lastNmae:"park",

age: 30

}

for(let key in person){

console.log(key);

console.log(person[key]);

}

- for문의 기본 구조~ ( 여기서 핵심은 for each)

// for문의 기본 구조

// forEach( 메서드)

// 반환값이 없다. 단순 for문과 같이 작동한다.

const numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

console.log(numbers[0]);

console.log(numbers[1]);

console.log(numbers[2]);

console.log(numbers[3]);

console.log(numbers[4]);

console.log(numbers);

for(let i = 0; i<numbers.length; i++){ // 개수 모르면 length로 해주면 됨!

console.log(numbers[i]);

}

// function print(element){

// console.log(element);

// };

// numbers.forEach(print);

numbers.forEach(function(el){

console.log(el);

});

numbers.forEach(function(el){ // 2의 배수 만들

if (el%2 == 0){

console.log(el);

}

})

const movies = [

{

title:'Amadeus',

score: 99

{

title:'Alien',

score: 99

{

title:'SquidGame',

score: 99

{

title:'Stand By Me',

score: 99

]

movies.forEach(function(movie){

console.log(movie);

}

)

- map() 이라는 함수의 기능 정리

// map()

// 반환값을 배열에 담아 반환한다.

// map() 에는 return문이 무조건 있어야함

// 새로운 배열이 만들어짐

const numbers =[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

console.log(numbers);

const doubles = numbers.map(function (num){

return num * 2;

});

console.log(doubles);

const movies = [

{

title:'Amadeus',

score: 99

{

title:'Alien',

score: 99

{

title:'SquidGame',

score: 99

{

title:'Stand By Me',

score: 99

]

const titles = movies.map(function(movie){

return movie.title;

});

console.log(titles);

- 화살표 함수!

// 화살표 함수(arrow,function)

//() => {} vs. function (){}

const double = function(x){ // 익명 함수(함수 표현식)

return x * 2;

}

console.log(`double:`,double(7));

const arrow = (x) => {

console.log(`arrow 복문 실행문`)

return x * 2;

}

console.log(`arrow`,arrow(7));

const arrow2 = (x) => x * 2; // 블록 안 실행문이 1개일때 return 생략 가능

console.log(`arrow2`,arrow2(7));

const arrow3 = x => x * 2;

console.log(`arrow3:`,arrow3(7));

const arrow4 = x => { return x * 2;}

console.log(`arrow4`,arrow4(7));

// null, undefined 배열, 객체 다 올수 있음

const arrow5 = x => 1234;

console.log(`arrow5`,arrow5(7));

const arrow6 = x => {

return {name:`Arnie`}

}

console.log(`arrow6`,arrow6(7));

//객체 데이터는 화살표 함수의 중괄호와 같으므로 그냥은 인식이 안됨

//객체 데이터를 반환할 때는 소괄호()로 감싸줘야 함 (return 문 없는 경우)

const objVal = x => ({

})

console.log('objVal', objVal());

- 필터 함수! (잘못 적은 부분이 있음 .. .찾아봐야함)

//filter()

//반환값을 배열에 담는다.(return문이 있어야함)

//조건에 충족하는(true) 아이템만 배열에 담아 반환한다.

const numbers =[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

console.log(numbers);

const lt10 =numbers.filter(function(num){

return num < 10;

});

console.log(lt10);

const nums = numbers.filter(num => {

return num < 10;

});

console.log(nums);

console.log(doubles);

const movies = [

{

title:'Amadeus',

score: 99

{

title:'Alien',

score: 99

{

title:'SquidGame',

score: 99

{

title:'Stand By Me',

score: 99

{

title:'Shinsaegae',

score: 70

}

]

const goodmovies = movies.filter(m => m.score >=90);

console.log(goodmovies);

- some 함수

// some()

// 조건에 충족하는 아이템이 하나라도 있으면 true 반환, 아니면 false 반환

const ceoList = [

{name: "Larry page", age: 23, ceo: true},

{name: "Tim cook", age: 40, ceo: true},

{name: "Elon Musk", age: 55, ceo: false}

];

let data = ceoList.some(item => item.age>40);

console.log(data);

//every()

// 모든 배열에 아이템이 조건을 충족하면 true 반환, 아니면 false 반환

//find()

//조건에 충족하는 아이템 하나만 반환 (여러 개라고 하면 첫번째것만 반환)

//조건에 충족하는 아이템의 인덱스값 반환(여러 개라면 첫번째 아이템의 인덱스 번호만 반환)

<math 이 무엇인가?!>

// Math

//round() 반올림 처리

console.log(Math.round(4.9)); //5

console.log(Math.round(4.2)); //4

console.log(Math.round(4.9)); //5

console.log(Math.round(-4.2)); //-4

// ceil() 무조건 올림 처리

console.log(Math.ceil(4.4)); //5

// floor()무조건 내림 처리

console.log(Math.floor(4.8));

// trunc() 소수 부분은 무조건 버리고 정수 부분만 반환

console.log(Math.trunc(4.8)); //4

// abs() 절대값

console.log(Math.abs(-4)); //4

// random(): 0.0 이상 1.0 미만

console.log(Math.random());

// 0에서 100 사이의 정수

console.log(Math.floor(Math.random() * 100)+1);

console.log(Math.floor(Math.random() * 101));

<String 객체>

//String 객체

//length

let txt = "abcdefgi"

console.log(txt.length);

//split()

const tags ="키보드, 기계식, 블루투스";

const arr = tags.split(",");

console.log(arr);

console.log(arr.length-1);

let birthDate = "1990-11-11";

let arr2 = birthDate.split("-");

console.log(arr2);

<DOM 객체> : 뜯어보기

// window 객체: 전역객체 (Global object)

// DOM 객체 : document,

// BOM 객체 : navigator, screen, location ...

// JS 내장 객체:object, String, Array, Math, ....

//DOM (Document obect Model)

console.log(document);

console.log(typeof document); //object

console.dir(document);

document.getElementById('title')

const title = document.getElementById('title');

// window

window.console.log("hi");

console.log("hi");

window.console.log(window);

console.log(window.innerWidth)

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box{

border: 1px solid #000;

}

</style>

</head>

<body>

const boxEls = document.querySelectorAll('.box');

boxEls.forEach(function(boxEl, index){

boxEl.classList.add(`order-${index+1}`);

console.log(index, boxEl);

});

const boxEl = document.querySelector('.box');

console.log(boxEl.textContent);

boxEl.textContent = 'Hello!';

console.log(boxEl.textContent);

</script>

</body>

</html>

//id로 선택하기

const myTag = document.getElementById('#number');

console.log(myTag);

const myTag2 = document.getElementById('btns');

console.log(myTag2);

// class로 선택하기

const myTags = document.getElementsByClassName('color-btn');

console.log(myTags);

console.log(myTags[1]);

console.log(myTags.length);

for(let tag of myTags){

console.log(tag);

}

const myTags2 = document.getElementsByClassName('red');

console.log(myTags2);

console.log(myTags[0]);

const myTags3 = document.getElementsByClassName('white');

console.log(myTags3 === null);

console.log(myTags3.length);

// CSS 선택자로 선택하기

// qurysecleter 만 . 을 씀!!

const myTag = document.querySelector('#number');

console.log(myTag);

const myTag2 = document.getElementById('number');

console.log(myTag2);

const myTag3 = document.querySelector('.color-btn');

console.log(myTag3); // 해당하는 제일 첫번째거를 선택함

const myTag4 = document.querySelectorAll('.color-btn');

console.log(myTag4); // 그래서 전부 출력하는 방법이 있음(대다수 이걸 사용함~)

const myTag5 = document.getElementsByClassName('color-btn');

console.log(myTag5);

* 이벤트 핸들링

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#number { font-size: 100px;}

.color-btn{

width: 30px;

height: 30px;

margin-top: 15px;

cursor: pointer;

}

.red{

background-color: red;

}

.orange{

background: orange;

}

.yellow{

background-color: yellow;

}

.green{

background-color: green;

}

.blue{

background-color: blue;

}

.peru{

background-color: peru;

}

.purple{

background-color: purple;

}

.black{

background-color: black;

}

</style>

</head>

<body>

<h1 id="title">DOM(Document object Model)</h1>

<div>

</div>

<div>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#number { font-size: 100px;}

.color-btn{

width: 30px;

height: 30px;

margin-top: 15px;

cursor: pointer;

}

.red{

background-color: red;

}

.orange{

background: orange;

}

.yellow{

background-color: yellow;

}

.green{

background-color: green;

}

.blue{

background-color: blue;

}

.peru{

background-color: peru;

}

.purple{

background-color: purple;

}

.black{

background-color: black;

}

</style>

</head>

<body>

<h1 id="title">DOM(Document object Model)</h1>

<div>

</div>

<div>

</div>

</body>

</html>

// 이벤트 핸들링 : 이거 재밌겠다~

// 1) selecting

const numberTag = document.getElementById('number');

const minusbtn = document.querySelector('#decrease');

let number = numberTag.textContent;

// 2) 이벤트 핸들링

minusbtn.onclick = function() {

number--;

numberTag.textContent = number;

console.log('숫자가 1만큼 감소됐습니다.');

}

function increase() {

number++;

numberTag.textContent = number;

console.log('숫자가 1만큼 증가됐습니다.');

}

const colorBtns = document.getElementsByClassName('color-btn');

for(let btn of colorBtns){

btn.onclick =function(){

numberTag.style.color = btn.dataset.color;

}

저작자표시