앱 만들기/JavaScript24

• 

  자바스크립트 String 데이터 형 자바스크립트에서 문자열 은 String 이라는 데이터 형 입니다. 먼저 문자열을 만드는 방법을 알아봅니다. 1. "" 쌍따옴표 or ' ' 따옴표로 문자를 둘러싸기 "안녕하세요" , '안녕하세요' 라고 자바스크립트 코드를 적으면 문자열로 인식 합니다. 문자들을 "", '' 사이에 적습니다. 2. typeof "문자열" typeof "문자열" 로 코드를 실행해보면 string 이라는 자료형을 보여줍니다. "", '' 로 표현되는 문자열은 string 자료형 이라는 것을 알 수 있습니다. 3. 백틱 `` 으로도 문자열을 Tab 키위의 `` 백틱 사이에 `안녕하세요` 라고 표현하여도 문자열이 됩니다. 줄 띄우기는 백틱`` 이 더 유리하다 " ", ' ' 에 비해서 백틱' ' 은 줄 띄우기에 더 편리합니다. ".. 앱 만들기/JavaScript 2023. 8. 17.

• 

  자바스크립트 변수에 대해서 x = 5; y = 6; z = x + y; 자바스크립트 변수는 총 4가지 타입이 있습니다. 즉 4가지 방식으로 변수를 선언할 수 있다는 뜻입니다. 그 네 가지 방식은 하기와 같습니다. Automatically Var let const 입니다. Automatically는 자동으로 형이 부여되는 것으로 변수 앞에 아무런 키워드 도 적지 않는 것입니다 예를 들면 이러합니다. x = 5; y = 6; z = x + y; C 나 Java 등의 언어에서는 컴파일 오류가 날 수 있는 것도 자바스크립트에서는 유연하게 값을 도출해 냅니다. 하지만 이런 너무나 높은 자유도 때문에 생각지 못한 논리적 오류가 생길 수도 있습니다. 그래서 웬만하면 이런 방식은 지양하는 것이 좋고, 변수 선언지 키워드를 사용해야 합니다. Va.. 앱 만들기/JavaScript 2023. 8. 16.

• 

  자바스크립트 이벤트 자바스크립트 이벤트 는 HTML 요소에서 이벤트 핸들러 속성에 의해서도 설정 됩니다. 그리고, 다음과 같은 상황에서 실행이 됩니다. HTML 페이지 로딩이 완료 되었을때. HTML input field 가 변경 되었을때, HTML 버튼이 클릭 되었을때,, 이외에도 많은 이벤트 가 있지만 주로 이러 합니다. 이런 이벤트들이 일어날때 해당 HTML 요소에 등록된 핸들러에 의해서 자바스크립트 코드나 함수가 실행되는 구조 입니다. HTML 요소에 등록되는 이벤트 핸들러의 문법 syntax 는 하기와 같습니다. 자바스크립트 코드는 쌍따옴표 혹은 싱글따옴표 안에 코딩하면 됩니다. 버튼 클릭 예제를 만들어봅니다. The time is? 버튼에 onclick 이벤트 핸들러를 등록합니다. 즉, 버튼이 클릭했을때 날짜 정.. 앱 만들기/JavaScript 2023. 8. 15.

• 

  HTML 마우스 이벤트 HTML 마우스 이벤트 중 마우스를 특정 영역에 올려두었을 때와 (포커스) 포커스 되지 않았을때 를 구별하는 동작을 구현 해봅니다. 먼저 예제를 만들어 봅니다. ChangeBackground onmouseover 속성 : 마우스가 해당 요소에 올려졌을때 (포커스 되었을때) on mouseleave 속성 : 마우스가 해당 요소에서 벗어날때 (포커스 해제시) 위 코드는 해당 이벤트가 발생시 스타일로 배경색을 조정하는 예이며, 결과는 하기와 같습니다. 이외에도 마우스 관련 이벤트가 많습니다. 모든 것을 암기하지 말고, 필요할때 마다 html mouse event 등으로 검색해서 해당 예제등을 적용하면 되겠습니다. 감사합니다. Mouse Events W3Schools offers free online tutor.. 앱 만들기/JavaScript 2023. 8. 14.

