💻 <!-- dev -->/JavaScript | jQuery

[JavaScript] 07_함수(function)

더보기 JavaScript의 함수에 대해 알아보자 선언적 함수 [ 표현법 ] function 함수명(매개변수명, 매개변수명) { 해당 함수 호출 시 실행할 소스코드들; return 결과값 }; 👉🏻 반환할 결과값이 없는 경우 return 구문 생략 가능 👉🏻 매개변수가 없는 경우 매개변수명들 생략 가능 실행확인 익명 함수 👉🏻 특정 변수나 속성에 "대입"되는 함수 제시 시 주로 사용됨 (주로 이벤트 핸들러 작성 시 사용) [ 표현법 ] 변수 = function(매개변수명, 매개변수명, ...) { 소스코드; } 실행확인 함수의 매개변수 👉🏻 정의해 둔 매개변수보다 더 많이 혹은 더 적게 전달하기가 가능함 👉🏻 단! 초과된 전달값은 무시되고, 미달된 매개변수의 값은 undefined로 출력됨 실행확인 실행..

[JavaScript] 06_배열

더보기 JavaScript의 배열에 대해 알아보자 배열 ✔️ 자바스크립트에서는 변수 선언 시 별도의 자료형 지정이 없기 때문에 어떤 자료형의 값들이든 다 하나의 배열 공간에 담을 수 있음 => 자바에서의 ArrayList와 유사함 확인하기 배열의 선언 👉🏻 배열의 선언 시 배열의 크기를 지정한 채로 선언하거나 크기를 지정하지 않아도 됨 (배열의 크기의 제약이 없음) 확인하기 Array 객체의 메소드 11개 👉🏻 1) indexOf(찾고자하는요소) : 배열에서 해당 요소가 위치해 있는 인덱스를 반환 1) indexOf(찾고자하는요소) : 배열에서 해당 요소가 위치해 있는 인덱스를 반환 확인하기 👉🏻 2) concat(배열, 배열, ...) : 여러 개의 배열을 결합하고자 할 때 사용 확인하기 👉🏻 3) r..

[JavaScript] 05. 문자열과 숫자

더보기 JavaScript의 문자열과 숫자에 대해 알아보자 문자열 관련 메소드(함수) 변수명.toUpperCase() 👉🏻 모든 문자를 대문자로 변수명.toLowerCase() 👉🏻 모든 문자를 소문자로 변수명.length 👉🏻 문자열의 길이 반환 변수명.charAt(i) 👉🏻 문자열의 인덱스(i번째)에 해당하는 문자 반환 변수명.indexOf("찾고자하는문자") 👉🏻 변수 내에 찾고자 하는 문자가 처음으로부터 몇 번째 인덱스에 있는지 변수명.lastIndexOf("찾고자하는문자") 👉🏻 변수내에 찾고자 하는 문자가 (2개 이상이라면) 가장 마지막에 존재하는 인덱스를 반환 변수명.substring(인덱스) 👉🏻 변수의 인덱스에 해당하는 문자부터 반환(0부터) 변수명.substring(처음인덱스, 끝인덱스..

[JavaScript] 04_변수와 자료형

더보기 JavaScript의 변수와 자료형에 대해 알아보자 변수 var, let, const의 차이점 ✔️ 변수 선언 시 var 뿐만 아니라 let, const도 사용 가능 1) 변수 선언 방식 👉🏻 var 변수명; ✔️ var: 변수의 중복 선언 가능, 재할당 가능 👉🏻 let 변수명; ✔️ let: 변수의 중복 선언 불가능, 재할당 가능 👉🏻 const 변수명 = 값; ✔️ const: 변수의 중복 선언 불가능, 재할당 불가능 클릭 *변수 선언 위치에 따른 전역변수/지역변수 var 변수명; 👉🏻 전역변수 (global) 변수명; 👉🏻 전역변수(global) function 함수명() { var 변수명; 👉🏻 지역변수(local) 변수명; 👉🏻 지역변수가 아닌 전역변수다! } </scr..

[JavaScript] 03_요소 가져오기(접근하기)

더보기 JavaScript의 요소 가져오기(접근하기)에 대해 알아보자 자바스크립트의 요소는 CSS의 선택자와 같은 의미 ✔️ CSS의 기본 선택자들 모든(전체) 선택자: 모든 태그들을 다 선택하겠음 (*) 아이디 선택자: 해당 아이디값으로 선택하겠음 (#아이디명) 태그 선택자: 해당 태그들은 다 선택하겠음 (태그명) 클래스 선택자: 해당 클래스값으로 선택하겠음 (.클래스명) HTML 요소에 접근하기 (해당 요소 객체 가져오기) 1. getElementById("아이디명") 👉🏻 아이디로 접근하기 아이디는 중복될 수 없으므로 가져와 봤자 1개임 1) 아이디로 접근하기 아이디로 접근 클릭마다 색 변경 2. getElementsByTagName("태그명") 👉🏻 태그명으로 접근하기 여러 개가 가지고 와질 수 ..

[JavaScript] 02_데이터 입출력

더보기 JavaScript의 데이터 입출력에 대해 알아보자 window와 document ✔️ window: 브라우저 창 자체, 자바스크립트 내장 객체로 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체! 브라우저 창 안에 존재하는 모든 요소들의 최상위 부모 객체 (즉, 모든 곳에 적용되기 때문에 생략 가능) => window.alert() -> alert() => window.console.log() -> console.log() ✔️ document: html 파일, 자바스크립트 내장 객체로 웹 문서(html 파일)마다 하나씩 만들어지는 객체 html 문서에 대한 정보들을 가지고 있음, 이 문서에 존재하는 html 태그들의 최상위 부모 *window 객체는 브라우저 창 하나를 의미한다고 보면 되고, ..

[JavaScript] 01_자바스크립트 개요

더보기 JavaScript의 개요에 대해 알아보자 JavaScript 👉🏻 원래 이름은 mocha 👉🏻 개발 시기에 Java가 흥행하면서 JavaScript로 이름을 변경함 (사실 Java랑은 딴판임! 원래라면 브랜드 네임 소송 어쩌고 난리나야 하지만 얘도 출시 후 유명해지면서 서로 윈윈하는 듯함) 👉🏻 프로그래밍 언어가 아닌 스크립트 언어(이미 만들어진 프로그램에 추가 기능 덧붙임) 웹의 3요소 👉🏻 HTML: 웹 문서의 큰 틀(뼈대) 👉🏻 CSS: 스타일(색상, 테두리, 디자인 등) 👉🏻 JavaScript: 웹 문서상에 이벤트가 발생했을 때 실행해야 할 동작들을 처리(동적인 효과) (+) jQuery는 자바 스크립트의 문법을 간략하게 쓸 수 있게끔 해 주는 일종의 라이브러리 스크립트 언어 👉🏻 이미..