국비지원 JAVA(자바) 프로그래밍(자바스크립트)

250x250

Notice

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

개린이 개발노트

국비지원 JAVA(자바) 프로그래밍(자바스크립트) 본문

국비지원(국비교육) 웹 개발자 과정

국비지원 JAVA(자바) 프로그래밍(자바스크립트)

개린이9999 2022. 12. 23. 09:15

728x90

*국비지원 JAVA에 관심있으신 분들은 댓글남겨주시면 제가 아는 한 상세히 답변드리겠습니다*

let user={
  name:'kim',
  age: 30,
};

user.score=70;

alert(user.score);

user['age']=20; // user.age =20

console.log(user.age);

delete user['name']
console.log(user.name);

해당하는 내용이 있는 지 없는지 확인하는 in

있으면 true, 없으면 false

let user={
  name:'kim',
  age: 30,
};

console.log('name' in user);
console.log('asd' in user);

name은 있으니까 true

asd는 없으니까 false로 출력

반복문 형태

object 생성

let user={
  name:'kim',
  age: 30,
};

user라는 object 안에 있는 key값 모두 출력 ↓

for(let key in user){
  console.log(key);
}

user라는 object안에 있는 value 값 출력하려면 ↓

for(let key in user){
  console.log(user[key]);
}

*키가 문자로 작성된 경우에는 순서대로 나오지만

키가 숫자로 작성된 경우에는 정렬돼서 나온다!

함수 / 메서드

오브젝트 안에 함수가 있으면 메서드라고 함

let user={
  name:'kim',
  age: 30,
};

user.msg = function() {
  console.log('ㅎㅇ');
};

user.msg();

함수 호출 할 때 주의사항! msg();로 호출하면안됨. user 안에 메서드(함수)를 만든것이기때문에 user. 을 반드시

찍어줘야함!

let user={
  name:'kim',
  age: 30,
  msg: function(){
    console.log('gd')
  }
};

이거랑 위에꺼랑 같은거

let user={
  name:'kim',
  age: 30,
};

function msg() {
  console.log('ㅎㅇ')
}

이런식으로 오브젝트 밑에 다른 함수가 있는데 그 함수를 오브젝트안으로 넣고싶을떈?

user.msg=msg;

위처럼 만 추가해주면 해당 오브젝트안에 함수를 넣을수 있다!

user.a=msg; 이름달라도됨

자바스크립트의 this

let user={
  name:'kim',
  age: 30,
  msg() {
    console.log(this.name)
  }
};

user.msg();

->user라는 오브젝트 안에있는 name안에 들어있는 'kim' 확인 가능

this이해하기, this 활용

let user={
  name:'kim',
  age: 30,
  msg() {
    console.log(this.name)
  }
};

let aa= user;
user=null;
aa.msg();

    console.log(this.name)

console.log(user.name)-> console.log(this.name) 으로 쓰는게 바람직함

let a= {
  name:'kim',
};

let b= {
  name:'park',
};

function msg() {
  console.log(this.name);
}


a.func = msg;
b.func = msg;

a.func();
b.func();

function msg 에 콘솔로그를 this.name이라고 했기때문에

a에 대한 것, b에 대한것 모두 정상출력쓰!

복사 (대입연산자 부분)

let a= {
  name:'kim',
};

let b=a;

a.name = 'park;'

console.log(b.name);

결과값 이렇게 나오는 이유

100번지를 바라보고 있는 name이 kim 에서 park으로 바뀐 것임

let a= {
  name:'kim',
};

let b=a;

console.log(a===b);

true 값출력

let a= {
  name:'kim',
};
let b= {
  name:'kim',
};

console.log(a===b);

false 값 나오는 이유? ↓

for(let key in a) {
  b[key]=a[key] 
}

b의 키값에 a의 키값을 넣어라

let a= {
  name:'kim',
  age: 30,
};
let b= {};

for(let key in a) {
  b[key]=a[key] 
}

console.log(b);

Object.assign

let a= {
  name:'kim',
  age: 30,
};

let b= Object.assign({},a);

a.name='park';
console.log(b);

let b= Object.assign({},a);

===

for(let key in a) {
  b[key]=a[key]
}

위에 두개가 같은 뜻임

DOM 자바스크립트에서 제일 중요한 부분

(document object model)

자바스크립트는 -> html을 접근

자바스크립트에서 html 접근 가능

document.body.style.background='red';

<!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>Document</title>
</head>
<body>


 <div>첫번째</div>

 <ul>
  <li>li태그</li>
 </ul>

 <div>마지막</div>

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

  <div>스크립트 아래부분</div>
