반응형 앱 만들기/JavaScript study38 JS document.getElementbyID().innerHTML 자바스크립트 document.getElementByID().innerHTML 속성에 대해서 알아봅니다. 먼저, document.getElementById("id") 메소드를 사용하면 인자 값인 "id" 를 id 로 가진 HTML 요소에 접근이 가능합니다. 그렇게 접근한 다음 .innerHTML property(값)을 통해서 해당 HTML 요소의 값을 수정하는 것 입니다. 이 방법이 일반적으로 자바스크립트를 사용해서 HTML 의 요소에 접근하는 방법 중 하나 입니다. 예제를 만들어 봅니다. test demo 라는 아이디를 가진 p 요소에 접근하여 해당 값을 "Hello Happy day!" 라고 바꾸어 주는 코드 입니다. 참고로, 리스트를 가지는 요소에 접근하여 리스트 값을 얻어 올수도 있습니다. 예제를 .. 2023. 8. 10. JS 함수 사용 방법 자바스크립트 함수를 만들고 사용하는 방법 입니다. 함수를 만들면, 코드를 재사용하기에도 유지보수 하기에도 편리하고 효율적이기에 필수적으로 사용되고 있습니다. JS 함수 를 만드는 Syntax 을 살펴봅니다. 함수 Syntax 1. function 이라는 키워드를 제일 앞에 적어줍니다. (C,Java 등의 언어와는 가장 다른 차이점인거 같습니다 ^^) 2. 그 다음 함수에 사용될 이름을 적어준다 3. () 괄호 안에 인수 값을 적습니다. 인수들은 함수내에서 지역변수 로 사용됩니다. - 즉, 함수가 시작될때 생성되고, 함수가 마칠때 소멸 됩니다. 4. { } 안에 함수에서 실행될 코드를 코딩합니다. 5. 때에 따라 return 키워드를 사용해도 함수를 호출한 곳으로 return 에서 계산된 값을 돌려줍니다... 2023. 8. 8. JS Object 선언 하는 방법 자바 스크립트의 오브젝트 도 하나의 변수 입니다. 하지만 오브젝트는 많은 값들을 담을 수 있다는 차이점이 있습니다. 변수와 같이 먼저 선언을 하고 property ={ } 기호 사이에 여러 데이형을 넣습니다. 하나의 값은 "변수명 : 변수 값" 으로 한쌍을 이룹니다. 이를 자바스크립트 에서는 properties 라고 부릅니다. 프로퍼티 에는 모든 데이터 Type 이 올 수 있습니다. // Create an object: const person = { //Property : Property Value firstName: "John", lastName: "Smith", age: 30, eyeColor: "gray", language : ["English", "Korea", "Spanish"] }; 위 예제에.. 2023. 8. 7. 자바 스크립트 != 비교 연산자 자바스크립트 비교 연산자 중!= 를 알아봅니다. not equal 로 불리는!= 연산자는 값이 다를 경우 true 결과값을 보여 줍니다. 위의 경우 X가 5일 경우 비교대상 오른쪽 변수 값이 8이라면 결과는 true 입니다. 예제를 만들어 봅니다. JavaScript Comparison The != Operator Assign 5 to x, and display the value of the comparison (x != 8). 해당 결과는, true입니다. 즉, 값이 같지 않다는 것이 참이라는 의미입니다. X 가 5라면 결과는 false 가 나옵니다. 값이 같기 때문이죠. 값뿐만 아니라 데이터 타입까지 비교가 필요하다면!== 연산자가 필요합니다. !== 연산자는 다음 포스팅에서 정리해 봅니다. 감사합니다. 2023. 7. 30. 자바스크립트 비교연산자(==) 자바스크립트 비교연산자(===) 자바스크립트의 비교연산자 중 === 의 쓰임새를 알아봅니다. === 좌 우 값과 타입이 같은지를 구별할 때 사용됩니다. 쉬운 예로, X 변수에 5가 대입되어 있다면 5와 문자"5"는 같지 않기에 false라는 soo0100.tistory.com 지난 시간 자바스크립트 비교연산자 중 equal value and type을 알아보았습니다. 이번 시간에는 equal to == 입니다. C 나 Java 및 타 언어에서 주로 많이 사용되는 방식입니다. X 가 5라는 가정 아래, == 비교 연산자를 사용하면 결과 값은 false 가 나옵니다. 비교 값이 5라면 당연히 결과는 true입니다. 해당 예제를 만들어 보면 하기와 같습니다. JavaScript Operators Compari.. 2023. 7. 29. 자바스크립트 비교연산자(===) 자바스크립트의 비교연산자 중 === 의 쓰임새를 알아봅니다. === 좌 우 값과 타입이 같은지를 구별할 때 사용됩니다. 쉬운 예로, X 변수에 5가 대입되어 있다면 5와 문자"5"는 같지 않기에 false라는 결과 값이 나옵니다. C, JAVA 와는 조금 다른 형태를 취하고 있지만, "데이형 까지 비교해 주는구나" 하고 이해하면 됩니다. 예제를 만들어 봅니다. X=5 를 입력하고 그 값을 문자 "5"와 비교하는 코드입니다. JavaScript Operators Comparison Assign 5 to x, and display the value of the comparison (x === "5"). 결과는, false 입니다. 스크립트 코드가 X===5로 수정된다면, 당연히 값과 데이터 타입도 숫자형으로.. 2023. 7. 28. 브라우저 자바스크립트 활용하기 자바스크립트를 배워서 멋진 프로그램을 만드는 것도 좋겠지만 브라우저를 통해서도 자바스크립트를 활용할 수 있답니다. 단순한 계산기 혹은 글자 수 세기 등도 별도의 앱을 띄우지 않고 브라우저 창에서도 바로 확인이 가능합니다. 이게 가능한 이유는 우리가 사용하는 브라우저들은 기본적으로 자바스크립트 엔진을 모두 포함하고 있기 때문이죠. 그럼 계산기 기능부터 사용해 볼까요? 구글 크롬브라우저를 기준으로 설명하겠습니다. 1. 계산기 브라우저가 열린 상태에서 F12를 누릅니다. 그러면, 브라우저의 오른쪽에 개발자 도구 창이 나타납니다. 개발자 도구에서 콘솔 탭으로 이동합니다. 오른쪽 콘솔 창에는 커서가 깜빡이고 있죠. 바로 여기서 자바스크립트 명령을 기다리고 있는 겁니다. 사칙연산 등 계산하고 싶은 수치값들을 입력해.. 2023. 7. 27. 자바스크립트 HTML DOM 이란 HTML DOM을 사용하면 자바스크립트가 HTML 웹 문서의 모든 요소에 접근 및 수정 이 가능하기에 정적인 웹 문서를 동적인 웹문서로 바꿀 수 있습니다. HTML DOM ( Document Object Model) 은 하나의 웹 페이지가 브라우저에서 로딩될 때 브라우저에 의해서 만들어지며 브라우저가 해당 웹페이지에서 사용할 수 있는 DOM 오브젝트를 생성한다고 이해하면 쉽습니다. 만들어진 오브젝트를 통해서 우리는 손쉽게 HTML 요소에 접근하여 CSS 스타일 및 이벤트를 적용할 수 있다는 이야기입니다. 하나의 웹 페이지를 읽어 들이면 하기처럼 DOM 오브젝트 들이 생성됩니다. 오브젝트 들은 하기의 구조를 가집니다. DOM을 가지고 어떻게 HTML 요소에 접근하여 동적으로 페이지를 변경시킬지 알아봅니다... 2023. 7. 26. 자바스크립트 HTML 문서 제어하기 HTML 은 정적인 형태의 웹 문서입니다. HTML 태그로만 구성된 웹 문서는 마치 출간된 신문처럼 더 이상 수정이 불가능한 상태입니다. 예를 들어 하기와 같은 문단 만 있는 웹 문서는 항상 해당 내용밖에는 보여줄 수 없습니다. What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It .. 2023. 7. 4. 이전 1 2 3 4 5 다음 반응형
