Back-end/JavaScript 7

[Javascript] var / let / const 차이점 ?

자바스크립트에서 변수를 선언할때 var, let, const 를 사용한다. 어떤 차이점이 있을까? 1. 변수선언 방식 var, let, const 는 javascript의 변수선언 방식이다. 같은 기능을 하는것 같지만 조금씩 다른 기능을 하고 있다. var 중복 선언 가능. 재할당 가능. var title = 'book'; console.log(title); // book var title = 'movie'; console.log(title); //movie title = 'music'; console.log(title);//music var 는 원조 변수선언방식으로, 위 코드와 같이 선언한 변수가 동일한 이름으로 중복 선언이 가능하다. 즉, 마지막에 할당된 값이 최종 변수에 저장된다. 변수를 유연하게 ..

Back-end/JavaScript 2022.09.07

[java script] map() / filter() 함수란? 배열 가공하기.

1. map() 배열의 요소를 순회하려면 for문과 같은 반복문이 필요한데, map() 함수를 쓰면 for문을 쓰지 않고도 배열 전체를 순회하면서 각 요소에 대해 함수를 호출한다. 각 요소는 순서대로 함수를 타고, 함수에 정의된 새로운 형태의 배열로 반환되는 것이다. js에 약한데 실무에서 굉장히 유용하게 쓰게 되어 기록으로 남긴다. map()함수 기본 문법 array.map(callBackFunction(currValue, index, array), newValue); currValue: 원본 배열의 데이터 index : 현재처리중인 인덱스 array : 기존 배열 newValue: callBackFunction에서 사용될 값 ex1) let array = ["월", "화", "수"]; let map ..

Back-end/JavaScript 2022.07.28

[javaScript] input text 태그 엔터 시 새로고침 현상 막기

현상 input text 박스에서 enter 키에 별도의 onkeypress 기능을 넣지 않아도 새로고침 현상이 나타남. 또는 onkeypress 기능 실행 이후, 새로고침 현상이 나타남. 원인 form 태그 내부에 있는 input(type=text) 태그가 단 하나 존재하는 경우, 엔터 > submit 시킨다. 해결방법 1. form 태그의 onsubmit 속성값 이용 2. input 박스 추가 input text box가 단 하나 존재하는 경우에 submit 시키는 것이므로, 의미없는 input(type=text) 태그를 추가하여 이를 방지할 수 있다.

Back-end/JavaScript 2021.06.14

[jquery] DOM selector 접근

기본 selector* : 모든요소 element : 지정된 요소 이름을 가진 모든 요소 #id: 지정된 id 특성값을 가진 모든 요소들 .class: 지정된 class특성값을 가진 모든 요소들selector1, selector2 : 하나이상의 셀렉터와 일치하는 모든 요소들 (셀렉터 조합시 .add() 메서드를 사용하면 효율적) 계층 탐색 selector조상과 후손 요소 : ancestor(공백)descendant : 다른요소 하위요소들 탐색 selector ex) li a 부모와 자식 요소 : parent > child : 다른 요소의 직접적인 자식 요소들 탐색 selector (특정부모 요소의 모든 자식요소 탐색하려면 자식요소자리에 * 사용) 이웃 요소 : previous + next : 이전 요소의..

Back-end/JavaScript 2020.03.18

[jquery] 콜백함수 란? Call-back function

콜백함수란? 파라미터로 함수를 전달하는 함수이다. 전달받은 함수를 함수의 내부에서 실행시킨다. 예) jQuery에서 사용하는 콜백함수. $("#btn_1").click( function() {alert("Btn 1 clicked");} ); 예제와 같이 click 함수의 인자로 함수 자체( function( ~~~ ){} )를 전달하고 있다. 이 함수는 click 함수가 실행되면 동작한다. 위와 같은 형태가 가장 전형적인 자바스크립트 콜백 함수이다. 또다른 전형적인 예제를 보자. var friends = ["Hena", "Rex", "Ryan", "Paula" ] ;friends.forEach(function (eachName, index) {console.log (index + 1 + ". " + ea..

Back-end/JavaScript 2019.01.06

스크립트 script 란?

스크립트란 ? 컴퓨터가 목표한 바를 달성하기 위해 실행해야하는 명령의 집합이다. 실행될 때마다 전체 명령의 일부를 실행하며, 실행되는 명령은 메번 다를 수 있다. 컴퓨터가 작업을 실행하는 방법을 사람의 그것과는 사뭇 다르다.따라서 명령들은 컴퓨터가 작업을 프로그래밍적으로 해결할 수 있도록 구성되어야 한다. 스크립트를 작성하려면 목표를 세부적인 단계로 나눈 후 각 단계를 완료하기 위한 작업들을 정의해야 한다. 이때 흐름도를 작성하는 것이 큰 도움이 된다. 객체와 속성. 객체(물체) Object 컴퓨터 프로그래밍에서 실제 세계에 존재하는 각각의 물리적인 물체들은 객체Object로 표현된다.예를들어 호텔이 있고 그 앞에 자동차 2대가 서있다고 치자. 호텔과 자동차라는 두가지 서로 다른 종류(Type)의 객체가..

Back-end/JavaScript 2019.01.06

제이쿼리란? 에이젝스란? 제이큐그리드란? JQuery / Ajax / Jqgrid

제이쿼리(jQuery) 제이쿼리는 오픈 소스 기반의 자바스크립트 라이브러리이다. 우리가 웹에서 여러가지 효과를 나타낼때 자바스크립트를 활용해 아주 어렵고 복잡하게 기능 구현 하는것을 제이쿼리는 아주 간단하게 구현하게 도와준다.대표적으로 HTML문서탐색과 조작, 이벤트 처리, 에니메이션, Ajax등 자바스크립트에서 빈번하게 쓰이는 동작과 작업들을 바로 가져다 쓸 수 있게 해주고, 훨씬 간단하게 만들어준다.즉, 필요한 기능을 쉽게 가져다 쓸 수 있도록 해주는 자바스크립트로 구성된 프로그램 집합으로 볼 수 있다.폼의 유효성 검사, 드롭다운 메뉴 등 바로 응용하여 사용가능한 수천개의 다양한 플러그인을 지원한다. 수많은 자바스크립트 라이브러리 중 제이쿼리가 특히 많이 사용되는 이유? 1. 제이쿼리는 주요 웹 브라..

Back-end/JavaScript 2018.10.15