WINK-(Web & App)/HTML & CSS & JS 스터디 (128) 썸네일형 리스트형 [2024 신입부원 기초 스터디] 이서영 #3주차 (JS_수정) 자바스크립트 : 웹 페이지에서 기능을 구현할 수 있게 해주는 언어 1. 기능웹의 요소 제어 - html, css로 처리할 수 없는 것들을 js로 처리다양한 프레임워크, 라이브러리 사용 (React, Vue)백엔드(서버) 개발 (Node JS - Express JS)2. 특징프로그래밍 언어 : 사이트에 기능을 넣어줌인터프리터 언어 : 개발과정이 빠르고 유연, 버그가 덜 걸러짐, 실행 조금 느림동적 자료형 : 코딩의 자유로움3. 실습 환경 세팅- 개발자 도구 열기윈도우 : Ctrl + Shift + i맥 : Command + Option + i- 콘솔 내용 클리어윈도우, 맥 : Ctrl + l [자바스크립트 사용 방법] 1. html 내부 타언어의 print 같은 역할괄호 안에 출력할 값 입력 -> 개발자를.. [2024 신입부원 기초 스터디] 김지나 #4주차 - DOM(Document Object Model): 웹 문서를 제어하기 위해 개발된 언어: 컨텐츠 변경, 추가, 제거 등 html 문서를 조작하기 위해 만들어진 언어: 스크립트 언어로 html 요소를 제어할 수 있도록 웹문서를 객체화한 것 - Document: 자바스크립트에서 DOM 접근을 위해 쓰이는 Interface let element, elements;element = document.getElementById("Id"); // id 속성값으로 요소 찾기elements = document.getElementByClassName("className"); // class 속성값으로 요소 찾기element = document.querySelector("selector") //셀렉터를 통해 요소 찾기e.. [2024 신입부원 기초 스터디] 김민서 #4주차 DOMJavaScirpt웹 문서를 제어하기 위해 개발컨텐츠 변경, 추가 제거 등의 html 문서 조작을 위해 만들어짐DOM(Document Object Model) - 스크립트 언어로 html 요소를 제어할 수 있도록 웹문서를 객체화 Document - 자바스크립트에서 DOM 접근을 위해 쓰이는 인터페이스 document.querySelector("#id"); 셀렉터를 통해 특정 id 속성값을 가진 요소를 찾음document.querySelector(".class-name"); 셀렉터를 통해 특정 class를 가진 요소를 찾음document.querySelector("input"); 셀렉터를 통해 특정 태그를 찾음 htmlhead - titlebody - h1, p append() : DOM에 새로운 .. [2024 신입부원 기초 스터디] 김태일 #4주차 본 글은 다음 수업자료를 참고하여 정리한 글입니다.01. javascript- 웹 문서를 제어하기 위해 개발된 언어- html문서를 조작하기 위해 만들어진 언어 02. dom- 스크립트 언어로 html요소를 제어할 수 있도록 웹문서를 객체화 한 것 03. document- 자바스크립트에서 dom접근을 위해 쓰이는 interface 04. 예제 Hello, world! How are you? let title = document.createElement("title"); //create Element를 통해 title요소 생성title.append("My first web page"); //title에 append를 이용해 "My .. [2024 신입부원 기초 스터디] 정채은 #3주차 (JS) 자바 스크립트란? (js)- 웹페이지에 생동감을 불어넣기 위해 만들어진 언어!!!!!!자바 스크립트로 할 수 있는 것?1.웹의 요소 제어• HTML, CSS로 처리할 수 없는 것들을 JS로 처리2. 다양한 프레임워크, 라이브러리 사용• React, Vue3. 백엔드(서버) 개발• Node JS ‒ Express JS 자바스크립트 사용 방법html 내부script> console.log("Hi");script> html 외부!ㅡㅡ index.html ㅡㅡ>body> script src="test.js">script>body> // test.jsconsole.log("Hi"); 자바스크립트 문법실행문은 세미콜론(;)으로 구분let str1 = "Hi";let str2 = "World";console.log(.. [2024 신입부원 기초 스터디] 강보경 #3주차 JavaScript란?웹 페이지에서 복잡한 기능을 구현할 수 있는 스크립팅 또는 프로그래밍 언어HTML, CSS와 함께 웹을 구성하는 요소클라이언트 단에서 웹 페이지가 동작하게 하는 것을 담당 JavaScript의 사용1. HTML 내부 2. HTML 외부 // test.jsconsole.log("Hello World!"); JavaScript 문법자바스크립트 실행문은 세미콜론(;)으로 구분한다.let str1 = "Hello";let str2 = "World!";console.log('${str1} ${str2}'); 1. 주석주석 또는 코멘트(comment)는 프로그래밍에 있어 내용을 메모하는 목적으로 쓰인다.소스 코드를 더 쉽게 이해할 수 있게 만드는 것이 주 목적이며, 협업할 때 .. [2024 신입부원 기초 스터디] 황수민 #3주차 JavaScript(자바스크립트)란?웹페이지에 생동감을 불어넣기 위해 만들어진 언어HTML, CSS로 처리할 수 없는 웹의 요소들을 처리할 수 있음.React, Vue 등 다양한 프레임워크, 라이브러리 사용 가능백엔드(서버) 개발에도 사용할 수 있음. (Node.js + Express)JS는 HTML파일 내부와 외부에서 사용이 가능하며, 각각의 사용 방법은 아래와 같다. 1. HTML 내부 2. HTML 외부 //test.jsconsole.log("Hello, world!"); JS 실행문은 세미콜론(;)으로 구분한다. (생략해도 동작은 한다.) 주석//주석은 이렇게 '//'로 작성할 수 있습니다. 변수 선언 var 변수1 = "var 사용은 권장되지 않음";let 변수2 = "변수는 let으로!";c.. [2024 신입부원 기초 스터디] 백채린 #3주차 (JS) 자바스크립트란?- Ecma International의 프로토타입 기반의 프로그래밍 언어로, 스크립트 언어에 해당- 웹 페이지가 동작하는 것을 담당→ "웹 페이지에 생동감을 불어 넣기 위해 만들어진 언어" 자바스크립트는?- 웹의 요소 제어• HTML, CSS로 처리할 수 없는 것들을 JS로 처리- 다양한 프레임워크, 라이브러리 사용 - 다양한 프레임워크, 라이브러리 사용• React (오픈 소스 자바스크립트 라이브러리),• Vue (자바스크립트로 개발된 프론트엔드 프레임워크)- 백엔드(서버) 개발• Node JS - Express JS* Node JS: 브라우저 안에서만 작동하던 JavaScript를 브라우저 외의 환경에서 작동할 수 있게 만들어 준 런타임 환경* ExpressJS: Node.js 환경을 .. 이전 1 2 3 4 5 6 7 ··· 16 다음