🦁멋사12기세션_JavaScript

쩡이·2024년 8월 10일

멋사12기 멋사세션 프론트엔드

최애의 사자🦁

목록 보기

2/2

html, css에 실질적으로 기능을 부여해보자!

처음에는 어색할수 있지만 class 이름을 찾는데 마음을 급하게 먹지말고, 나름의 규칙을 정해서 변수 이름을 정해보고, 개발자 도구를 사용해서 정확한 변수를 찾아보세요🤗

<script>태그를 사용해서 JS파일을 적용시키기
웹 브라우저의 동작을 제어하거나 데이터와 실행 가능한 코드를 html에 포함할 수 있다.

html
<!-- 기본 예시: 콘솔창에 Hello World를 띄워봅시다-->
<script>
	console.log("Hello World!")
</script>

<!-- src 속성은 외부 스크립트 파일을 URL을 통해 가져옵니다 -->
<script src="../js/main.js"></script>

main.html 파일에서 </body>가 끝나는 부분에서 <script> 태그를 삽입해서 JS문법을 사용할수 있도록 열어줍니다

이후 개발자 도구를 열어서 Hello World가 콘솔창에 잘 띄워지는지 확인해봅시다

js 폴더를 만들어서 main.js 파일과 base.js 파일을 만들어줍니다

Console이 뭔가요?

거창한거 없이 terminal 창으로 생각하면 됩니다

우리가 작성한 코드들이 잘 돌아가고 있는지 실시간으로 확인할수 있는

💡 `<script>` 태그의 위치는 어디가 가장 좋을까?

<head> 태그 내부
<body> 태그의 맨 마지막
또는 <body> 태그 이후

❗위 html 코드에서 <body> 태그가 시작할 때 <script> 태그가 있는 이유는 네브바는 가장 위에 위치해야 하기 때문입니다. html 코드는 한 줄씩 읽어 내려가기 때문에 가장 먼저 로드되도록 했습니다.

<script> 태그의 추가적인 속성 (async, defer) 에 대한 설명은 아래 링크를 참조해주세요.

[HTML <script> 태그]

navbar와 footer의 경우 모든 html 파일의 <body> 태그 맨 처음과 맨 끝에 붙여넣기하는 형태로 불러올수 있지만, 좀 더 간결하게 코드를 짜볼까요?

function LoadNAVBAR()

먼저 LoadNAVBAR()라는 함수를 정의해줍니다

파라미터(괄호 안에 있는 매개변수)가 비어있습니다.
return값이 없습니다 →void 형태
- 저번세션때 배운 Java 함수에서는 괄호 안에 매개변수가 존재했습니다 →두 가지 int값을 입력하면 결과값으로 a+b인 c값이 출력됩니다

int addsumnumber(int a, int b)
{
	int c = a+b;
	return c;
}

함수 내부에 const 형태의 변수로 html에서 사용한 class를 js의 변수 형태로 불러옵니다.

getElementsByTagName은 document클래스의 method 입니다.

Tag로 선언한 HTML요소를 찾아서 allElements에 부여해줍니다

→우리는 navbar.html 파일 전체를 Tag로 지정해서 allElements 변수에 대입할 것입니다.

→ *로 표시하게 되면 html 파일 전체의 요소를 가리킵니다

조금 응용하게 된다면

id로 선언한 HTML 요소는 getElementsByID
class로 선언한 HTML 요소는 getElementsByClassName

이런식으로 선언할수 있습니다.

main.html 파일로 넘어와서, JS파일이 인식할수 있도록 태그 이름을 지정해줍니다

✏️결론 : allElements 변수에 Tag 기능을 사용해서 navbar.html 파일 전체를 지정했습니다
for문과 배열의 성질을 이용해서 해당하는 변수의 Attribute(속성)에 접근합니다

우리는 태그의 속성에 접근할거니까 이렇게 써주세요!

class, method, Attribute가 무엇인가요?🧐

class는 나중에 좀 더 자세히 다룰 중요한 프로그래밍 개념입니다

혹시 객체지향프로그래밍에 대해서 들어본적이 있나요?

프로그래밍에서는 현실세계에 있는 모든 물건들을 객체 라고 표현 → 이 객체들을 컴퓨터(가상환경)에 구현하는 것이 객체지향프로그램의 목표입니다

소학2학년들도 1년 내내 전공에서 배우는 부분인 만큼 이해가 쉽지 않다고 스트레스를 받기보다는, 이런게 있구나! 라고 가볍게 생각해주셨으면 좋겠습니다

public class Pokemon {
    int dogam_num;
    String region;
    String name;
    String pokemon_type;
    String action;

    //프로그램을 시작한다고 알려줌
    public static void main(String[] args) {
        Pokemon pikachu = new Pokemon(); //새로운 포켓몬 객체 생성
        Pokemon purin = new Pokemon();

        pikachu.startAttack("백만볼트");
        System.out.println(pikachu.action);
        purin.pokemon_type = "페어리";
        System.out.println(purin.pokemon_type);
    }

