본문 바로가기

Programming/Javascript

 (8)
[Javascript] 자바스크립트 배열 Array 기능 사용 예시 1. 배열 생성 및 초기화: 배열은 다음과 같이 생성하고 초기화할 수 있습니다. let fruits = ['apple', 'banana', 'orange']; let numbers = [1, 2, 3, 4, 5]; let emptyArray = []; 2. 배열 요소 접근: 배열 요소에 접근하는 방법은 다음과 같습니다. console.log(fruits[0]); // 'apple' console.log(numbers[3]); // 4 3. 배열 길이 확인: 배열의 길이를 확인하는 방법 console.log(fruits.length); // 3 console.log(numbers.length); // 5 4. 배열 요소 추가 및 삭제: 배열에 요소를 추가하거나 삭제하는 방법은 다음과 같습니다. fruits..
[Javascript] HTML5 Web Storage 사용 Web Storage란? HTML5부터 제공하는 기능으로 해당 도메인과 관련된 특정데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능이다. 쿠키와 비슷한 기능 Web Stroage가 필요한 이유? 쿠키와 Web Storage 모두 브라우저에 저장되기는 하지만 쿠키는 아래와 같은 단점으로 Web Storage를 사용 4KB의 데이터 저장 제한 HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안에 취약 쿠키는 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있음 Web Storage의 종류 기존에 우리가 흔히 사용했던 쿠키와 세션처럼 Web Storage도 local Storage와 sessionStorage를 제공한다. Session..
[Javascript] VanillaJS '바닐라'란 프로그래밍 세계에서 기본적인 기능만 구현해 놓은 상태를 의미한다. 그러므로 VanillaJS는 새로운 프레임워크 또는 라이브러리가 아닌 순수한 JavaScript를 의미한다. - url : http://vanilla-js.com/ Vanilla JS Vanilla JS Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. Introduction The Vanilla JS team maintains every byte of code in the framework and works hard each day to make sure it is..
[노마드 코더 - VanillaJS] 바닐라 JS로 크롬 앱 만들기 정리 (2) # make your first app 정리입니다. querySelector : 찾는 것 중 첫번째를 가져온다. querySelectorAll : 쿼리셀렉터명에 따른 엘리먼트를 Array로 가지고 온다. getElementsByTagName : 태그명으로 선택한다. - Web Storage sessionStorage : 페이지의 세션이 유지되는 동안 사용할 수 있는 각 origin별로 별도의 storage를 관리한다. (페이지 리로딩 및 복원을 포함한, 브라우저가 열려있는 한 최대한 긴 시간 동안) localStorage : 브라우저가 닫히거나 다시 열리더라도 데이터가 유지 된다. localStorage를 사용하려면 현재 브라우징 세션에서 지원되고 있는지 확인이 필요하다. dataType은 String만..
[Javascript] Console 객체의 메소드 Console 객체는 브라우저의 디버깅 콘솔에 접근할 수 있는 메서드를 제공한다. 동작 방식은 브라우저마다 다르지만, 사실상 표준으로 여겨지는 기능도 여럿 제공 하고 있다. - 콘솔에 텍스트 출력 방법 : 출력하는 메서드로는 console.log(), console.info(), console.warn(), console.error()가 있다. (1) 단일 객체를 출력 var something={name:'ahnlayo',id:10} console.log(something); 출력 화면 (2) 여러 객체를 출력 const car='dodge charger'; const someObject={str:'some text',id:4}; console.info('my first car was a ',car,'...
[노마드 코더 - VanillaJS] 바닐라 JS로 크롬 앱 만들기 정리 (1) 1. var는 사용하지 않는다. 2. 처음엔 const 선언을 필요할 경우에는 let 선언한다. 3. String const word= nomard // -> normard 라는 변수가 없기 때문에 오류 발생. const word2="normard" // -> OK. 4. Boolean const bool=true; const bool=false; 5. Number const num=55; 6. Float const fla=44.1; 7. Array 정렬 Array 안에는 string,boolean,float,number, 변수명도 가능하다. const something="ddd"; const dayOfWeek = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun',true,33..
[Javascript] 모바일,PC 접속 여부를 알 수 있는 방법 모바일과 PC 접속 여부를 체크하여 스크립트를 실행해야 하는 경우가 있다. 아래와 같이 적용하면 된다. function deviceCheck(){ var filter = "win16|win32|win64|mac"; if(navigator.platform){ if(0>filter.indexOf(navigator.platform.toLowerCase())){ //모바일일 경우 alert('모바일!'); }else{ //PC인경우 alert('PC!'); } } }
[Jquery/Javascript] 스크롤 시, 특정 부분에서 이벤트 발생 스크롤 시, 특정 부분의 다다르면 딱 한번만 이벤트를 발생하고 싶을 때가 있다. 아래와 같이 적용하면 된다. * javascript var isVisible = false; $(window).on('scroll',function(e){ if(checkVisible($('.section1'))&&!isVisible){ $('html,body').stop().animate({ scrollTop:section1Top_Height },800); directTextAniFunction(); $('#intro').css('display','none') introAniFunction(this); isVisible=true; } }); function checkVisible(elm,eval){ eval=eval||"o..

티스토리툴바