반응형 앱 만들기389 JS 함수 사용 방법 자바스크립트 함수를 만들고 사용하는 방법 입니다. 함수를 만들면, 코드를 재사용하기에도 유지보수 하기에도 편리하고 효율적이기에 필수적으로 사용되고 있습니다. JS 함수 를 만드는 Syntax 을 살펴봅니다. 함수 Syntax 1. function 이라는 키워드를 제일 앞에 적어줍니다. (C,Java 등의 언어와는 가장 다른 차이점인거 같습니다 ^^) 2. 그 다음 함수에 사용될 이름을 적어준다 3. () 괄호 안에 인수 값을 적습니다. 인수들은 함수내에서 지역변수 로 사용됩니다. - 즉, 함수가 시작될때 생성되고, 함수가 마칠때 소멸 됩니다. 4. { } 안에 함수에서 실행될 코드를 코딩합니다. 5. 때에 따라 return 키워드를 사용해도 함수를 호출한 곳으로 return 에서 계산된 값을 돌려줍니다... 앱 만들기/JavaScript study 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 study 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 study 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 study 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 study 2023. 7. 28. 브라우저 자바스크립트 활용하기 자바스크립트를 배워서 멋진 프로그램을 만드는 것도 좋겠지만 브라우저를 통해서도 자바스크립트를 활용할 수 있답니다. 단순한 계산기 혹은 글자 수 세기 등도 별도의 앱을 띄우지 않고 브라우저 창에서도 바로 확인이 가능합니다. 이게 가능한 이유는 우리가 사용하는 브라우저들은 기본적으로 자바스크립트 엔진을 모두 포함하고 있기 때문이죠. 그럼 계산기 기능부터 사용해 볼까요? 구글 크롬브라우저를 기준으로 설명하겠습니다. 1. 계산기 브라우저가 열린 상태에서 F12를 누릅니다. 그러면, 브라우저의 오른쪽에 개발자 도구 창이 나타납니다. 개발자 도구에서 콘솔 탭으로 이동합니다. 오른쪽 콘솔 창에는 커서가 깜빡이고 있죠. 바로 여기서 자바스크립트 명령을 기다리고 있는 겁니다. 사칙연산 등 계산하고 싶은 수치값들을 입력해.. 앱 만들기/JavaScript study 2023. 7. 27. 자바스크립트 HTML DOM 이란 HTML DOM을 사용하면 자바스크립트가 HTML 웹 문서의 모든 요소에 접근 및 수정 이 가능하기에 정적인 웹 문서를 동적인 웹문서로 바꿀 수 있습니다. HTML DOM ( Document Object Model) 은 하나의 웹 페이지가 브라우저에서 로딩될 때 브라우저에 의해서 만들어지며 브라우저가 해당 웹페이지에서 사용할 수 있는 DOM 오브젝트를 생성한다고 이해하면 쉽습니다. 만들어진 오브젝트를 통해서 우리는 손쉽게 HTML 요소에 접근하여 CSS 스타일 및 이벤트를 적용할 수 있다는 이야기입니다. 하나의 웹 페이지를 읽어 들이면 하기처럼 DOM 오브젝트 들이 생성됩니다. 오브젝트 들은 하기의 구조를 가집니다. DOM을 가지고 어떻게 HTML 요소에 접근하여 동적으로 페이지를 변경시킬지 알아봅니다... 앱 만들기/JavaScript study 2023. 7. 26. HTML <style>태그 와 style 속성 HTML 태그와 style 속성은 둘 다 모두 CSS를 특정 html요소에 적용하기 위해서 사용됩니다. 즉, HTML 과 CSS를 연결시켜 주는 개념입니다. 먼저 태그를 알아봅시다. 태그 A heading A paragraph. head 태그 사이에 body 에서 사용되는 h1, p 요소를 선택자를 사용해서 스타일을 설정합니다. 여기서는 텍스트 색상을 빨강과 파랑으로 설정했습니다. 하기 결과처럼, 태그를 사용하면 특정 html 요소 부분에 스타일을 적용할 수 있습니다. style 속성 이번에는 style 속성을 사용해서 동일한 결과를 만들어 봅니다. html 태그 내부의 inline 스타일로 적용했습니다. 결과는 동일합니다. A heading paragraph. 두 가지 방법 모두 특정 태그 요소에 스타.. 앱 만들기/HTML5 study 2023. 7. 25. HTML <script> 태그 사용법 HTML 결과로는 브라우저 화면에 hello! 라고 텍스트를 출력해줍니다. 태그 의 주요특성 중 하나는 태그 사이에 자바스크립트 코드가 와야 한다는 점 입니다. 태그는 웹 문서 어디든 위치 할수 있으며, 하나의 웹문서 안에서 여러번 사용이 가능합니다. 하지만, 브라우저가 HTML 코드를 읽어들일때 위에서 부터 아래로 한줄씩 읽으면서 분석을 하기때문에 섹션 사이에 코드가 있으면 웹페이지를 로딩하는게 시간이 걸릴 수 있겠습니다. 특이한 상황이 아니라면 종료 태그 전에 삽입하는 것이 좋습니다. 그리고, 웹 문서와 자바스크립트 코드가 혼용이 되면 소스분석 및 유지보수에도 어려움이 생깁니다. 그렇기에 HTML 웹 문서와 자바스크립트 파일을 분리해서 사용하는 것이 좋겠죠. 태그의 src 속성을 활용하여 외부의 자바.. 앱 만들기/HTML5 study 2023. 7. 24. HTML onkeydown 이벤트 HTML 웹 문서에서 사용자 행동에 반응하도록 만들어 놓은 것이 바로 이벤트입니다. 예를 들자면 마우스를 클릭한다던지 키를 누르는 동작 등등 말이죠. 이번 시간은 그중 키를 눌렀을 때 반응하는 onkeydown 이벤트에 대해서 알아봅니다. onkeydown Event 유저가 키를 눌렀을때 발생하는 이벤트입니다. 문법은 하기와 같습니다. onkeydown 속성값으로 자바스크립트 코드가 와야 합니다. 규칙입니다. HTML과 자바스크립트가 연결되는 가장 기본적인 구조라고 할 수 있습니다. 웹페이지에서 하나의 요소에 이벤트가 발생했을 때 자바스크립트 코드가 실행된다 는 것입니다. 빈 텍스트 박스에 키를 입력하면 팝업창이 보이는 예제를 만들어 봅니다. 코드입니다. 주요한 부분은 input 태그 내 onkeydow.. 앱 만들기/HTML5 study 2023. 7. 22. 이전 1 ··· 3 4 5 6 7 8 9 ··· 39 다음 반응형