JS (Java Script) 80

페이지의 이동 : form 태그 / 비밀번호 글자수 제한

form 태그 왜쓸까?? 서버로 정보를 전송시키려고 쓰는거다. 그래서 해당 태그 안에 action = "어디로 전송될 것인지 URL 적기" 이렇게 하면, 작성한 URL로 form 태그 안에 적은 내용들이 전송된다. 이렇게도 이용이 가능하다. 새로운 HTML 페이지로 넘어가도록. 이때 form 태그 안에 버튼이 전송, 닫기 이렇게 있다면 전송버튼은 타입이 submit 이여야만 한다. 는 폼 데이터(form date)를 전송하는 제출 버튼(submit button)을 정의하기 때문이다. 또한 닫기 버튼은 타입이 button 이여야 한다. 비밀번호 글자수 제한. 1. minlength, maxlenght 를 이용 그러나, 이 방법은 input의 type이 'text, search, url, tel, email..

JS (Java Script) 2023.06.26

.addEventListener / .on / jQuery 이용시 알면 좋은것들 / click / dblclick / input / change

저번 글에 이어서 이번에는 jQuery 이용시 알면 좋은 것들에 대해 살펴볼 예정인데, 일단 그전에 addEventListener 라는 것에 대해서 언급후 살펴보자. addEventListener 이런 코드를 본적이 있을거당. document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){}) 한눈에 봐도 굉장히 길고 복잡해 보이는데, 사실 이거 저번에 봣던거에서 .addEventListener('click', function(){})이거만 추가된거다. 해석하자면 className이 'navbar-toggler'인데 처음으로 나온 걔 있잖아. 그거 클릭 이벤트가 일어나면 이 함수 실행시켜줘. 한마디로 말하면..

JS (Java Script) 2023.06.26

getElementById, querySelector, $ jQuery

언젠가 멘붕에 빠진날 document.getElementById 블라블라 이런 코드를 봤다. 도대체 이건 또 무슨 코드인가 싶었지만 당장 해결해야 했던 부분이 아니였기에 지나쳤다. 강의를 듣는데 이 코드가 나와서 반가웟다 ㅋㅋㅋ 개념에 대해 정리해 보자. 가려운데 콕 집어서 긁을수 있게 해주는 친구들 getElementById, querySelector, $ document.getElementById( ) 안녕하세요 위와 같은 코드가 잇다고 하자. 근데 나는 "안녕하세요" 를 "안녕"으로 바꾸고 싶다. 그럴땐 저 길고 솰라솰라 하는것처럼 보이는 것을 쓰면 된다. document.getElementById('hello').innerHTML = '안녕'; 이렇게. 이게 무슨말인지 풀어보자면, document..

JS (Java Script) 2023.06.26

class 명 작명에 대하여

1. BEM 방식 (Block Element Modifier) 블록(block), 요소(element), 상태(modifier)로 구분해서 작성 그 블록을 구성하는 단위 / 블록이나 요소의 속성 애플코딩님 강의에서는 이렇게 좀더 쉽게 정리해 주셧다. block__element--modifier 덩어리이름__역할--세부특징 특징으로는 어떠한 목적인지에 초점을 두고, 네이밍 규칙이 좀 엄격한 편이다. 장점 >> 어떤거를 지칭하는 class인지 한눈에 알수 있다. 단점 >> class명이 길고 복잡해져서 한눈에 보기 힘들수 있음 2. oocss 방식 (Object Oriented CSS) CSS를 모듈 방식으로 작성하여 중복을 줄이는 방식. 쉽게 말하면, class 명을 1개가 아닌 여러개로 나눠서 짓는 것...

JS (Java Script) 2023.06.26

jQuery 이용에 앞서 준비해야할 것

https://releases.jquery.com/ jQuery CDN The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr releases.jquery.com 해당 사이트 방문후, minified 를 클릭, 코드를 복사후, html에 붙여넣고, 그 붙여놓은 코드 아래부터 jQuery 사용 가능함. 자바스..