    //객체변수에 접근
    public void startAttack(String action){
        this.action = action; //변수의 초기화
    }
}

navpath에 잘 접근했다면, 다음과 같은 if문을 작성해볼겁니다!

XMLHttpRequest객체를 인스턴스로 갖는 새로운 객체 xhttp를사용해서 전체 페이지와 상호작용 하도록 만들어주세요

XMLHttpRequest 의 onreadystatechange 속성을 통해서 서버로부터 응답이 잘 들어왔는지 확인해줍니다

readyState는 XMLHttpRequest 객체의 현재 상태를 나타냅니다.
readyState의 값이 변하면,onreadystatechange 값도 변합니다
status는 서버의 문서 상태를 나타냅니다.
readyState가 4이면 요청한 데이터의 처리가 완료되어 응답할 준비가 된 상태입니다
status가 200이면 서버가 문서에 존재한다는 뜻입니다

html의 모든 element를 담은 배열을 우리는 el이라고 정의했습니다
innerHTML 속성을 사용해서 내부의 모든 html 파일에 접근해줍니다.

요청한 값이 맞으면 → readyState ==4 일때 또는 status==200일때
responseText 속성을 통해서 navbar.html에 있는 모든 내용들을 출력해줍니다

원래 상태로 되돌려줍니다

getAttribute로 지정해줬던 Tag를 해제해줍니다
처음에 지정했던 LoadNAVBAR() 함수를 동작시켜줍니다

XMLHttpRequest의 내장함수인 open을 불러옵니다

open 함수의 구성요소
- GET : http 서버에서 리소스를 요청
- 접근 url : navpath로 지정해둔 navbar.html
- true : 나중에 백에서 설명할텐데, 일단 디폴트 값이니 입력해두도록 합시다

XMLHttpRequest의 내장함수인 send를 실행시킵니다
return 값을 입력해줍니다
→ 우리가 만든 함수는 void 이므로 리턴값이 없습니다!

💻실습- HOME버튼을 눌렀을때 메인페이지로 되돌아가기

function : 구현할 함수를 결정해서 웹페이지에 동적기능 부여

HTML, CSS만 작성하고 끝난 요소들이라면 버튼을 클릭했을때 아무일도 일어나지 않을겁니다😢
여기에 개발자가 직접 함수를 만들어서 “클릭”이라는 기능을 수행했을때 시킬 일을 결정합니다
nav바에 있는 HOME버튼을 누르면 메인페이지로 다시 돌아가기

~~있어보이게 redirect 해준다고도 합니다~~
1. backToMain() 함수를 만들어줍니다
2. location.href 명령어를 통해서 navbar.html 페이지 경로를 지정해줍니다
3. navbar.html에 onclick 기능을 부여합니다

과제 - JS에서 LoadFOOTER 함수 작성하고 주석 달기

마감일시 : 4월 8일 23:59

navbar, footer 삽입 기능을 업데이트하고 push한 이후에 깃 레포를 올려주세요

모든 페이지에서 navbar, footer가 나타나야 합니다
홈버튼을 눌렀을때 main.htm가 나타나야 합니다
주석을 꼭 달아주세요! 코드를 복붙하지 말고 꼼꼼히 분석해보는 시간을 가져주세요 → 오늘 세션 자료는 과제 마감이 끝나고 공유해드릴 예정입니다 예시 : this를 왜 썼는지, 변수 지정은 왜그렇게 했는지

java의 클래스에 대해서 공부하고, 스스로 예시를 만들어서 파일을 업로드해주세요

jjeongee_Pokemon_class.zip

쩡이

여기 초과학기가 확정되어 울면서 학교를 다니는 사람이 있습니다.

이전 포스트

🦁멋사12기세션_JavaScript

최애의 사자🦁

Console이 뭔가요?

💡 `<script>` 태그의 위치는 어디가 가장 좋을까?

💻실습- navbar, footer를 모든 웹페이지에서 적용시키기

class, method, Attribute가 무엇인가요?🧐

💻실습- HOME버튼을 눌렀을때 메인페이지로 되돌아가기

과제 - JS에서 LoadFOOTER 함수 작성하고 주석 달기

🦁멋사12기세션_HTML과 CSS

0개의 댓글

🦁멋사12기세션_JavaScript

최애의 사자🦁

Console이 뭔가요?

💡 <script> 태그의 위치는 어디가 가장 좋을까?

💻실습- navbar, footer를 모든 웹페이지에서 적용시키기

class, method, Attribute가 무엇인가요?🧐

💻실습- HOME버튼을 눌렀을때 메인페이지로 되돌아가기

과제 - JS에서 LoadFOOTER 함수 작성하고 주석 달기

🦁멋사12기세션_HTML과 CSS

0개의 댓글

💡 `<script>` 태그의 위치는 어디가 가장 좋을까?