Skip to content

Instantly share code, notes, and snippets.

@Yama-to

Yama-to/file0.html

Last active August 29, 2015 14:24
Show Gist options
  • Save Yama-to/7aa357f9b8a04e6be87f to your computer and use it in GitHub Desktop.
Save Yama-to/7aa357f9b8a04e6be87f to your computer and use it in GitHub Desktop.
Download ZIP
忘れがちなJavaScriptの基礎中の基礎 ref: http://qiita.com/Yama-to/items/5e0827dfd2bd440537d0
Raw
file0.html
<script src="index.js"></script>
Raw
file0.js
<script src="index.js"></script>
Raw
file1.js
// コメント
Raw
file10.js
var i = 0;
while (i <= 10) {
console.log(i);
i++;
}
Raw
file11.js
var i = 200;
do {
console.log(i);
i++;
} while (i < 10);
Raw
file12.js
for (var i = 0; i < 10; i++) {
console.log(i);
}
Raw
file13.js
for (var i = 0; i <= 10; i++) {
if (i == 5) {
continue;
}
console.log(i);
}
// 0,1,2,3,4,6,7,8,9,10
Raw
file14.js
for (var i = 0; i <= 10; i++) {
if (i == 5) {
break;
}
console.log(i);
}
// 0,1,2,3,4
Raw
file15.js
alert("hello");
Raw
file16.js
confirm("are you sure?");
Raw
file17.js
prompt("input your name...", "anonymous");
Raw
file18.js
function hello(name) {
return "hello " + name;
}
var hello_name = hello("Tom");
console.log(hello_name);
// => hello Tom
Raw
file19.js
var hello = function(name) {
var msg = "hello " + name;
return msg;
}
var hello_name = hello("Bob");
console.log(hello_name);
// => hello Bob
Raw
file2.js
/*
コメント1
コメント2
コメント3
コメント4
*/
Raw
file20.js
(function (name) {
var user = "Miss. " + name
console.log(user)
})("Ann");
// => Miss. Ann
Raw
file21.js
var i = 0;
function show() {
console.log(i++);
if (i > 3) {
clearInterval(timer);
}
}
var timer = setInterval(show, 1000);
// => 0,1,2,3...
Raw
file22.js
var i = 0;
function show() {
console.log(i++);
}
setTimeout(show, 1000);
// => 0
Raw
file23.js
function show() {
console.log(i++);
var timer = setTimeout(show, 1000);
if (i > 3) {
clearTimeout(timer);
}
}
show();
// => 0,1,2,3...
Raw
file24.js
var foods = ["potato", "banana", "coffee"];
console.log(foods[0]); // => potato
foods[0] = "melon";
console.log(foods) // => ["melon", "banana", "coffee"];
Raw
file25.js
var food = {
name: "tomato",
calory: 120,
color: "red",
taste: "sour"
};
console.log(food.name); // => tomato
console.log(food["calory"]); // => 120
food.color = "yellow";
console.log(food); // => Object {name: "tomato", calory: 120, color: "yellow", taste: "sour"}
Raw
file26.js
var user = {
email: "[email protected]",
address: "Shibuya",
contact: function (name) {
console.log("hello " + name + " from " + this.email);
}
};
user.contact("yam")
// => hello yam from [email protected]
Raw
file27.js
var s = new String("poteto");
console.log(s.length);
// => 6
Raw
file28.js
var s = new String("poteto");
console.log(s.replace("t", "tak"));
// => potaketo
Raw
file29.js
var s = new String("poteto");
console.log(s.substr(2, 3));
// => tet
Raw
file3.js
var msg;
msg = "hello world"
Raw
file30.js
var a = ["banana", "apple", "orange"]
a.shift()
console.log(a) // => ["apple", "orange"]
a.unshift("peach")
console.log(a) // => ["peach", "apple", "orange"]
Raw
file31.js
var a = ["banana", "apple", "orange"];
a.pop();
console.log(a); // => ["banana", "apple"]
a.push("grape");
console.log(a); // => ["banana", "apple", "grape"]
Raw
file32.js
var a = ["banana", "apple", "orange"];
a.splice(0, 2, "cherry", "pineapple", "berry");
console.log(a); // => ["cherry", "pineapple", "berry", "orange"]
Raw
file33.js
console.log(Math.ceil(5.2));
// => 6
Raw
file34.js
console.log(Math.floor(7.8));
// => 7
Raw
file35.js
console.log(Math.round(3.6));
// => 4
Raw
file36.js
var d = new Date();
console.log(d);
// => Wed Jun 10 2015 03:27:27 GMT+0900 (JST)
Raw
file37.js
var d = new Date(2015, 6, 12, 3, 24, 56);
console.log(d)
// => Sun Jul 12 2015 03:24:56 GMT+0900 (JST)
Raw
file38.js
var d = new Date(2015, 5, 10, 3,24,56);
console.log(d.getFullYear()); // => 2015
console.log(d.getMonth()); // => 5
console.log(d.getTime()); // => 1433874296000
Raw
file39.js
console.log(window.outerHeight);
// => 974
Raw
file4.js
var ms1 = "hello world",
ms2 = "ok, google.",
ms3 = "g'day mate.";
Raw
file40.js
window.location.href = 'http://google.com';
// => Googleにリダイレクト
Raw
file41.js
console.log(window.document)
console.log(document)
Raw
file42.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JS-practice</title>
<style type="text/css">
.sampleStyle {
font-weight: bold;
text-decoration: underline;
}
</style>
</head>
<body>
<p id="msg">hello world</p>
<script>
var ele = document.getElementById('msg'); // ①
ele.textContent = 'good-bye world'; // ②
ele.style.color = 'blue'; // ③
ele.className = 'sampleStyle'; // ④
var pgp = document.createElement('p'), // ⑤
txt = document.createTextNode('good-morning world'); // ⑥
document.body.appendChild(pgp).appendChild(txt); // ⑦
</script>
</body>
</html>
Raw
file42.js
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JS-practice</title>
<style type="text/css">
.sampleStyle {
font-weight: bold;
text-decoration: underline;
}
</style>
</head>
<body>
<p id="msg">hello world</p>
<script>
var ele = document.getElementById('msg'); // ①
ele.textContent = 'good-bye world'; // ②
ele.style.color = 'blue'; // ③
ele.className = 'sampleStyle'; // ④
var pgp = document.createElement('p'), // ⑤
txt = document.createTextNode('good-morning world'); // ⑥
document.body.appendChild(pgp).appendChild(txt); // ⑦
</script>
</body>
</html>
Raw
file43.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JS-practice</title>
</head>
<body>
<p id="ary">[Taps] </p>
<button id="btn">PopUp!</button>
<script>
// イベントを設定する対象の指定
var btn = document.getElementById('btn');
// ボタンをクリックした時に行う動作の指定
btn.addEventListener('click', function () {
// ポップアップを表示
var pop = confirm('add text to ary?');
// 実際に変更を加えるための要素の取得と生成
var ary = document.getElementById('ary');
var txt = document.createTextNode("1tap! / ");
// ポップアップで選択した値によって動作を変える
if (pop == true) {
ary.appendChild(txt);
} else {
ary.textContent = "[Taps] ";
}
});
</script>
</body>
</html>
Raw
file43.js
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JS-practice</title>
</head>
<body>
<p id="ary">[Taps] </p>
<button id="btn">PopUp!</button>
<script>
// イベントを設定する対象の指定
var btn = document.getElementById('btn');
// ボタンをクリックした時に行う動作の指定
btn.addEventListener('click', function () {
// ポップアップを表示
var pop = confirm('add text to ary?');
// 実際に変更を加えるための要素の取得と生成
var ary = document.getElementById('ary');
var txt = document.createTextNode("1tap! / ");
// ポップアップで選択した値によって動作を変える
if (pop == true) {
ary.appendChild(txt);
} else {
ary.textContent = "[Taps] ";
}
});
</script>
</body>
</html>
Raw
file5.html
\n : 改行
\t : タブ
\' : シングルクオーテーション
\\ : バックスラッシュ
Raw
file5.js
\n : 改行
\t : タブ
\' : シングルクオーテーション
\\ : バックスラッシュ
Raw
file6.js
plus = "5" + 5;
// => "55"
Raw
file7.js
if (条件1) {
処理1
} else if (条件2) {
処理2
} else {
処理3
}
// 【例】
var score = 80;
if (score > 60) {
console.log("ok!")
} else if (score > 40) {
console.log("soso.")
} else {
console.log("poor...")
}
Raw
file8.js
(条件) ? (true処理) : (false処理);
// 【例】
var score = 80;
x = (score > 60) ? "ok" : "poor";
console.log(x)
Raw
file9.js
var signal = "blue";
switch (signal) {
case "red":
console.log("stop!");
break;
case "green", "blue":
console.log("go!");
break;
case "yellow":
console.log("slow down!");
break;
default:
console.log("wrong signal");
break;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment