IT이야기/JS&nodeJS (10) 썸네일형 리스트형 JavaScript , TypeScript도 사용가능한 특문 없애기 정규식 let test = '' test= test.replace(/["*+?^${}()|[\]\\]/g, '') 일반 js 정규식을 사용할 경우 typescript에서는 에러가 난다. 일반적으로 js에서 사용하는 특문 없애는 정규식은 /[\{\}\[\]\/?.,;:|\)*~`!^\-_+@\#$%&\\\=\(\'\"]/g 이것. 하지만 특정 특수문자에 때문에 에러가 난다... 그래서 필요한것만 간출여서 사용했지만 typescript용 정규식은 좀더 공부가 필요할 듯 싶다. 너무 깐깐해서 짜증나지만 그래도 편한 기능이 있어서 사용할때는 어쩔 수 없는듯... JS Array 이해, push(), pop(), sort(), splice() 이전 포스팅에서는 실제 사용했던 것을 정리했다면 오늘은 간단하게 배열에 대해 이해해보겠다! 배열(Array)은 JavaScript 객체의 특수한 형태로써, 객체의 프로퍼티명이 0부터 시작해서 순차적으로 커지는 자연수로 이루어진 형태라고 생각할 수 있습니다. 이를 통해 어떠한 데이터를 순차적으로 저장하거나 조회하는데 유용하게 사용됩니다. 자바스크립트 배열은 Array 타입 객체가 제공하는 메서드들을 사용하여 손쉽게 배열 조작을 처리할 수 있습니다. 배열의 기초 배열은 값을 순차적으로 저장하는 용도로 사용합니다. 배열의 표기 형식은 아래처럼 대괄호 [] 를 이용해 표기하며 내부에는 어떠한 데이터 타입도 제약없이 값으로 사용할 수 있습니다. 하지만 결국은 동일한 데이터 타입을 나열하는 용도로 주로 사용하게 됩.. js 배열로 심플하게 데이터 밀어넣기! javascript에서 배열을 이용하여 원하는 데이터를 처리해야할 때가 많다. 혹은 json으로 넘기기 위해 사전 작업을 하는데 다양한 방법중 찾던 방식이 보이지 않아 그냥 직접 만듬. 원하는 방식은 [ 0: {id: "abc", name: "테스트", content: "안녕!"}, 1: {id: "abc2", name: "테스트2", content: "안녕2!}] 이런식으로 데이터를 셋팅해서 원하는 데이터를 뽑기 위함! 어려워 보이지만 매우 쉽게 가능하다. 먼저 배열을 만든다! let test: [] 그 후에 test.push({id: abc, name: 테스트, content: 안녕!}) 이런식으로 push를 한다. 연속해서 넣을때는 for문을 이용하여 넣으면 순차적으로 0: id: "abc", na.. javascript form onsubmit 시 return 활용법! 가끔 form에서 submit을 하려고 하면 다양한 에러사항이 꼿힐때가 많다. 필수 입력만을 할떄는 required를 사용하여 해줄 수 있다. 하지만 required에서 입력이 됐지만 내가 원하는 형식이 아닐때 js 처리를 하려고 했더니 이미 submit으로 묻지도 따지지도 않고 실행! 그래서 버튼을 이용해 onlclick 이벤트로 직접 js에서 submit을 하려 했더니 이럴수가! required가 동작을 안한다. 이것은 동작 순서의 차이에 의해 required를 체크하기전에 js부터 실행을 해버려서 그렇다. 그러니 이 두마리의 토끼를 다 잡으려면 아래와 같이 해주면 된다. 그러면 원하는 js에서의 조건과 required를 동시 사용 할 수 있다! f는 test(f)로 지정해서 f를 연결자로 사용한것... js개발자라면 알아야할 핵심컨셉 33개 2탄 Primitive Types 먼저 Primitve Types이란 무엇을 뜻할까? 말 그대로 원시적, 기초적 타입을 의미함 먼저 String 타입은 양끝에 쌍 따옴표(")로 구분함 "hello" 이런식으로. 물론 'hello' 이렇게도 사용이 가능하지만 'hello" 이렇게는 사용이 안됨. 이것이 String의 규칙임 그리고 만약 "hello my"name is"" 이런식으로 했다면 이것 역시 에러. 왜냐면 name is를 text로 인식하기 때문 그러면 스트링 안에서 "를 쓰고싶으면 어떻게 할까? "hello my \"name is\"" 바로 역슬래쉬를 이런식으루 붙여주면 hello my "name is" 이런식으로 동작하게 된다. 그러면 numer 숫자의 경우는? 그리고 true, false의 경우가 있는데 true를 그냥 쓰면 .. js개발자라면 알아야할 핵심컨셉 33개 1-2탄 call stack call stack에서 스택이 붕괴될때 에러가 나는 현상이 있음. 뭐냐면 function hello (){ bye(); } function bye(){ hello(); } hello(); 이렇게 코드를 짜고 실행을 하면 오류가 나는데 이를 맥시멈 콜스텍 사이즈를 초과했다 고함. 즉 스텍을에 올릴 수 있는 한계치가 있다는것! 즉 서로 무한이 호출 하게 했다가는 이런 오류가 나며 지나치게 많이 올려도 동일 오류가 나니 참고할것 초간단 새로고침 없이 form 전송하기! ajax 거두절미하고 바로 시작한다! 참고로 ajax는 jquery에서 동작하기때문에 jquery라이브러리를 꼭 head에 넣도록 하자! $.ajax({ type: 'POST', url: "test.php", //전송할 url data: $('#tt').serialize(), //form id를 입력하자 success: function(response) { //성공했을시의 동작. //$("#commentList").append("Name:" + $("#name").val() + "comment:" + $("#body").val()); }, error: function() { //오류났을때 동작 alert("There was an error submitting comment"); } }); 대충 보면 알것이다. 아.. html 에서 html 나누기! js로 가능. 파일명 meun.js var menu= '분할하고 싶은 html의 소스를 이곳에다 넣기! '; //해당 메뉴에 필요한 javascript 소스는 밑쪽에다가 같이 두면 됨. function popup(){ var url = "login.html"; var name = "popup test"; var option = "width = 500, height = 500, top = 100, left = 200, location = no" window.open(url, name, option); } document.write(menu); //매뉴 출력 파일명 index.html 원하는 위치에 이렇게 만든 파일 경로를 맞춰서 입력하면 끝! 사실 html 자체로만 웹을 만들 일은 없기에 보통은 웹 언어 php, jsp.. 이전 1 2 다음