*取得今天時間*
<script>
document.getElementById("demo").innerHTML = Date();
</script>
*取得今年年分*
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear();
</script>
*取得星期*
<script>
var d = new Date();
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
document.getElementById("demo").innerHTML = days[d.getDay()];
</script>
*時鐘顯示時分秒*
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout("startTime()", 1000);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
<body onload="startTime()">
<div id="txt"></div>
</body>
*for:*
var x = "", i;
for (i=0; i<5; i++) {
x = x + "The number is " + i + "<br>";
}
*while:*
var text = "";
var i = 0;
while (i < 10) {
text += "<br>The number is " + i;
i++;
}
*do while:*
var text = ""
var i = 0;
do {
text += "<br>The number is " + i;
i++;
}
while (i < 10);
*break用法:*
var text = "";
var i;
for (i = 0; i < 10; i++) {
if (i === 3) { break; }
text += "The number is " + i + "<br>";
}
*continue用法:*
var text = "";
var i;
for (i = 0; i < 10; i++) {
if (i === 3) { continue; }
text += "The number is " + i + "<br>";
}
*for in 迴圈用法:* 輸出:John Doe 25
var txt = "";
var person = {fname:"John", lname:"Doe", age:25};
var x;
for (x in person) {
txt += person[x] + " ";
}
var txt = "";
try {
adddlert("Welcome guest!");
}
catch(err) {
txt = "There was an error on this page.\n\n";
txt += "Click OK to continue viewing this page,\n";
txt += "or Cancel to return to the home page.\n\n";
txt += "The error is "+err;
if(!confirm(txt)) {
document.location.href = "https://www.w3schools.com/";
}
}
var c = console;
var ai = arrayIterator(['x', 'y', 'z']);
function arrayIterator(array){
var i = 0,j = 0;
var obj = {
//取得下一個數值
next: function(){
return i < array.length ?{value: array[i++]} :{value: undefined};
},
//若還有下一個則回傳true,否則回false
hasNext: function(){
return j++ < array.length
},
//回第一個
toBegin:function(){
i=0,j=0;
return true;
}
}
return obj;
}
while(ai.hasNext()){
c.log(ai.next());
}
/*
c.log(typeof ai.next().value); //string
c.log(ai.next()); // { value: "y", done: false }
c.log(ai.next()); // { value: "z", done: false }
c.log(ai.next()); // { value: undefined, done: true }
*/
//一個一般的函式會是以下這樣
var funcA = function(){
console.log('hello!');
};
//去執行他
funcA(); //會在console中印出'hello!'
//而IIFE看起來會是以下這樣
(function funcB(){ //IIFE的開頭
console.log('hello!') //函式內執行的內容
}()); //IIFE的結尾
//不需要特別去執行就會直接在console中印出hello!
funcB(); //但是當我們去做呼叫時會出現「funcB is not defined」的錯誤，因為在IIFE開頭的括號是代表這段程式碼是作為一個述句執行裡面的運算式，並不是以function去宣告函式，所以他也不會被存在全域變數中，也就不可能呼叫的到了。
//IIFE可以是匿名函式(就是不幫函式取名字)，因為他馬上就會執行了，之後也不需要再呼叫他，所以有沒有名字都無所謂。
(function(str){ //我們在這裡加入str用來裝執行時傳入的參數。
console.log(str);
}('hello')); //我們把字串'hello'傳入IIFE中
//不需要執行便會直接在console中印出hello
---------------------------------------------------------------------------------------------------------
var a = !function(str){
console.log(str);
}('HELLO');
//console印出:HELLO
console.log(a);//回傳true=> !(undefined=false)=true
---------------------------------------------------------------------------------------------------------
//建立一個一般的函式，並觀察temp在各個地方的變化
function funcA(str){
var temp = '';
console.log('(1)：' + temp);
if(str !== ''){
var temp = str;
console.log('(2)：' + temp);
}
console.log('(3)：' + temp);
};
funcA('hello');
//執行後會在console上印出：
//(1)：''
//(2)：hello
//(3)：hello
//會發現在if內宣告的同名變數temp會在if中設定新的值後，會連整個函式funcA原本的temp值都改變了。
//接著在函式內使用IIFE，再觀察temp的變化
function funcB(str){
var temp = '';
console.log('(1)：' + temp);
if(str !== ''){
(function(){
var temp = str;
console.log('(2)：' + temp);}());
}
console.log('(3)：' + temp);
};
funcB('hello');
//執行後會在console上印出：
//(1)：''
//(2)：hello
//(3)：''
//可以看到temp這個變數在IIFE中被改變的內容並不會遺留到IIFE外的任何地方，這樣就可以避免在同個環境執行時，共用同個變數名稱會影響到原本的內容。
//***若用es6的let變數宣告則等於上面用IIFE效果***
function funcC(str){
let temp = '';
console.log('(1):' + temp);
if(str != ''){
let temp = str;
console.log('(2):' + temp);
};
console.log('(3):' + temp);
};
funcC('hello!');
//會印出以下結果
//(1):''
//(2):hello!
//(3):''
function a(str) {
var myVar = 'Local'
function b(aaa) {
// b 的外層為 a()
console.log(aaa) // Local
}
console.log(str) // Local
console.log(b);
return b;//這邊需要return否則會報錯,並且會執行b(111)
}
<button onclick="a(147)(111);">123</button>
147
function b(aaa) {
// b 的外層為 a()
window.runnerWindow.proxyConsole.log(aaa) // Local
}
111
function bar(foo) {
// 此二，誰優先看 Code 誰在後就可覆寫前
//優先: 2
var foo = 'varFoo'
// 優先:1
var foo = function () { console.log('函式表達') }
// 優先: 3
function foo(){ console.log('函式宣告') }
// 將 傳入變數 foo 刪除，才可見 this.foo的值
//優先:4(傳入的參數=this.foo)
this.foo = 'thisFoo';
console.log(foo)
}
//這一行去抓取canvas的標籤
let canvas = document.getElementById("myCanvas");
//接著指定繪圖方式
let ctx = canvas.getContext("2d");
//讓canvas的高度和寬度等於整個畫面，讓整個視窗都是你的畫布
canvas.height = window.innerHeight
canvas.weidth = window.innerWeight
<script>
var value = localStorage["name"];
alert(value);
</script>
//let:宛如java需先宣告才能使用
// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
因tmp已被內部let綁住,所以讀取步道var
var tmp = 123;
if (true) {
tmp = 'abc'; // 錯誤ReferenceError
let tmp;
}
//let不允许在相同作用域内，重复声明同一个变量。
// 报错
function func() {
let a = 10;
var a = 1;
}
// 报错
function func() {
let a = 10;
let a = 1;
}
//不能在函数内部重新声明参数。
function func(arg) {
let arg; // 报错
}
function func(arg) {
{
let arg; // 不报错
}
}
舊的作法:
let a = 1;
let b = 2;
let c = 3;
新的作法:
let [a, b, c] = [1, 2, 3];
例子:
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
特殊案例:
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
不完全解構:
let [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
利用 Generator 函数賦值:
function* fibs() {
let a = 0;
let b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
let [first, second, third, fourth, fifth, sixth] = fibs();
console.log(first,second,third,fourth,fifth,sixth);//0,1,1,2,3,5
/*
0 1
1 1
1 2
2 3
3 5
0 1 1 2 3 5
*/
默認值:解构赋值允许指定默认值。
例子:
let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
let [x = 1] = [undefined];//x=1
let [x = 1] = [null];// x=null(null算是值)
默认值可以引用解构赋值的其他变量，但该变量必须已经声明:
let [x = 1, y = x] = []; // x=1; y=1
let [x = 1, y = x] = [2]; // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = []; //ReferenceError: y is not defined
对象的解构赋值:
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
//baz = "aaa";
//foo = error: foo is not defined
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
yeild與Generator必須一起生存
Generator函數必須物名稱前加上*:function *foo(){}
next():做至下一個yeild,並回傳object:{value:值,done:是否還有}
//最簡單的說明範例:
function *foo() {
a += 1;
yield '';
return;
}
var f = foo();
var s1 = f.next();
console.log(s1); //回傳yeild:{value: '',done: false}
var s2 = f.next();
console.log(s2); //return沒yeild:{value: undefined,done: true}
//还可以这样写
var foo = function *() {
var x = 1;
var y = yield (x + 1);
var z = yield (x + y);//若 yield x + y;等價 yield x;
return z;
}()
//當next()時,回傳(value:下一個yeild的值,done:是否還有):object
// 你必须先执行一下Generator函数，才能把遍历器返回给某个变量
// 第一次执行next()不可以传参(前面沒yeild)
var a = foo.next(); //a.value=2,因yield (x + 1);
//next(3):裡面的3取代前一個yeild:yield (x + 1)>> y=3;
var b = foo.next(3);//b.value=4:x=1,y=3;
var c = foo.next(4);//c.value=4(yield (x + y)=4)
const reqPromise = async 參數 => new Promise((resolve, reject) => {
request.get(參數, (error, response, response_body) => {
if (error) reject(error)
let data = JSON.parse(response_body)
resolve([null, resDataFormat(data)])
})
}).catch(error => {
return [error, null]
var num = document.getElementById("mytable").rows.length;
//table 由上往下增加row
<script>
var i = 2 ;
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "Row"+i+ "cell1";
cell2.innerHTML = "Row"+i+ "cell2";
i++;
}
</script>
<script type="text/javascript">
function changeFunc() {
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
alert(selectedValue);
}
</script>
</head>
<body>
<select id="selectBox" onchange="changeFunc();">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
兩個等於（==）會對被判別的變數做轉換型別的動作（coercion又稱為implicit type conversion）。
這就是爲什麽有時候不懂一個語言特性會覺得怪怪的。舉例來說：
左邊是int type右邊是string type，但是因為兩個等於會把 string 轉型為int，所以實際比對是
1 = 1
所以是true。
如果是三個等於（===），那麼就不會有轉換型別的問題，因此
1 === "1" //false
就是false。
對於物件的等於判斷
和其他oo語言一樣，因為物件指向的都是某一個記憶體位置，所以如果直接把兩個object 做判別會等於false。
var b = {name: "hello"};
a === b; //false
特別的例子：NaN
NaN意思是:Not A Number，而他的Type其實是number。不過他比較特別是沒有任何數值可以和他相等，就算是NaN自己也不行。換句話說
NaN === NaN //false
因此只能使用isNaN()這個Function來判別。
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length; // person.length will return 3
var y = person[0]; // person[0] will return "John"
var tdtext=[];
var i=0,j=0,d2=7;
for (var c = 0 ; c <= d2 ; c++) {
tdtext[c] = new Array(d2);
}
var tdtext=[];
var d2=7;
for (var c = 0 ; c <= d2 ; c++) {
tdtext[c] = new Array();
}
function myfunction(pot){
var i=0;
$("tr[name='trbox']").each(function(){
//得到tr裡面所有td
$(this).children().each(function(){
//將td裡面的字串放入陣列中
tdtext[i].push($(this).text());
});
i++;
});
alert(tdtext[0][pot]);
}
HTML:
<div class="container">
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content1.</li>
<li>This is just some random content2.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
CSS:
.container {
width:100%;
border:1px solid #d3d3d3;
}
.container div {
width:100%;
}
.container .header {
background-color:#d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .content {
display: none;
padding : 5px;
}
JS(jQuery):
$(".header").click(function () {
$(this).toggleClass('expand').nextUntil().slideToggle(500);
});
You need to check for status 0
(as when loading files locally with XMLHttpRequest, you don't get a status returned because it's not from a Webserver)
function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
alert(allText);
}
}
}
rawFile.send(null);
}
And specify file:// in your filename:
readTextFile("file:///C:/your/path/to/file.txt");
