전체 글90 [JavaScript] DOM 문서 객체 모델 문서 객체 모델(Document Object Model) Html문서나 XML문서 등을 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. 간단한 HTML 예를 들어보면 초 간단 HTML 제목 위 HTML의 트리구조를 살펴보자 document 객체 - lang 초 간단한 HTML문서 초 간단 HTML 제목 트리구조를 접근하는 방법을 제공하는 것을 DOM이라고 한다. document 객체 웹 페이지 그 자체를 의미하는 객체입니다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document 객체로부터 시작해야합니다. 메소드 getElementsByTagName() : 해당 태그 이름의 요소를 모두 선택합니다. .. 2021. 1. 19. [JavaScript] 내장 객체 내장 객체 Math 객체 : Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체입니다. min() : 인수로 전달 받은 값 중에서 가장 작은 수를 리턴합니다. 인수가 전달되지 않으면 Infinity를 리턴합니다. 또한 비교할 수 없는 값이 포함되어 있으면 NaN을 리턴합니다. max() : 인수로 전달 받은 값 중에서 가장 큰 수를 리턴합니다. 인수가 전달되지 않으면 -Infinity를 리턴합니다. 또한 비교할 수 없는 값이 포함되어 있으면 NaN을 리턴합니다. round() : 인수로 전달 받은 값을 소수점 첫번째 자리에서 반올림하여 그 결과를 리턴합니다. floor() : 인수로 전달받은 값과 같거나 작은 수 중에서 가장 큰 정수를 리턴합니다.(내림).. 2021. 1. 17. [JavaScript] forEach문 도대체 이 녀석은 뭘까 ? 앞의 포스팅(https://meanbymin.tistory.com/46)에서 foreach문을 아주 간단히 설명했다. 허나 나도 제대로 이해를 못하고 정리를 했던 것 같아 다시 한 번 더 정리하고자 이 글을 포스팅한다. 나는 제대로 이해 못했어. 앞에서 말했던 forEach문은 arr.forEach(function(i){ // callback 함수 console.log(i); }) 이렇게만 설명을 했었다. 그렇다면 언제쓰이고 왜 사용하는지 알아보자. 1. 왜 사용할까? 우리는 주로 for문을 많이 사용한다. for문의 사용 빈도수는 굉장히 높다. 포문돌려야지 포문돌려야지~ 하는데 이 녀석 생각보다 조건식도 적어야하고 실행문도 적어야하고 귀찮다.. for(let i=0; i { console.log(i);.. 2021. 1. 15. [JavaScript] 객체 (Object) 객체(Object) 실생활에서 우리가 인식할 수 있는 사물들을 객체라고 합니다. 데이터를 여러개 타입으로 가지고 있는 집합. 위에서 아래로 한 문장씩 읽어가며 실행되는 프로그램 : 절차지향 프로그래밍 기법(대표 언어 C) 장점 : 개발자가 눈으로 보기에 편하다. 속도가 빠르다. 게임개발에 사용되기도 한다. 단점 : 여러명이서 나눠서 개발하기가 어렵다. 자바스크립트 = 절차지향과 객체지향을 같이 따른다. 둘 다 할 수 있는 언어이다. 자바스크립트는 객체와 class개념 대신해서 생성자와 함수로 대체해서 사용했었다. 그러다가 지금은 class가 있는 척 하며 사용하고있다. ex) 만약 자동차를 떠올린다면...? 명사와 동사로 설명이 가는하다면 객체가 된다. 명사로 그리는 방법 색상(노랑,빨강), 바퀴 갯수(.. 2021. 1. 13. [jQuery] 제이쿼리란 ? jQuery(제이쿼리) 오픈소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트(Event)에 관한 처리를 좀 더 쉽게 구현할 수 있습니다. 또한 Ajax 응용 프로그램도 제이쿼리를 통해 빠르게 개발이 가능합니다. 마이크로소프트가 90프로 이상의 점유률을 가졌을 때 제이쿼리를 사용하여 일반 자바스크립트를 썼을 때 익스플로러, 크롬 등 각자 다르게 표현해야 하는 부분을 공통적으로 표현해줬기 때문에 많이 사용했었다. 허나 익스플로러를 이제는 사용하지 않고, 크롬, 엣지 등의 사용빈도가 올라감으로써 사용량이 많이 줄었다. 제이쿼리 버전 ver 1.X : 익스플로러 6, 7, 8 버전에서의 동작까지 모두 지원하는 버전입니다. ver 2.X : 버전 1에서 지원하는 익스.. 2021. 1. 10. [JavaScript] 변수의 범위 변수의 범위 자바스크립트에서 객체나 배열, 함수는 모두 변수이다. 변수의 범위란 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미합니다. 값이 언제든지 변할 수 있으면 변수이다. 1. 지역 변수 함수 내에서 선언된 변수를 가리킵니다. 지역 변수는 변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 자동으로 메모리에서 사라집니다. 지역 변수는 함수 안에서 가장 먼저 선언해줘야한다. function fun1(start, end){ // 지역변수 start, end, sum, i let sum = 0; for(let i=start; i 2021. 1. 9. [HTML] onclick 링크 (현재페이지/새창/팝업/프레임) 1. 현재페이지에 부를때 button 2. 새 창에 열때 button 3. 팝업으로 열기 (주소,팝업창이름,옵션) button 4. 상위 프레임에 부를때 button 5. 프레임 지정 링크 button 2021. 1. 1. [JavaScript] 화살표 함수 화살표 함수 ECMA6에 추가된 문법입니다. function 키워드를 사용하여 함수를 만든 것보다 간단하게 표현합니다. 화살표 함수는 항상 익명입니다. 1. 매개변수가 없는 경우 - 일반함수 const hello1 = function(){ console.log('안녕하세요. JavaScript'); } -화살표함수 const hello2 = () => console.log('안녕하세요. JavaScript'); 2. 매개변수가 있는 경우 const hello3 = x => console.log(`매개변수로 전달받은 값은 : ${x}`); const hello4 = (x, y) => console.log(`두 수의 합 : ${x + y}`); 3. 리턴값이 있는 경우 const hello5 = (x, y).. 2020. 12. 31. [JavaScript] 자바스크립트 사용자 정의 함수 function, 호이스팅에 관해서. 사용자 정의 함수(function) 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다. 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있습니다. 1. 이름만 존재하는 함수 함수 선언식 function 함수이름(){//함수 선언전에 함수를 호출해도 실행가능 함수가 호출 되었을 때 실행할 문장; ... } 함수이름(); 함수이름(); function 함수이름(){//함수 선언전에 함수를 호출해도 실행가능 함수가 호출 되었을 때 실행할 문장; ... } *** 호이스팅 *** 호이스팅 자바스크립트 엔진이 script 태그를 만나면 자바스크립트 파일을 먼저 읽고 선언된 함수를 메모리에 저장합니다. 이 과정이 끝나면 코드가 위에서부터 차례대로 실행되며 '함수 선언식' 으로 .. 2020. 12. 27. 이전 1 ··· 3 4 5 6 7 8 9 10 다음
