Java Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hello</title>
</head>
<body>
<script>
document.writeln( /* 사용자에게 보여지는 */
"<p style='color:red;font-size:30pt'>Hello, JavaScript!!!</p>");
console.log("Hello, World"); /* 개발자에게 보여주는 */
</script>
</body>
</html>
-------------------------------------------------
입력 받는
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hello</title>
<style>
body{ background-color: yellow}
</style>
<script>
function hello(){ /* body가 로딩이 끝나면 */
var irum = prompt("당신의 이름은 ? ", "");
alert("Welcome!!!" + irum + "님!!!");
}
</script>
</head>
<body onload="hello()">
</body>
</html>
----------------------------------
입력, 출력
hello2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hello</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/javascript.js"></script>
</head>
<body>
<h2>이름을 입력해 주세요.</h2>
<form>
<p><label>성을 입력해 주세요.
<input type="text" name="familyName"></label></p>
<p><label>이름을 입력해 주세요.
<input type="text" name="irum"></label></p>
<p><input type="button" value="전송하기" onclick="setFullname()"></p>
<p><input type="text" name="result"></p>
</form>
</body>
</html>
javascript.js
function setFullname(){
var firstName = document.forms[0].familyName.value;
var secondName = document.forms[0].irum.value;
var fullName = firstName + " " + secondName;
document.forms[0].result.value = fullName;
}
style.css
body {
background-color: white;
font-family: Arial, Helvetica, Sans-serif;
}
input[type="text"]{
width:50px;
border:1px solid #ccc;
}
input[type="button"]{
font-size:25pt;
background-color: navy;
color:red;
}
input[name="result"]{
width:200px;
border:none;
font-size:1.5em;
color:green;
}
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
두 정수의 곱 계산
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hello3</title>
<style>
body{
font-size:2em;
}
input[type="number"], input[type="text"]{
font-size:30pt;
background-color: yellow;
text-align:right;
width:150px;
}
input[type="button"]{
font-size:1.5em;
}
</style>
<script>
function calc(){ /* 자바스크립트에서는 텍스트박스의 내용이 자동정수로 바뀜. 더하기는 안됨 */
var result = document.forms[0].firstNumber.value *
document.forms[0].secondNumber.value;
document.forms[0].result.value = result;
}
</script>
</head>
<body>
<h2>계산기</h2>
<form>
<input type="number" name="firstNumber" value="0"> X
<input type="number" name="secondNumber" value="0"> =
<input type="text" name="result">
<input type="button" value="계산하기" onclick="calc()">
</form>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
버튼 색 클릭으로 백그라운드 색 바꾸는
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello4</title>
<style>
#red{ color:red;font-size:25pt;background-color: blue;}
#blue { color:blue;font-size:25pt;background-color: red;}
</style>
<script>
function change(str){
if(str == "red"){
document.body.style.backgroundColor = '#ff0000';
}else{
document.body.style.backgroundColor = '#0000ff';
}
}
</script>
</head>
<body>
<button id="red" onclick="change('red')">RED</button>
<button id="blue" onclick="change('blue')">BLUE</button>
</body>
</html>
만약 onclick를 onmouseover로 바꾸면 마우스가 버튼 위로 올라갔을 때 색 변경됨
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
곱 계산을 js파일 html 파일 나눠서
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript 위치</title>
<style>
body{
font-size:2em;
}
input[type="number"], input[type="text"]{
font-size:30pt;
background-color: yellow;
text-align:right;
width:150px;
}
input[type="button"]{
font-size:1.5em;
}
</style>
</head>
<body>
<h2>계산기</h2>
<form>
<input type="number" name="firstNumber" value="0"> X
<input type="number" name="secondNumber" value="0"> =
<input type="text" name="result">
<input type="button" value="계산하기" onclick="calc()">
</form>
<script src="js/calc.js"></script>
</body>
</html>
calc.js
function calc(){
var result = document.forms[0].firstNumber.value *
document.forms[0].secondNumber.value;
document.forms[0].result.value = result;
}
자바 스크립트 파일 선언 <script src="js/calc.js"></script> 은 body의 제일 밑이나 head에 있어야 한다.(body가 모두 실행되고 나서 실행 되어야하므로)
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
구구단 5단
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
.aaa{
font-family: "Lucida Fax", Tahoma, Helvetica, Arial, Verdana, Serif;
display:inline-block;
margin:30px;
font-size:25pt;
}
</style>
<script>
//1. HTML 코드를 생산한다.
function myfun(n){
var htmlStr = "<h2>" + n + "단</h2>";
htmlStr += "<p class='aaa'>";
for(var i = 1 ; i <= 9; i++){
htmlStr += n + " x " + i + " = " + n * i + "<br>";
}
htmlStr += "</p>";
document.write(htmlStr);
}
myfun(5);
</script>
</head>
<body>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
두개의 수 받아서 사칙연산
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo1</title>
<style>
body{
font-size:2em;
}
input[type="number"], input[type="text"]{
font-size:30pt;
background-color: yellow;
text-align:right;
width:150px;
}
input[type="button"]{
font-size:1.5em;
}
select {
font-size:2em;
}
</style>
<script>
//연산을 수행한다.
function calc(){
var first = document.forms[0].firstNumber.value;
var second = document.forms[0].secondNumber.value;
var op = document.forms[0].operator.value;
var result;
switch(op){
case "더하기": result = parseInt(first) + parseInt(second); break; /* 더하기는 parseInt 사용하여 정수로 바꿔줘야함 (다른 연산처럼 자동으로 계산안됨)*/
case "빼기": result = first - second ; break;
case "곱하기": result = first * second ; break;
case "나누기": result = first / second; break;
}
document.forms[0].result.value = result;
}
</script>
</head>
<body>
<h2>계산기</h2>
<form>
<input type="number" name="firstNumber" value="0">
<select name="operator">
<option value="더하기">+</option>
<option value="빼기">-</option>
<option value="곱하기">x</option>
<option value="나누기">/</option>
</select>
<input type="number" name="secondNumber" value="0"> =
<input type="text" name="result" disabled>
<input type="button" value="계산하기" onclick="calc()">
</form>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
비만도계산
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo3</title>
<style>
*{
margin:0;padding:0;
}
#wrapper{
width:700px;
}
form{
float:left;
}
fieldset{
width:300px;
height:250px;
border : 1px solid #ccc;
padding:30px;
}
legend{
font-size:1.5em;
font-weight:900;
}
form p{
font-size:1.2em;
padding:5px;
}
input[type="text"]{
width:170px;
text-align:right;
font-size:1.5em;
}
input[type="button"], input[type="reset"]{
width:150px;
font-size:1.5em;
background-color:yellow;
margin-left:10px;
}
#result {
font-size:1.5em;
}
</style>
<script>
window.onload = init;
function init(){
document.getElementById("mybtn").addEventListener("click", calc, false); /* click 이벤트 발생. 함수 calc 호출. false는 전파 안하겠다는 의미 */
}
function calc(){
var height = document.forms[0].height.value / 100;
var weight = document.forms[0].weight.value;
var bmi = weight / (height * height);
var result = document.forms[0].irum.value + "님!!!<br>";
if(bmi < 18.5){
result += "<span style='color:orange;'>저체중(";
}else if(bmi >= 18.5 && bmi < 25.0){
result += "<span style='color:green;'>정상(";
}else if(bmi >= 25.0 && bmi < 30.0){
result += "<span style='color:red;'>과체중(";
}else if(bmi >= 30.0){
result += "<span style='color:red;'>비만(";
}
result += bmi + ")</span>";
document.getElementById('result').innerHTML = result;
}
</script>
</head>
<body>
<div id="wrapper">
<h2>BMI</h2>
<form>
<fieldset>
<legend>Private Information</legend>
<p><label>이름 : <input type="text" name="irum"></label></p>
<p><label>신장 : <input type="text" name="height"></label></p>
<p><label>체중 : <input type="text" name="weight"></label></p>
<p id="result">Result</p>
</fieldset>
<input type="button" id="mybtn" name="mybtn" value="계산하기">
<input type="reset" value="초기화하기">
</form>
</div>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
max , min
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Demo</title>
<script>
window.addEventListener("load", aaa, false);
function aaa(){
var max = Number.MAX_VALUE;
var min = Number.MIN_VALUE;
var str = "JavaScript's 가장 큰 값 = " + max + "<br>";
str += "가장 작은 값 = " + min + " 입니다.";
document.getElementById('result').innerHTML = str;
}
</script>
</head>
<body>
<p id="result">여기</p>
</body>
</html>
출력:
JavaScript's 가장 큰 값 = 1.7976931348623157e+308
가장 작은 값 = 5e-324 입니다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
+ 할 때 조심
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Demo</title>
<script>
window.addEventListener("load", checkNumber, false);
function checkNumber(){
var testA = "1000" + "1";
var testB = "1000" - "1";
var testC = "1000" * "5";
var testD = "1000" / "25";
var str = "\"1000\" + \"1\" = " + testA + "<br>";
str += "\"1000\" - \"1\" = " + testB + "<br>";
str += "\"1000\" x \"5\" = " + testC + "<br>";
str += "\"1000\" / \"25\" = " + testD;
document.getElementById('result').innerHTML = str;
}
</script>
</head>
<body>
<p id="result">여기</p>
</body>
</html>
출력:
"1000" + "1" = 10001
"1000" - "1" = 999
"1000" x "5" = 5000
"1000" / "25" = 40
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
변수의 lifecycle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Demo</title>
<script>
//변수 scope(lifecycle)
testA();
testB();
function testA(){
var scope = "local_A";
document.write(scope); //local_A
}
function testB(){
document.write(scope);
}
</script>
</head>
<body>
</body>
</html>
출력은 local_A 가 하나만나오게된다.
그리고 크롬에서 열었을 떄 ctrl+shift+j 를 눌러서 보면 scope is not defined 의 에러가 뜬다.
--------------------
변수의 lifecycle2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Demo</title>
<script>
//variable's scope
testA();
function testA(){
var scope = "local_A";
document.write(scope);
testB();
function testB(){
document.write(scope);
}
}
</script>
</head>
<body>
</body>
</html>
출력:
local_Alocal_A
----------------------
변수의 lifecycle3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Demo</title>
<script>
//variable's scope
testA();
function testA(){
var scope = "local_A";
document.write(scope);
testB();
function testB(){
var scope = "local_B";
document.write(scope);
}
}
</script>
</head>
<body>
</body>
</html>
출력:
local_Alocal_B
------------------------
변수의 lifecycle4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Demo</title>
<script>
//variable's scope
testA();
function testA(){
var scope = "local_A";
document.write(scope);
testB();
function testB(){
scope = "local_B";
document.write(scope);
}
document.write(scope);
}
</script>
</head>
<body>
</body>
</html>
출력:
local_Alocal_Blocal_B
testB() 에서 scope를 var scope 로 정의해주면 마지막 출력은 local_B가 아닌 local_A가 나온다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
변수의 lifecycle5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Demo</title>
<script>
//variable's scope
var scope = "global";
testA();
testB();
function testA(){
document.write(scope);
}
function testB(){
document.write(scope);
}
</script>
</head>
<body>
</body>
</html>
출력:
globalglobal
scope 을 global variable 로해서 어디서든 출력 가능.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
값복사
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Demo</title>
<script>
//variable's scope
var a = true; //boolean's value
var b = a; //값복사
a = false;
document.write(b);
</script>
</head>
<body>
</body>
</html>
출력:
true
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
배열의 값 복사 : 배열은 객체이므로 주소복사이기 때문에 값이 변하면 따라 바뀜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Demo</title>
<script>
var a = [1,2,3,4];
var b = a;
a[0] = 100;
document.write(b[0]);
</script>
</head>
<body>
</body>
</html>
출력:
100
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
함수 복사 : 함수도 객체이므로 주소복사
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Demo</title>
<script>
var a = function(name){
document.write(name + "님! 환영합니다.");
};
var b = a; //주소복사
b("홍길동");
</script>
</head>
<body>
</body>
</html>
출력:
홍길동님! 환영합니다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
변수의 lifecycle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Demo</title>
<script>
//variable's scope
testA();
function testA(){
var scope = 'local_A';
document.write(scope + "<br>");
testB();
function testB(){
document.write(scope + "<br>");
var scope = 'local_B';
document.write(scope + "<br>");
}
document.write(scope + "<br>");
}
</script>
</head>
<body>
</body>
</html>
출력:
local_A
undefined
local_B
local_A
위에서 undefined는 만들어져있는데 값이 없는 것이다. 이것은 이름을 scope라고 같이써서 그런 것이므로 이런문제가 발생했다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
변수의 lifecycle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Variable</title>
<style>
</style>
<script>
function first_function(){
a = 1;
document.write("first_function's a: " + a +"<br></br>");
second_function();
document.write("first_function's a : " +a+ "<br><br>");
}
function second_function(){
var a= 100;
document.write("second_fuction's a : " +a+ "<br><br>");
}
</script>
</head>
<body>
<script>
first_function();
</script>
</body>
</html>
출력:
first_function's a: 1
second_fuction's a : 100
first_function's a : 1
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
'Java & Oracle' 카테고리의 다른 글
| 자바스크립트 for ~ in, email형식, 객체만들기, 출력을 새창으로, number, string, 달력, date, 시계, math, d-day 계산기 (0) | 2014.05.29 |
|---|---|
| 자바스크립트 배열, 값 접근, delete, in, 성적관리프로그램, 소수구하기, 구구단, 환자 관리 프로그램 (0) | 2014.05.28 |
| layout, navigation, clipping, border-shadow (0) | 2014.05.26 |
| font-family, vertical-align, list-style-type 이미지로, position, float (0) | 2014.05.23 |
| CSS 속성 , selector (0) | 2014.05.22 |