본문 바로가기

전체 글127

JavaScript 실습예제 - Lotto 번호 생생 웹 페이지 만들기 안녕하세요. 이전 포스팅에서 작성한 여러개의 기능을 사용하여, 이제 Lotto 번호 생성기를 만드는 예제를 작성해보겠습니다. 각 페이지 단계별로 설명을 첨부하였으니, 참고하시면 도움이 될 것이라고 생각합니다. 그리고, 코드를 조금 더 간추린 버전을 설정하여, 페이지 하단에 기재했으니, 참고하시면 좋을 거 같습니다. 이에 대해서는 별도의 설명을 하지 않겠습니다. ========================== 1. Lotto 번호 만들기 - HTML 2. Lotto 번호 만들기 - CSS 3. Lotto 번호 만들기 - JavaScript 4. 코드 정리하기 ========================== 1. Lotto 번호 만들기 - HTML 먼저 HTML은 간촐하게 작성합니다. 먼저 영역을 설정하기 .. 2022. 11. 10.
JavaScript - Math 이해하기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 다음 포스팅에서 재미난 형태로 작성하게 될 포스팅에 앞서, 개념을 정리하는 포스팅입니다. Math 함수는, 이전 포스팅에서 다루었던, JavaScript 에서 기본적으로 다루고 있는 Window 라는 객체 안에 내장되어 있는 Method입니다. 이 객체는 JavaScript 에서 수학적인 계산을 위해서 사용하기도 하고, 무작위숫자나, 소숫점 단위의 숫자를 출력하는 역활도 합니다. 여기서 우리가 자주 떠오르는 몇가지 항목들이 있을 것입니다. Math 에 대해서 배워보는 글을 작성해보겠습니다. ========== 1. Math 에 대해서 알아보기 2. Math 에서 사용되는 주요 Method 3. 실제 작성예시 ========== 1. Math에 대해서 알아보.. 2022. 11. 9.
JavaScript -선형 검색/완전 탐색(Linear Search) 안녕하세요. Hynn 입니다. 이번 포스팅에서는 이제 Array(배열)이 무작위로 나열되어 있을때, 이를 일일히 확인하지 않더라도, 특정 값(Value) 를 검색하는 기능을 구현하는 방법을 작성해보겠습니다. 이 검색의 명칭은 선형검색 혹은 완전 탐색이라고 하며, 정식 명칭은 Linear Search 입니다. ======== 1. Linear Search 2. 예제 작성하기 ======== 1. Linear Search Linear Search 는 선형 검색/완전 탐색이라고도 불리우는 알고리즘이라고도 합니다. 이 방식은 단방향 (JavaScript 에서는 왼쪽에서 오른쪽) 으로 탐색을 진행하여 원하는 데이터를 검색하는 방식으로 보자면 매우 단순한 방형태의 알고리즘입니다. 이는 구현에서의 편리성을 장점으로 .. 2022. 11. 9.
JavaScript - Array(배열) 객체 편집하기 안녕하세요. Hynn입니다. 이번 포스팅에서는 Array(배열) 로 이루어진 객체에서 이미 들어가 있는 데이터를 편집하거나, 그를 추가하는 방식에 대해서 몇가지 소개해드리고자 합니다. 기존에 생성자 함수도 사용했지만, 보다 간편하게 처리하는 방식을 학습해보고자 합니다. 시작해보겠습니다. ============ 1. 배열참조 2. .push, . pop 3. splice, slice ============ 1. 배열참조, 배열참조의 경우, 아래의 함수로 간략하게 표현할 수 있습니다. 배열참조 const aarr = newarr() const arr2 = [] 위의 형태를 이전 포스팅에서 생성자함수를 이용해서 틀을 만들고, 그틀에 요소를 추가하는 형태로 생성자함수라는 것을 언급한 바 있습니다 하지만 기존의 .. 2022. 11. 7.
JavaScript - DOM 기본 사용법 안녕하세요. Hynn 입니다. 이전 포스팅에서 설명드린 것 처럼 DOM 을 사용하기 위해 기본적으로 사용되는 몇가지를 가지고 설명하는 포스팅을 작성하고자 합니다. 이 기능을 통해, 작성하는 요령을 기초적으로 익히는 페이지가 되기를 바랍니다. ========== 1. DOM 사용을 위해 기본 준비과정 2. getElementByID 3. getElementByTagName 4. querySector/ querySectorALL 5. getElementByClassName ========== 1. DOM 사용을 위해 기본 준비과정 오랜만에[?] 문서를 연결하는 과정을 거쳐야 하다보니, 이러한 준비과정을 별도로 과정에 포함하게 되었습니다. 이전에 반복해서 했듯이, css 파일과 javascript 파일을 각각.. 2022. 11. 7.
JavaScript - Windows 객체 안녕하세요. Hynn 입니다. 이전 포스팅까지에서는, JavaScript 의 기본적 의의, 변수, 연산자, 함수 기본의 대한 포스팅 위주로 작성을 했습니다. 이제 JavaScript 라는 친구를 사용해서, HTML/CSS 에 같이 녹여내기 위해서는, DOM,BOM 이라는 개념을 학습해야 합니다. 하지만 이 DOM/BOM 이라는 개념을 알기 전, 반드시 알아야 할 개념의 대한 이해를 하고 난 뒤, 주제를 다루어볼까 합니다. 다소 지루한 내용이 될 수 있겠지만, 이 내용에 대해서는 개념을 이해하기 위해 반드시 필요한 주제라고 생각됩니다. 시작해보겠습니다. ============ 1. Window 란 무엇인가? 2. Window 객체를 활용하기 3. DOM/BOM 의 개념 ============ 1. Wind.. 2022. 11. 7.

티스토리툴바