07. 자바스크립트 기초
– 글을 쓰는 목적은?
웹사이트 내에서 “액션”을 생성할 때 JavaScript를 사용할 수밖에 없습니다.
– 어떻게 사용되나요? 어디에서 사용됩니까?
Bootstrap을 사용하여 버튼을 만들면 JavaScript를 사용하여 마우스를 가리키면 플로팅되도록 만들 수도 있습니다. 또한 Modal을 사용하려면 JavaScript가 필요합니다.
동작(예: 클릭)을 수행했습니다. -> 화면에 창이 나타나거나 이미지가 변경됩니다. 등.
이러한 것들은 웹사이트가 사용자와 “상호작용”하게 할 수 있습니다.
08. 자바스크립트 기본 문법 기능
JavaScript는 브라우저에서 실행되는 코드입니다.
-출력: console.log();
– 변수 선언 및 값 할당: 변수 이름을 10으로 둡니다. 또는 변수 이름 = “문자열 테스트”를 그대로 둡니다.
※ 대부분의 코드는 줄 끝에 세미콜론( ; )을 생략해도 동작하지만 생략하지 않는 것이 좋습니다.
우리가 만든 게시판의 경우 게시판의 현재 제목이나 작성자와 같은 데이터가 있습니다.
나중에 실제 게시판처럼 기능하기 위해서는 게시판의 제목이 실제로 나타나야 하고 메시지 작성자의 이름이 나타나야 합니다.
그럴 때는 변수에 넣고 출력하면 됩니다.
이는 일부 데이터가 어딘가에서 올 것임을 의미합니다. 예를 들어 게시판에 글을 올린 사람의 이름이나 직위가 들어오면 변수에 써서 화면에 표시해야 합니다. 그래서 변수가 필요합니다.
변수를 사용하여 변경하려는 태그를 가리키거나 해당 태그를 제어하고 조작합니다.
(예: 페이드 인 또는 페이드 아웃 등)
09. 자바스크립트 기본 문법: 제어문 (1) 조건문
※코드에서 줄 바꿈이 필요한 경우 Shift + Enter를 눌러야 합니다.
– if 조건문
조건이 참인지 거짓인지에 따라 포함된 코드가 실행되는지 여부가 결정됩니다.
그렇기 때문에 일반적으로 변수와 함께 사용됩니다.
만약에
그렇지 않으면
그렇지 않으면 그렇지 않으면
10. 자바스크립트 기초문법: 제어문 (2) 반복문
– for 루프
11. Javascript 기본 구문: 함수 및 이벤트
클릭 행위 자체를 이벤트라고 합니다. 이러한 이벤트가 여러 개 있습니다.
(예: 스크롤을 움직이거나 특정 태그에 마우스를 올려놓는 것과 같은 이벤트)
이러한 이벤트가 발생하면 코드를 실행할 수 있습니다.
HTML의 헤드 부분에 Script라는 영역을 만들고 작성해야 합니다.
현재 코드에서는 스크립트에 함수가 생성되어 있고, body 태그에서 함수 호출 버튼을 누르면 myfunc가 실행되는 것을 확인할 수 있습니다.
12. 포럼 목록에 클릭 이벤트 첨부
함수를 생성할 때 변수 이름을 제공하면 나중에 함수를 호출할 때 값을 전달할 수 있습니다.
각각의 기능은 동일하지만 사용되는 곳에 값을 전달하여 다른 동작을 수행하도록 할 수 있습니다.
(교육)
위 그림과 같이 함수를 생성합니다.
각 게시물 태그에 onclick 이벤트를 포함하여 함수를 호출할 수 있습니다.
————————————————– ————————————————– ————————————————– ———–
1주차 청소
HTML
사용되는 기본 태그는 html, head 및 body입니다.
강의에서 사용되는 표를 사용할 때 사용되는 태그는 thead(제목), tbody(본문), tr(행), td(셀), th(셀이 표시될 때 헤더로 사용되는 태그)입니다.
가상의 정사각형 공간을 만드는 div
* 대부분의 태그는 여는 태그와 닫는 태그로 만들어집니다.
CSS
HTML로 작성하거나 별도의 파일을 만들어 가져갈 수 있습니다.
클래스 속성으로 사용하는 경우 . 추가하여 사용됨(예: .my-table )
js
함수가 생성되는 방식을 기억해야 합니다. + 사용 방법
사용시 이벤트와 관련하여 사용하였습니다.
————————————————– ————————————————– ————————————————– ———–
당당시장 과제
Bootstrap의 미디어 목록 및 목록 그룹 사용
문자를 끊을 수 없어서 코드를
태그를 삽입한 다음 클래스를 삽입한 다음 하단 여백을 0으로 지정하여 일치시킵니다.