본문 바로가기

Java script9

2차원배열 Array.from()사용하여 복사하기 기본형 데이터와 참조형 데이터가 있다 기본형 데이터 : string, number, boolean, null, undefined 등 참조형 데이터 : array, function, object 등 복사를 할때 기본형데이터는 원본이 변형되지않고 값만 복사되고 참조형데이터는 얕은복사로 데이터를 가르키는 주소값만 복사되는줄은 알고있었는데 array복사를 하다가 몰랐던 부분이 있어서 기록해놓으려한다. 보통 array복사를 할때, 다음과같이 스프레드문법 또는 slice로 복사를 해서 사용했다 let a = [1,2,3] // [1,2,3] let b = [...b] // [1,2,3] let c = a.slice(); // [1,2,3] c[0] = 5; console.log(a); // [1,2,3] conso.. 2022. 2. 2.
scope와 전역변수, 지역변수 스코프(Scope) : 변수 접근 규칙에 따른 유효범위 안쪽 스코프에서 바깥쪽 스코프로 접근할수 있지만 반대는 불가능 let username = 'parkhoho'; if (username) { let message = `Hello, ${username}!`; console.log(message); // "Hello, parkhoho!" 바깥쪽 스코프에 접근가능 } console.log(message); // ReferenceError 안쪽 스코프에 접근 불가능 가장 바깥쪽의 스코프는 전역스코프 global scope 전역이 아닌 스코프는 지역스코프 local scope 전역스코프에서 선언한 변수는 전역변수 지역스코프에서 선언한 변수는 지역변수 지역변수는 전역변수보다 더 높은 우선순위를 가짐 스코프의 종.. 2021. 12. 29.
javascript function 함수 기초 함수의 기본개념에 대해 설명해야할때 헷갈리기 쉬운 요소들을 몇가지 정리해보았다. 함수 선언 방법 1. 함수선언식 function getTriangle(base, height) { let triangleArea = (base * height)2 ; return triangleArea; } 2. 함수표현식 const getTriangle = function(base, height) { let triangleArea = (base * height)2 ; return triangleArea; } 함수표현식은 함수 선언식과 다르게 호이스팅이 적용되지않는다 3. 화살표함수 const getTriangle = (base, height) => { let triangleArea = (base * height)2 ; re.. 2021. 12. 14.
AOS 스크롤에 다른 애니메이션구현 AOS 는 홈페이지에서 스크롤의 움직임에 따라 원하는 애니메이션을 구현할수 있게 해주는 자바스크립트 라이브러리이다. https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 사용방법은 간단하다 AOS 홈페이지를 아래쪽으로 내리면 CDN으로 사용할 수 있는 소스가 명시되어있다. //CSS //JS 물론 깃허브소스를 보거나 다운로드해서 사용할 수도 있다. 그리고 원하는 효과의 sample코드를 복사붙여넣기해서 사용하면 된다. 2021. 8. 17.
JS 반복문 While문 for문 그리고 제어문 break와 continue while문 while문은 무한 반복문이다 while (조건식) { document.write("hello "); } while (true) { document.write("hello "); } 괄호안의 조건이 참(true)일 경우 중괄호 안에 있는 코드들이 무한 반복되는 코드이다. 이때 조건이 true로 고정된다면 컴퓨터에 무리가 올 수 있기때문에 조건을 꼭 넣어주어야 한다. var i = 0; while (i < 10) { document.write("hello "); i = i + 1; } 이렇게 i 라는 변수를 사용해서 i 를 초기화해주고 반복문이 실행될때마다 i 의 값을 갱신해주는 식으로 (증감문) 조건이 true일때만 반복되다가, false가 되면 멈추도록 코딩을 해주도록 하자 이때 i 를 초.. 2021. 8. 13.
jquery slick 슬라이더 라이브러리 사용하기 웹사이트를 만들다보면, 슬라이드기능을 사용해야할 때가 있다. 그럴때 유용하게 쓸수있는 라이브러리인 slick 슬라이더 사용법에 대해 알아보자. slick 설치 https://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io slick 홈페이지 상단의 get it now를 누른뒤 다운로드 받고 작업대상 폴더에 옮긴 후 사용하거나 깃허브 소스를 다운받아 사용해도.. 2021. 8. 5.