JS (Java Script) 2023.06.25

JS. .toUpperCase( ) / Math 메소드들(.trunc( ) /.ceil( ) /.floor( ) /.sqrt( ) /.pow( ) /.max( )

대문자로 변환하는 메소드 'abc'.toUpperCase( ) 소문자로 변환하는 메소드 'abc'.toLowerCase( ) 소수점은 삭제하고 정수부분만 반환하고 싶을때 사용하는 메소드 (양수, 음수, 문자열 타입의 수 가능) Math.trunc(소수점이 있는 값이 담긴 변수, 혹은 소수점이 있는 수); 정수올림 메소드 : 소수점 부분이 존재하면 정수로 올려서 반환하고 싶을때 사용하는 메소드 . Math.ceil( 수 혹은 변수) 정수로 올림하기 --- Math.ceil(1) : 1 Math.ceil(1.222) : 2 Math.ceil(1.5) : 2 Math.ceil(1.777) : 2 --- null 또는 0 인 경우 --- Math.ceil(null) : 0 Math.ceil(0) : 0 --- ..

JS (Java Script) 2023.05.28

JS 에서의 Map , Set

기존에 있던 객체나 배열만으로는 프로그래밍 적으로 부족한 부분들이 있어서 그걸 보완하기 위해서 등장함. 고게 바로 Map, Set 같은 자료구조(여러가지 자료구조의 형태 예를들면 array(배열) , object(객체) 같은)!! Map과 Set 의 목적 데이터의 구성, 검색, 사용을 효율적으로 처리한다. 기존의 객체 또는 배열보다. Map key 와 value 를 저장하는 객체와 비슷하다. 객체랑 다른 점은 객체는 key 값으로 stri 형태의 타입이 들어오는데, Map에는 key 값으로 어떤 데이터 타입이든 올 수 있다. Map은 key가 정렬된 순서로 저장되기 때문이다. 또한 Map은 대량 데이터를 처리하려고 많이 쓴다. so 반복을 하는 부분이 매우 중요 제공하는 기능들은 키-값 쌍 추가 및 검색..

JS (Java Script) 2023.05.27

JS 단축속성명 / ... / ...args / ` `

1. 단축속성명 (property shorthand) 아래와 같이 변수로 설정된 것과, 객체가 있다. const name = "nbc"; const age = 30; const obj = { name : name age : age }; key - value 로 이루어진 객체를 보면 값에 오는건 실질적인 데이터 이다 . 그래서 값에 오는 이름과 변수로 선언된 이름이 같을 수도 있다. 그런 경우에는 생략이 가능한데 아래와 같다. const obj = { name, age }; 근데 이거 얼핏 보면 마치 배열같다. 그런데 이건 배열이 아니라 단축속성명 으로 이루어진 하나의 객체라는 점을 명심하장 2. ... 전개구문 (spread operator) destructuring과 함께 가장 많이 사용되는 es6 문..

JS (Java Script) 2023.05.26

JS let, const, var / 화살표함수 / 구조분해할당

1. let, const 이전에는 var 라는 키워드로만 변수를 선언할 수 있었다. 다른점이 무었일까? var 재선언 O 재할당 O var a = 10; var a = 12; -------------- var a = 10; a = 12; let 재할당 O 한번 선언하고 할당한 그 변수에 다시 할당 할 수 있는 변수를 선언할 때 많이 쓴다. var a = 10; a = 12; const 재할당 X 한번 선언하고 할당한 그 변수에 다시 할당 할 수 없는 상수를 선언할 때에 많이 쓴다. 2. arrow function (화살표 함수) 1) 기본 함수 선언문 function add ( ) { } 2) 기본함수 표현식 let add = function ( ) { } 3)화살표 함수 let add = ( x ) =..

JS (Java Script) 2023.05.26