Front/JavaScript 27

[JavaScript] append vs appendChild 차이점

둘의 쓰임은 비슷한 것 같다. 검색해보니까 다음과 같이 나왔다. Method 다음 예시를 보면 확실하게 쓰임이 다르지 않을 것을 확인 해 볼 수 있다. 그런데 One key difference between these two methods is that the append method is available on all modern browsers, while the appendChild method is only available on older browsers. Therefore, if you want your code to be compatible with older browsers, you may want to use the appendChild method instead of the append..

Front/JavaScript 2022.12.13

[JavaScript] 자바스크립트 innerHTML 응용하여 사용

일단 자바스크립트의 innerHTML 사용법에 대해서는 이제는 확실히 좀 와닿는것 같다. Method 우선 다음과 같이 테이블을 생성해주는 버튼 그리고 테이블 을 만들어준다. 테이블의 구조는 굳이 다 잡아줄 필요는 없다. 그냥 여기까지만 적어주어도 무방하다. 그리고 자바스크립트 파일에는 버튼을 인식시켜줄 객체를 하나 만들어준다. 나는 makeTable 이라고 하겠다. 그리고 함수를 하나 만들어준다. 사용방법은 다음에 한번에 설명해 두었다. 이렇게 적용시켜 놓으면 만든대로 잘 작동 시킬 수 있다. To be continue..

Front/JavaScript 2022.12.13

[JavaScript] 자바스크립트 innerHTML 사용방법

하루에 하나씩 자바스크립트를 내 것으로 만들어서 서둘러 성장을 해야 겠다. 파이팅이다 ... 그럼 바로 innerHTML Method jsp 단에서는 다음과 같이 선언을 해준다. 근데 다음과 같은 코드 습관은 좋지 않은게 일단 짜여진것 자체가 예쁘게 짜여져 있지 않을 뿐더러, 다음처럼 사용해서 callback 해주는 방법이 가장 예쁜 방식이다. callback 사용하면 좋은 이유는 언제든지 꺼내 먹듯이 본인이 필요할 떄 사용하면 된다. 똑같이 잘 작동한다. 짬뽕해서 한번 사용해보자.... 이렇게 되면 버튼을 눌렀을 때 글씨가 나타나게하는 효과를 줄 수 있게된다.. 굿.... To be continue..

Front/JavaScript 2022.12.12

[JavaScript] 자바스크립트 프레임워크 종류와 순위

이제야 내가 어떤 프레임워크를 사용하고 어떤 자바스크립트를 사용 하고 있는지 개념이 제대로 잡히게된것 같다.. 그래도 이제 와서라도 뒤 늦게 잡히게 되어서 오히려 다행이라고 생각이 된다.. Method https://hackr.io/blog/best-javascript-frameworks 10 Best JavaScript Frameworks to Use in 2022 [Recommended] JavaScript is one of the most popular programming languages and there’s no shortage of frameworks. We list the 10 best JavaScript frameworks in 2022 here. hackr.io (자바스크립트 순위와 설..

Front/JavaScript 2022.12.08

[JavaScript] 자바스크립트의 종류

자바스크립트 코드 짜면서 내가 짜고 있는 코드가 어떤 스크립트 인지도 모르고 짜고 있었다... 일반적으로 내가 가지고 노는 스크립트는 바닐라 스크립트였다.... 그리고 제이쿼리... Method 자바스크립트의 종류는 크개 다섯가지로 분류 해볼 수 있다. 더 많이 있지만, 보편적으로 사용하는 것들만 위주로 이야기를 해보겠다. 다음표를 보면 알 수 있다. 보편적으로 우리가 document.addEventListener('click', aa) 이런식으로 사용하는 방식이 바닐라 스크립트 이다.. 물론 다 할줄 알면서 좋겠지만 하나라도 전문적으로 아는 것이 더 중요하다고 생각한다. To be continue..

Front/JavaScript 2022.12.08

[JavaScript] 자바스크립트 subString 사용방법

호우 정식타건법으로 타이핑을 치려니까 빨라지는 것 같지도 않고 참... 진짜 자신과의 싸움이다... 나는 독수리타법을 교정 할 수 있다!!!!!! 자 그럼 subString 을 어떻게 사용하는지 바로 들어가보자 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring String.prototype.substring() - JavaScript | MDN The substring() method returns the part of the string from the start index up to and excluding the end index, or to the end of the str..

Front/JavaScript 2022.12.06

[JavaScript] 자바스크립트 스코프에 대한 개념

자바스크립트를 footer에 보통 선언해주어서 사용한다. 그런데 만약 자바스크립트를 여러개가 서로를 바라봐야 하는 상태라면 footer에 선언해줄 때 순서에 잘 맞게 선언해주어야 한다. 아니면 로직에서 순서가 꼬여 변수에 무엇이 들어가야되는지 모르게된다. 그럼 정상작동이 어려워 진다. Method 다음과 같은 순서가 뒤틀리게 되면 안된다는 의미이다. 만약 마지막에 와야할 순서가 제대로 된 자리에 오지 않게된다면 아래와 같은 문제가 나타나게된다. 다음을 F12를 눌럿을 때 보게되는 개발자도구이다. config 라는 객체를 현재 못찾고 있다 왜냐하면 config 파일에서 불러와야 되는데 불러오고 있지 못허고있기 때문이다. 자바스크립트 선언을 똑바로 해주니까 정상적으로 작동하게 된것을 확인해 볼 수 있다. T..

Front/JavaScript 2022.12.06

[JavaScript] 자바스크립트 클래스형과 함수형

내가 평소에 사용하는 방법은 함수형 방법이다. 클래스형이 있다는 소리를 듣고 이게 무슨소리인가 싶었다. 바로 들어가보자. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes Classes - JavaScript | MDN Classes are a template for creating objects. They encapsulate data with code to work on that data. Classes in JS are built on prototypes but also have some syntax and semantics that are not shared with ES5 class-like semantics. d..

Front/JavaScript 2022.12.06

[JavaScript] 자바스크립트 Click 이벤트 사용 방법

아우 오른손 독수리 타법을 없애기위해서 지금 강제로 정타로 천천히 타이핑 하고 있는데 정말 아예 안배웠으면 모르겠는데 잘못된 방법으로 배워서 정말 불편하다 그래도 정식 타법으로 돌아가야지 뭔가 나중에도 좋을 것 같다는 생각이든다.. 그럼 바로 들어가보자 ! Method ES6 방법이 가장 많이 사용하는 방법이고 최신에 가까우니까 Javascript ES6 방법으로 글 을 적겠다. getElementById 는 input 절에 들어가는 id="change" 와 같습니다. 다음 을 실행하게 되고 실제 화면을 띄워서 해당 버튼을 클릭하게 되면? console.log("모디파이 작동 중"); 이 정상적으로 잘 작동하는것을 확인 할 수 있다.. 즉, 우리는 콘솔로그를 띄우기 위해서 addEventListner, ..

Front/JavaScript 2022.12.05