• 

  JS document.getElementbyID().innerHTML 자바스크립트 document.getElementByID().innerHTML 속성에 대해서 알아봅니다. 먼저, document.getElementById("id") 메소드를 사용하면 인자 값인 "id" 를 id 로 가진 HTML 요소에 접근이 가능합니다. 그렇게 접근한 다음 .innerHTML property(값)을 통해서 해당 HTML 요소의 값을 수정하는 것 입니다. 이 방법이 일반적으로 자바스크립트를 사용해서 HTML 의 요소에 접근하는 방법 중 하나 입니다. 예제를 만들어 봅니다. test demo 라는 아이디를 가진 p 요소에 접근하여 해당 값을 "Hello Happy day!" 라고 바꾸어 주는 코드 입니다. 참고로, 리스트를 가지는 요소에 접근하여 리스트 값을 얻어 올수도 있습니다. 예제를 .. 앱 만들기/JavaScript 2023. 8. 10.

• 

  JS 함수 사용 방법 자바스크립트 함수를 만들고 사용하는 방법 입니다. 함수를 만들면, 코드를 재사용하기에도 유지보수 하기에도 편리하고 효율적이기에 필수적으로 사용되고 있습니다. JS 함수 를 만드는 Syntax 을 살펴봅니다. 함수 Syntax 1. function 이라는 키워드를 제일 앞에 적어줍니다. (C,Java 등의 언어와는 가장 다른 차이점인거 같습니다 ^^) 2. 그 다음 함수에 사용될 이름을 적어준다 3. () 괄호 안에 인수 값을 적습니다. 인수들은 함수내에서 지역변수 로 사용됩니다. - 즉, 함수가 시작될때 생성되고, 함수가 마칠때 소멸 됩니다. 4. { } 안에 함수에서 실행될 코드를 코딩합니다. 5. 때에 따라 return 키워드를 사용해도 함수를 호출한 곳으로 return 에서 계산된 값을 돌려줍니다... 앱 만들기/JavaScript 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"] }; 위 예제에.. 앱 만들기/JavaScript 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 가 나옵니다. 값이 같기 때문이죠. 값뿐만 아니라 데이터 타입까지 비교가 필요하다면!== 연산자가 필요합니다. !== 연산자는 다음 포스팅에서 정리해 봅니다. 감사합니다. 앱 만들기/JavaScript 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.. 앱 만들기/JavaScript 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로 수정된다면, 당연히 값과 데이터 타입도 숫자형으로.. 앱 만들기/JavaScript 2023. 7. 28.

• 

  브라우저 자바스크립트 활용하기 자바스크립트를 배워서 멋진 프로그램을 만드는 것도 좋겠지만 브라우저를 통해서도 자바스크립트를 활용할 수 있답니다. 단순한 계산기 혹은 글자 수 세기 등도 별도의 앱을 띄우지 않고 브라우저 창에서도 바로 확인이 가능합니다. 이게 가능한 이유는 우리가 사용하는 브라우저들은 기본적으로 자바스크립트 엔진을 모두 포함하고 있기 때문이죠. 그럼 계산기 기능부터 사용해 볼까요? 구글 크롬브라우저를 기준으로 설명하겠습니다. 1. 계산기 브라우저가 열린 상태에서 F12를 누릅니다. 그러면, 브라우저의 오른쪽에 개발자 도구 창이 나타납니다. 개발자 도구에서 콘솔 탭으로 이동합니다. 오른쪽 콘솔 창에는 커서가 깜빡이고 있죠. 바로 여기서 자바스크립트 명령을 기다리고 있는 겁니다. 사칙연산 등 계산하고 싶은 수치값들을 입력해.. 앱 만들기/JavaScript 2023. 7. 27.

• 

  자바스크립트 HTML DOM 이란 HTML DOM을 사용하면 자바스크립트가 HTML 웹 문서의 모든 요소에 접근 및 수정 이 가능하기에 정적인 웹 문서를 동적인 웹문서로 바꿀 수 있습니다. HTML DOM ( Document Object Model) 은 하나의 웹 페이지가 브라우저에서 로딩될 때 브라우저에 의해서 만들어지며 브라우저가 해당 웹페이지에서 사용할 수 있는 DOM 오브젝트를 생성한다고 이해하면 쉽습니다. 만들어진 오브젝트를 통해서 우리는 손쉽게 HTML 요소에 접근하여 CSS 스타일 및 이벤트를 적용할 수 있다는 이야기입니다. 하나의 웹 페이지를 읽어 들이면 하기처럼 DOM 오브젝트 들이 생성됩니다. 오브젝트 들은 하기의 구조를 가집니다. DOM을 가지고 어떻게 HTML 요소에 접근하여 동적으로 페이지를 변경시킬지 알아봅니다... 앱 만들기/JavaScript 2023. 7. 26.