거인의 코딩일지

자 이제 요소 접근 방법을 사용해서 간단하게 카카오톡을 만들어보자! 우선 html 파일 head 태그 안에 style 을 지정해줘야하는데 스타일 지정은 위의 사진처럼 지정해 주자!(카카오톡 색과 동일!) 그 다음 html 파일 body태그 안에서 코드를 작성해줄껀데 코드는 아래 사진과 같다! 이렇게 작성해준 뒤 js파일을 만든뒤 js 코드를 작성하여 적용을 시켜보자 코드는 아래 사진과 같다 그 뒤에 라이브 서버를 열어서 확인해보면 이렇게 작성되는것을 볼수 있다!! js파일에서 입력한 코드처럼 엔터를 누르면 메시지가 입력되고 계속 작성해도 스크롤이 따라가서 카카오톡 처럼 보인다!!

DOM(Document Object Model) 이란? 웹 문서(HTML)의 모든 요소를 객체 형식으로 표현하는 방법(문서 내 특정 요소에 접근하는 방법을 제공) DOM을 이용한 요소 접근방법 id 속성값으로 접근하기 document.getElementById("id 속성값"); class 속성값으로 접근하기 document.getElementByClassName("class 속성값") name 속성값으로 접근하기 document.getElementByName("name 속성값") tag name으로 접근하기 document.getElementByTagName("태그명") css 선택자를 이용해서 접근하기 document.querySelector("#test"); 단일요소를 선택하는 방법 만약 선택된 요..

innerText응용 이제 innerText를 사용하여 몇가지 응용을 할것이다! 그전에 알아둬야 하는것은 window.confirm 과 window.prompt 이다 window.confirm 이란? 질문에 대한 "예"/"아니오" 결과를 얻고자 할 떄 사용하는 대화상자이다 - 확인버튼을 누르면 true 값이 반환되고 - 취소버튼을 누르면 false 값이 반환된다. window.prompt 이란? 텍스트를 작성할 수 있는 대화상자가 나타나는데 - 확인버튼을 누르면 입력한 값을 반환하고 - 취소버튼을 누르면 null값을 반환한다. 우선!! window.confirm를 사용해서 innerText를 응용해보자! 이것도 마찬가지로 html문서를 먼저 작성해주자 위의 사진처럼 코드를 작성해주었으면 이제 아래 사진처..

innerText 자바스크립트에서 요소에 작성된 내용만을 읽어들이거나 변경하는 속성 - 내용을 읽어올 때 요소의 태그, 속성은 무시함 - 내용을 변경할 때 대입되는 태그는 문자열로 해석됨(html 태그로 해석 X) 간단한 예를 들기위해 innerHTML 처럼 버튼을 만들어보자 html파일에 코드는 위와 같은 사진처럼 작성 후 아래와 같이 js파일에서 코드를 작성해주면 된다. const t2라는 변수에 test2 id 를 저장해 두고 함수 안에 넣어주면 된다. innerText로 읽어오기 버튼을 누르면 F12를 누른뒤 콘솔창을 보면 내용을 얻어와 콘솔창에 나타나고 innerText로 변경하기 버튼을 누르면 html코드가 적용되지 않고 그대로 문자로 나타나게 된다. 라이브 서버를 켜보면 이렇게 나타나는데 이..

innerHTML 응용에서 해볼것은! 위에 사진처럼 하늘색 박스 안에 노란색박스를 추가하기 버튼을 누르면 아래 사진처럼 늘어나는 것을 해볼 것이다. 그렇다면 우선 html파일에서 head 태그 안에 style 태그를 만들어주고 그 안에서 스타일을 지정한 뒤 코드를 작성해주면 된다. 코드는 위와 같은 사진처럼 작성해주면 되는데 버튼에다가 onclick 이벤트를 걸었을때 add() 함수가 실행되게 작성한뒤 큰 박스를 나타내는 div 태그를 작성한후 그 안에 div 태그를 하나더 작성해주고 스타일에서 지정한것처럼 id or class 를 달아주고 js 파일을 만들어야 한다 js 코드는 이렇게 작성해주면 되는데 변수를 지정해두고 그 안에 저장후 변수명 += 작성코드 이렇게 작성하면 전에 작성한 코드가 사라지지 ..

innerHTML 자바 스크립트에서 요소 전체를 읽어들이거나 변경하는 속성 내용을 읽어올 때 태그 + 속성 + 내용을 모두 포함함 내용을 변경할 때 태그는 HTML 요소로 해석됨 위 사진처럼 html 문서에 작성해준뒤 js파일에서 아래와 같이 만들어준다면 위와같이 나타나게 되는데 innerHTML로 변경하기 버튼을 눌러보면 js에서 작성한대로 위와 같은 사진처럼 변하게 되는데 색이 글자 색이 빨간이유는 html문서 내부에 style을 주어 그런것이다.

스크립트(Script) 언어 기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도의 언어. 별도의 컴파일을 진행하지 않고 인터프리터(interpreter)를 이용하여 소스코드를 한 줄씩 읽어 바로 실행 ▶ 컴파일에 소요되는 시간이 없음, 대신! 프로그램 실행 시간이 느림 Javascript 란? 웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체 지향 프로그래밍 언어 ECMA Script 표준을 따르는 대표적인 웹 기술. 자바스크립트 작성 방법 브라우저 콘솔에 직접작성 태그에 직접 JS 코드를 작성 (inline) html 내부에 script 태그를 이용하여 작성(internal) html 외부에 파일(.js)을 이요하여 작성(external) 위의 코드들 처럼 js를 나타낼수 있다.