</body>
</html>

 for(let i =0; i<document.body.childNodes.length;i++){
  console.log(document.body.childNodes[i]);
 }

스크립트 아래부분이 안읽힌것 확인가능

문서안에 있는 id를 찾아라 ↓

document.getElementById

검색한 id 'elem'을 a라는 변수에 저장↓

let a=document.getElementById ('elem')

a안에 있는 백그라운드 칼라 red로 바꾸기 ↓(지향함)

let a=document.getElementById ('elem');

a.style.background='red';

한번에 bg 칼라 red로 변경하기 ↓ (지양함)

document.getElementById('elem').style.background='red';

*주의할 점 변수안에 저장을 시키고 작업하고 접근시 다음 작업할 때 변수 이름을 똑같은 것으로 지정하면 문제가 생김.

(확장프로그램으로 자동으로 처리 가능)

let a = document.querySelector

querySelector는 id,class, 등 전부 찾아줌

let a = document.querySelectorAll('ul> li');

for(let i of a) {
console.log(i.innerHTML);
};

let i in이 아니라 let i of 사용

querySelectorAll로 반복문 이용해서 전부 확인 가능

자바스크립트로 요소변경

let a = document.querySelectorAll('ul> li');

for(let i of a) {
console.log(i.innerHTML);
};

a[0].innerHTML ='다른거';

위 처럼 요소변경 확인 가능

document.querySelectorAll('ul')[0].style.background='red'

여기서 [0] 은 배열방 번호로 생각하면 쉬움

이런식으로도 가능

버튼에 onclick 이라는 이벤트 속성을 넣어서 사용. 클릭했을 때

function show() {
  document.getElementById('ab').style.display='block';
}

function hide() {
  document.getElementById('ab').style.display='none';
}

-> 코드 리팩토링하기

<!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>알림창</title>
  <link rel="stylesheet" href="알림창.css">
</head>
<body>
<div class="alert-box" id="ab">
  알림창
  <button onclick="showHide('none')">x</button>
</div>
<button onclick="showHide('block')">알림창 표시</button>
<script src="알림창.js"></script>
</body>
</html>

function showHide(dp) {
  document.getElementById('ab').style.display=dp;
}

↓ 방식으로 제일 많이 작업함

function showHide(dp) {
  document.querySelectorAll('.alert-box')[0].style.display=dp;
}

<!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>알림창</title>
  <link rel="stylesheet" href="알림창.css">
</head>
<body>
  <div class="alert-box" id="ab">
    알림창
    <button onclick="alertBox()">X</button>
  </div>
  
  <button onclick="alertBox('첫 번째')">알림창1 표시</button>
  <button onclick="alertBox('두 번째')">알림창2 표시</button>
  <button onclick="alertBox('세 번째')">알림창3 표시</button>
<script src="알림창.js"></script>
</body>
</html>

.alert-box{
  background: aqua;
  padding: 20px;
  border-radius: 10px;

  display: none;
}

function alertBox(ar) {
  document.querySelector('div').innerHTML = ar;
  document.getElementById('ab').style.display = 'block';
}

jquery-> 자바스크립트의 라이브러리

uncompressed ->띄어쓰기 같은 거 포함된 풀버젼

minified-> 압축된 것

복사

자바스크립트 위로 복사

기본모양표시가 $('선택자') 달러표시 + '선택자'

제이쿼리는 선택자있으면 한방에 다 선택됨.

만약 제이쿼리에서도 하나만 선택해서 넣고싶다면 .eq(0)을 선택

$('.box').html('hi');
$('.box').eq(0).html('hihihihihi');


function alertBox(text) {
//document.getElementById('ab').innerHTML = ar;
///document.getElementById('ab').style.display = 'block';

//$('선택자') 제이쿼리 문법
$('.alert-box').html(text);
$('.alert-box').css('display', 'block');

//자바스크립트 문법으로 작업한 (위에 제이쿼리 문법과 동일한 기능)
/*
document.querySelectorAll('.alert-box')[0].innerHTML = text;
document.querySelectorAll('.alert-box')[0].style.display = 'block';
*/
}

node js 다운로드

설치한 후

