기본개념
sts에서 html파일을 생성하여 js를 삽입한다. js는 head나 body태그내 삽입이 가능하고 외부스크립트를 불러올 수도 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" href="images/favicon.ico">
<style>
b {color: blue};
</style>
</head>
<body>
<h2>클라이언트 입니다</h2>
<div style="color: cyan">현재 시간</div>
<div id="div1"></div>
<!--html이들어가는곳-->
<script>//자바 스크립트가 들어가는 곳
let today = new Date();
let now = today.toLocaleString();
alert(now);
</script>
</body>
</html>외부스크립트를 부르는 방법
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" href="images/favicon.ico">
<!-- js외부 스크립트 사용 html의 link href와 같음 -->
<!-- 여러개의 script들이 공통으로 쓰는 함수들을 필요할때마다 사용하기 위해서-->
<script src="js/bulb_onoff.js"> </script>
<!-- 내부 스크립트 -->
<script></script>
</head>이때, 이클립스가 실행되는 중에만 운영되는 가상 서버가 tomcat서버이다.
See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.
객체에 접근하는 방법
1. 점 표기법 (Dot Notation)
속성 이름이 유효한 식별자일 때 사용한다.
div1.style.color = "blue";
2. 대괄호 표기법 (Bracket Notation)
속성 이름이 유효한 식별자이거나, 공백이나 특수 문자가 포함될 때 사용한다.
div1.style['background-color'] = "yellow";div1.style.backgroundColor="yellow";div1.style.backgroundColor="yellow"; - 대신 대문자로 대체
div1.style.background-color="yellow";⚠️대괄호없이 -를 쓸경우 에러가 난다.
이때, 자바 스크립트는 콘솔에서만 오류확인가능 ~> console.log()명령어를 사용한다.
:Uncaught SyntaxError: Invalid left-hand side in assignment-->
객체의 모든 속성을 순회하는 방법으로 for...in 루프를 사용할 수 있다
for (let key in person) {
console.log(key, person[key]);
}응용 예제
const header = document.createElement('h1');
header.innerHTML = '펭귄 그림';
header.style.color = 'orange';document.createElement('h1'): 새로운 h1 요소를 생성한다.
header.innerHTML: 생성한 h1 요소에 "펭귄 그림"이라는 텍스트를 추가한다.
header.style: CSS 스타일을 JavaScript로 직접 설정한다. 주황색 글자를 설정한다.
document.body.innerHTML += '<h1 style="color:orange">펭귄 그림</h1>';위 코드와 결과가 동일하다
header.style.fontFamily = '궁서체';
header.style.border = '2px solid red';
header.style.backgroundColor = 'lightblue';
header.style['text-decoration'] = 'underline';
header.v = '234'; // v 속성이 HTML에서 생성되지 않음
document.body.appendChild(header);
header.style.property : 궁서체, 빨간색 테두리, 연한 파란색 배경, 밑줄을 설정한다.
header.v = '234';: v 속성을 JavaScript 객체에 추가하지만, 이 속성은 HTML에서 인식되지 않는다.
document.body.appendChild(header);: 생성한 h1 요소를 문서에 추가한다.
const img = document.createElement('img');
img.setAttribute('src', 'images/Penguins.jpg');
img.setAttribute('width', '500');
img.setAttribute('height', '500');
img.setAttribute('v', '345'); // 사용자 정의 속성
img.setAttribute('data-v', '567'); // data 속성
document.body.appendChild(img);- document.createElement('img'): 새로운 이미지 요소를 생성한다.
- img.setAttribute('property','값'): 여러 속성을 설정한다. src, width, height, 사용자 정의 속성 v, 그리고 data-v 속성을 추가한다. 이 경우 v는 일반 속성으로, data-v는 HTML5의 데이터 속성으로 사용된다.
- document.body.appendChild(img);: 생성한 이미지 요소를 문서에 추가한다.
console.dir(img.attributes.v); // v="345"
console.dir(img.dataset.v); // 567const img2 = document.createElement('img');
img2.src = 'images/Penguins.jpg';
img2.width = 500;
img2.height = 350;
img2.v = 567; // 사용자 정의 속성
document.body.appendChild(img2);- img.property: 여러 속성을 설정한다. src, width, height, 사용자 정의 속성 v, 그리고 data-v 속성을 추가한다.
참고: [html/css]이미지 태그(삽입),css적용
[html/css]이미지 태그(삽입),css적용
이미지 넣기 형식 css사용방법 1. external style :외부 파일에 css를 저장하고 불러옴. 2. internal style : 내부 파일에 3. inline style : tag에 style 속성 사용 외부 스타일 파일을 불러온다(여러파일공통스타일
o94777.tistory.com
'JAVACSCRIPT' 카테고리의 다른 글
| [js] 배열 (0) | 2024.09.17 |
|---|---|
| [js]주요 이벤트(drag and drop) (0) | 2024.09.16 |
| [js]java script 연산자 (0) | 2024.09.16 |
| [js]자바스크립트의 data type(데이터 종류) (1) | 2024.09.16 |
| [JS] javascript 변수생성 (10) | 2024.09.14 |