본문 바로가기

Language76

[JavaScript] 이미지 스프라이트 이미지 스프라이트: 이미지가 50개정도 대량의 이미지가 되면, 한번에 화면에 뿌려주기 위해 작은 이미지를 하나로 합쳐서 좌표를 통해 보여주는 기술 ex) 가위바위보, 지뢰찾기에 사용할 수 있다. var 이미지좌표 = '0'; var 가위바위보 = { // 키: 속성 바위: '0' , 가위: '-142px', 보: '-284px' }; // Object.entries(가위바위보); // object.entries(객체) -> 객체를 배열로 바꿀 수 있다. function 컴퓨터의선택(이미지좌표){ return Object.entries(가위바위보).find(function(v){ //배열.find는 반복문이지만 원하는 것을 찾으면(return 이 true) 멈춘다. console.log(v); return.. 2020. 8. 31.
[JavaScript] 비동기, 동기 동기: 위에서부터 실행된다 비동기: 코드 상의 순서대로 실행되지 않는 코드를 의미. 실행되기 전까지는 언제 실행될지 모른다. 언제 실행될지 모르기 때문에 항상 대비를 해놔야한다. 사용자가 언제 이벤트를 발생할지 모르기 때문에 항상 대비를 해놔야한다. 동기방식 (Synchronous) 요청을 보낸 후 응답(=결과)를 받아야지만 다음 동작이 이루어지는 방식이다. 어떠한 일을 처리할 동안 다른 프로그램은 정지한다. 실제 cpu가 느려지는 것은 아니지만 시스템의 전체적인 효율이 저하된다고 할 수 있다. -> 요청과 결과가 한 자리에서 동시에 일어남 -> A노드와 B노드 사이의 작업 처리 단위(transaction)를 동시에 맞추겠다. 동기방식의 장점: 설계가 매우 간단하고 직관적이다. 동기방식의 단점: 결과가 .. 2020. 8. 30.
[JavaScript] Document document는 html과 js가 서로 호환이 안될때 호환을 도와주는 객체이다. document 객체를 통해 html과 서로 소통할 수 있으며, html의 태그 요소도 만들 수 있고 createElement('태그명') createElement('태그명')를 통해 만들어진 태그에 value도 넣을 수 있다. // window는 브라우저, document는 페이지(탭) // document는 html과 js의 번역 var body = document.body; var word = document.createElement('div'); // document 객체의 메서드를 사용해 HTML을 만들 수 있다. word.textContent = '민경'; document.body.append(word); var.. 2020. 8. 26.
[JavaScript] getElementById Document.getElementById() 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환한다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다. 매개변수: id 찾으려는 요소 ID. ID는 대소문자를 구분하는 문자열로, 문서 내에서 유일해야 합니다. 즉, 하나의 값은 하나의 요소만 사용할 수 있다. 반환값: 주어진 ID와 일치하는 DOM요소를 나타내는 Element 객체 문서 내에 주어진 ID가 없으면 null 어떤 글 blue red function changecolor(newColor){ var element = document.getElementById('para'); element.style.color = ne.. 2020. 8. 24.