컨트롤 + ` 로 터미널창 띄운다.

npm init 을 선택후

PS C:\Users\user\Desktop\자바스크릡트\20221223> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible de
faults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (20221223)
version: (1.0.0)
description:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\user\Desktop\자바스크릡트\20221223\packag
e.json:

{
  "name": "20221223",
  "version": "1.0.0",
  "main": "jquery.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

Is this OK? (yes) yes

yes가 나올 떄까지 치고

npm install @types/jquery --save 을 입력한다

그러면

added 2 packages, and audited 3 packages in 494ms

found 0 vulnerabilities
PS C:\Users\user\Desktop\자바스크릡트\20221223>

이러면서 설치완성!

.alert-box{
  background: aqua;
  padding: 20px;
  border-radius: 10px;
 
  display: none;
}

<!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>jquery</title>
  <link rel="stylesheet" href="jquery.css">
</head>
<body>
 
  <div class="alert-box" id="ab1">a</div>
  <div class="alert-box" id="ab2">b</div>
  <div class="alert-box" id="ab3">c</div>
  
  <button onclick="show('ab1')">알림창1 표시</button>
  <button onclick="show('ab2')">알림창2 표시</button>
  <button onclick="show('ab3')">알림창3 표시</button>

<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="jquery.js"></script>
</body>
</html>

1번방법

function show(id) {
document.getElementById(id).style.display='block';
}

2번방법 -> `` 임을 주의! '' 아님!

function show(id) {
  document.querySelectorAll(`#${id}`).style.display='block';
  }

3번방법 jquery 방법

function show(id) {
  e.display = 'block'
  $(`#${id}`).css('display', 'block');

}

만들기!

1번방법

<!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>jquery</title>
  <link rel="stylesheet" href="jquery.css">
</head>
<body>
 
  <div class="alert-box" id="ab1">
    첫번째 박스 <button onclick="hide('ab1')">x</button>
  </div>
  <div class="alert-box" id="ab2">
    두번째 박스 <button onclick="hide('ab2')">x</button>
  </div>
  <div class="alert-box" id="ab3">
    세번째 박스 <button onclick="hide('ab3')">x</button>
  </div>
  
  <button onclick="show('ab1')">알림창1 표시</button>
  <button onclick="show('ab2')">알림창2 표시</button>
  <button onclick="show('ab3')">알림창3 표시</button>

<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="jquery.js"></script>
</body>
</html>

function show(id) {
  $(`#${id}`).css('display', 'block');
}

function hide(id){
  document.querySelectorAll(`#`+id)[0].style.display = 'none';
}

2번방법

function show(id) {
  $(`#${id}`).css('display', 'block');
}

function hide(id){
 $('#'+id).eq(0).css('display','none');
}

3번방법 - 리팩토링

함수명 바꿨고(showHide로) 매개변수(dp) 추가

html 수정

<!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>jquery</title>
  <link rel="stylesheet" href="jquery.css">
</head>
<body>
 
  <div class="alert-box" id="ab1">
    첫번째 박스 <button onclick="showHide('ab1','none')">x</button>
  </div>
  <div class="alert-box" id="ab2">
    두번째 박스 <button onclick="showHide('ab2','none')">x</button>
  </div>
  <div class="alert-box" id="ab3">
    세번째 박스 <button onclick="showHide('ab3','none')">x</button>
  </div>
  
  <button onclick="showHide('ab1','block')">알림창1 표시</button>
  <button onclick="showHide('ab2','block')">알림창2 표시</button>
  <button onclick="showHide('ab3','block')">알림창3 표시</button>

<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="jquery.js"></script>
</body>
</html>

자바스크립트 수정

function showHide(id,dp) {
  $(`#${id}`).css('display', dp);
}

$(`#${id}`) ->

선택자가 들어가는 공간

on/off 버튼 누르면 보였다 안보였다 하기

728x90

'국비지원(국비교육) 웹 개발자 과정' 카테고리의 다른 글

국비지원 JAVA(자바) 프로그래밍(자바스크립트) (0)	2022.12.27
국비지원 JAVA(자바) 프로그래밍(자바스크립트,JSON) (0)	2022.12.26
국비지원 JAVA(자바) 프로그래밍 (자바스크립트) (2)	2022.12.22
국비지원 JAVA(자바) 프로그래밍 (0)	2022.12.21
국비지원 JAVA(자바) 프로그래밍 (css CSS 인라인, 시맨틱 태그) (0)	2022.12.20

'국비지원(국비교육) 웹 개발자 과정' Related Articles

개린이 개발노트

국비지원 JAVA(자바) 프로그래밍(자바스크립트) 본문

국비지원 JAVA(자바) 프로그래밍(자바스크립트)

'국비지원(국비교육) 웹 개발자 과정' 카테고리의 다른 글

티스토리툴바