Loopの練習

-
Loop

The for/in statement loops through the properties of an object.

Looping over an Array

visibility: visible | hidden | collapse | initial | inherit ; で<button>を枠を残したまま隠す

var movies = ["fight Club", "Panic Room", "Zodiac", "Social Network", "Gone Girl"];
var i1;
var text2 ="";  ""; で空っぽのstringを作らないと最初がundefined になってしまう
for (i1 =0; i1 < movies.length; i1++) { // .length methodを使えばarrayのindex を数えなくてもいい
    document.getElementById("davidfincherM").innerHTML = text2 += movies[i1] + "
";
}

for/of がうまく行かないfor/of のtry it が。


document.write() とfor(index of variables); でなんとか…
document.getElementById().innerHTML で書くとarrayの最後だけになってしまう。

document.write() はhtmlの最後に書き加えられる?

for and while

for syntax

for (statement1; statement2; statement3){
// code block to be excuted
}
var i3 =0;
var text3 ="";
for (; movies[i3];) {
  text3 += movies[i3] + "==";
  i3++;
}
document.getElementById("F1").innerHTML = text3;

while syntax

while (condition) {
  // code to be excuted
 }
var i4 =0;
var text4 ="";
while (movies[i4]) {
  text4 += movies[i4] + "==";
  i4++;
}
document.getElementById("W1").innerHTML = text4;


Break continue

break;

var i5=0;
var text5 ="";
while (movies[i5]) {
  if (i5 === 2) {break; }
  text5 += movies[i5] + "==";
  i5++;
}
document.getElementById("B1").innerHTML = text5;

continue;

while continue 一緒に使うと危険

var i6=0;
var text6 ="";
for (; movies[i6]; i6++){
  if (i6 ===2) {continue; } 
//whileで書くとbreak;を入れてもブラウザがクラッシュしそうになる。
  text6 += movies[i6] + "==";
}
document.getElementById("C1").innerHTML = text6;



var i7 =0;
var text7 ="";
while (i7 < movies.length){
  i7++;
  if (i7 ===2){
  continue;
}
text7 += movies[i7] + "==";
}
document.getElementById("C2").innerHTML = text7;

while(condition) をmovies[i] から movies.lenght にしてみる。continue は機能しても、movies[0] が出ないのと、最後にundefinedが入ってしまう。


isArray() function

CSS Flexbox
@media screen and (max=width: 768px){
.containergrid {
display: flex; flex-direction: column;
}
.containergrid > div { margin-bottom: 15px;}
}

string(), toString()

movies; var x = [1, 2, 3, 4,]; var y = + x;"

JavaScript Type Conversions

JavaScript Regular Expression Reference

syntax /pattern/modifiers;

The "n{X}" quantifier matches any string that contains a sequence of Xn's.
"X" must be a number and "n" is metacharacter.

syntax
new RegExp("n{X}")

or simply:

/n{X}/

syntax with modifiers
"g" is global search, "\n" is to find a newline character, and "\r" is to find a carriage return.

new RegExp("n{X}", "g")

or simply:

/\n{X}/g

carriage return: 文字コード体系においてカーソルを文頭へ戻すことを表す制御文字。改行復帰、要は改行。

” キャリッジリターンとは、文字コード体系において、カーソルを文頭へ戻すことを表す制御文字である。ASCIIやUnicodeなどに登録されている。 Windowsでは、キャリッジリターンはラインフィード(LF)と組み合わせて行頭復帰および改行(CRLF)のセットで使用される。Mac OS XやUNIXではLFのみが用いられる。Mac OS 9以前のクラシックOSではCRのみが利用されていた。 キャリッジ(carriage)は、タイプライターで文字を打ち込みながら移動する部品の名称である。タイプライターでは、キャリッジを先頭位置に戻し、同時に紙送りを行うことによって、CRLFに相当する改行が行われる。 ”
weblio辞書

"i" modifier is case-insensitive 大文字、小文字を区別しない。html CSS ではcase-sensitive で区別することが多かったのとは逆で有ることに注意が必要。

var str1 = "Is this all there is?";

↑ <button> にstyle="text-transform: capitarize; " なので text-transform: none; を加える。

"/\d{4}/g" do a grobal search for a substring that contains a sequence of four digits.

var str2= "10, 100, 1000, 10000, 100000?";

"/\d{3,4}/g" this means do a search for a substring that contains a sequence 3 to 4 digits.

Quantifier Description
n+ Matches any string that contains at least one n
n* Matches any string that contains zero or more occurrences of n
n? Matches any string that contains zero or one occurrences of n
n{X} Matches any string that contains a sequence of X n's
n{X,Y} Matches any string that contains a sequence of X to Y n's
n{X,} Matches any string that contains a sequence of at least X n's
n$ Matches any string with n at the end of it
^n Matches any string with n at the biginning of it
?=n Matches any string that is followed by a specific string n
?!n Matches any string that is not followed by a specific string n

/is(?= all)/ とすると search for "is" followed by " all"

var str3 = "Is This all there is";

"?= all" "?="部分の後に一つwhite space が必要。var str3に "all" に続く"is" が無く、あるのはwhite space"all" だから


/is(?! all)/ とすると search for "is" NOT followed by " all" (there is a white space before"all")
"?!" であって "="は要らない

var str3 = "Is This all there is";

.test() returns true or false, depending on the result.



document.getElementById("F5").innerHTML = 
/are/.test("The best things in life are free!");


.exec() returns the found text as an object.
If no match is found, it returns an empty(null) object.

document.getElementById("F6").innerHTML = 
/are/.exec("The best things in life are free!") ;
↓

JavaScript Errors Try and Catch throw

tutorial

JavaScript Errors Try and Catch

  try {
  Block of code to try
}
catch(err) {
  Block of code to handle errors
}
finally {
  Block of code to be excuted regardless of the try/catch result
}

input a number between 5 and 15:


function ETest1(){
  var message, x;
  message = document.getElementById("ET1");
  message.innerHTML = "";
  x = document.getElementById("ETT1").value;
  try {
    if (x =="") throw "empty";
    if(isNaN(x)) throw "Not a number";
    x = Number(x);
    if (x < 5) throw "too low";
    if (x > 15) throw "too high";
  }
  catch(err) {
    message.innerHTML ="Input is " + err;
  }
  finally {
    document.getElementById("ETT1").value ="";
    //errがなければinputを空っぽにする
  }
}

grid-column のなかに<br> を間違えて入れたら grid-direction: row; のようになった。↑
<input> のgridが<pre>のgridより行が少ないのでこっちの方が grid-direction: column; より見易い。

try{} catch(err){
document.getElementById("").innerHTML = err.name;
} //catch(err) を付けて置けば間違いを見つけるヒントになる。

scope

Automatically Global

If I assign a value to variable that has not been declared,
it will automatically become a GLOBAL variable:

/*var*/ GrobalF();
// code here can use tName as a global variable

document.getElementById("GD1").innerHTML = "I can display " + tName;

function GrobalF() {
  /*var*/ tName = ["Ted", "Teddy", "Thomas"];
}

function 内の "var" が有るとerror, when function name declareing if there were "var", also cause an error.

id="GD1"

"use strict" でtry catch(err)を付けてみても non-writable error

Error name そして、 err.name試したがerror出てこない。

=======================

hoist 揚げる (ロープなどで)巻き上げる 釣り上げる

Declare 宣言する

Initialize, Assign, Declare
var x1 = 5; //Initialize x1
var y1; //Declare y1
y1 = 7; //Assign 7 to y1

CSS Selectors Reference JavaScript read-only property

JavaScript "this" keyword

//this keyword
//create an object

var person = {
  firstname: "Jane",
  lastname: "Doe",
  id : 4457,
  fullname : function() {  //必ずfunction()としないとmethodにならない。
  return this.firstname + " " + this.lastname + " " + this.id + "<br>" + this;
}
};

function Myfunction1() {
document.getElementById("thistest1").innerHTML = person.fullname();
}
function Myfunction2() {
  document.getElementById("thistest1").innerHTML = "mouseover";
}



//global this
document.getElementById("thistest2").innerHTML = testfunction();
function testfunction() {
  return this;
}

.call()


JavaScript Let 
//let
carName1 = "Volvo"; //Assign Volvo to carName1
try {
  document.getElementById("testlet1").innerHTML = carName1;
  let carName1; //declare with let, is not hoisted up therefore cause an error
} catch(err) {
  document.getElementById("testlet1").innerHTML = err;
}
document.getElementById("testlet2").innerHTML =
"After declare with let, " + carName1; // After let can use variables
{ //Another scope and let declaring is allowed. If in the same scope, it will cause an error.
let carName1 = "Honda";
document.getElementById("testlet3").innerHTML =
"Another scope and let declaring is " + carName1;
}
↓ Alt25


//const
carName2 = "CAMRI";
try {
  document.getElementById("testconst1").innerHTML =carName2;
    const carName2 ="CAMRI"; //const need to be assigned with dclaring 
} catch(err) {
  document.getElementById("testconst1").innerHTML = err;
}
document.getElementById("testconst2").innerHTML = carName2;

const CANNOT change the primitive value, but CAN chage or add objects and array.
But CANNOT reassign a constant object and array. 

hello = funtion() {
  document.getElementById("aJS").innerHTML += this;
}

hello = () => {
  document.getElementById("aJS1").innerHTML += this;
}

.addEventListener(), HTML DOM Event Object

element.addEventListener("Event(Required)", function(Required, useCapture)

//.addEventListener()
var ELM = document.getElementById("ELmouse");
ELM.addEventListener("mouseover", firstF);
ELM.addEventListener("click", secondF);
ELM.addEventListener("mouseout", thirdF);
function firstF() {
  document.getElementById("ELmouse1").innerHTML += "Mouse Overed!<br>";
}

function secondF() {
  document.getElementById("ELmouse1").innerHTML += "Clicked!<br>";
}

function thirdF() {
  document.getElementById("ELmouse1").innerHTML += "Mouse Outed! <br>";
}


//
{
let x = document.getElementById("MB1");
x.addEventListener("click", alertShow);
x.addEventListener("click", alsoF);

function alertShow() {
  alert ("Hello World!")
}

function alsoF() {
  document.getElementById("tt").innerHTML = 
  typeof x + " This function was also executed!" + "<br>" + x;
}
}

Math.ceil(Math.random()*12) 0~12 random number

JavaScript Random, and addEventListner()

In This area mouse move getting random number from 0 to 12.

コメント

コメントを投稿

このブログの人気の投稿

スタートアップフォルダとAmatsukazeのエンコード設定

-
イメージ
スタートアップフォルダとAmatsukazeのエンコード設定 windows + R を押して shell:startup 打ち込めばスタートアップフォルダが出てくる。 今回はネットで調べず、もしかしたらwindows のヘルプも使えるんじゃないかなと思って使ってみたらバッチリだった。 対話型botのヘルプ ショートカットを作成する場合は、エクスプローラのアドレスバーを右クリックしてアドレスをコピーすればOK。 C:\Users\ user name \AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup windws help が意外と使えた。フォルダの名前が前もってわかっているのと、ここにショートカットをコピーすればいいのは知っていたからだが。 AmatsukazeServer のショートカットをここに置きたかった。EDCB で録画後のbatでエンコードする際にウィンドウのフォーカスが奪われてしまうのを防ぐため。 AmatsukazeServer を起動すると通常のAmatsukazeは起動しててもエラーが出るのでAmatsukazeClientを使う。 Amatsukaze のエンコード設定がGUIが独特でビットレート指定を弄っても、aviUtlでエンコードしたときのようにならず苦戦したので、参考に設定を載せておく。 お手軽エンコード設定。1080P TVで離れて見ても違いはわからない程度がNVEnc 2100Kbps くらいだと思う。PCの画面で近くで見るとちょっと劣化してるなぁとは感じる。特にこだわりは無く、h.264 3000Kbps でエンコードしたものと同等くらいの画質だと思う。1800~1500まで落とすとブロックノイズは無くても何か汚いなぁと感じると思う。 30分番組をCMカットして22分程度で380MBくらいのファイルが出来上がる。 TV の画質向上エンジンってすごいなぁと感じる部分でもあります。 -c hevc --profile main10 --vbrhq 2100 --vbr-quality 15 --maxbitrate 15500 --qp-init 15 --gop-len 90 git...
続きを読む

EDCB Recname_MacroのRMで文字削除がうまく行かない

-
EDCB Recname_Macro.dll EDCB Recname_Macro.dll で[]と文字を消す EDCBはxtne6fさんのものを使っています。 Read.me通りの設定で、Title2で[]でくくられている部分は削除出来るが、SSだけが欲しかったときのメモ(妥協案) Recname_Macro.dll と.iniをコピー コピーしたものは、Recname_Macro - コピー.dll と Recname_Macro.dll - コピー.ini となり、Recname_Macro.dll - コピー.iniをメモ帳などで編集。 簡単な使い方を少し Recname_Macroでタイトル内にある全角文字を半角に。サブタイトル先頭30文字を録画ファイル名に。 [SET] Macro=$ZtoH(Title2)$ $Head30(ZtoH(SubTitle))$$ZtoH(SDMM)$月$ZtoH(SDDD)$日$ZtoH(SDYYYY)$$SDW$.ts $ZtoH(Title2)$ ZtoH で全角を半角に。(Title2)で番組名（[]の括弧でくくられている部分を削除したもの）。ここで区切りをつけるため$で囲むと、$ZtoH(Title2)$ で上のは後ろに半角スペースが入っている。 $Head30(ZtoH(SubTitle))$ Head30でサブタイトル(SubTitle)の先頭30文字を指定し、先程と同じように ZtoH で全角を半角に、そして指定する対象がサブタイトル(SubTitle)。 半角に変換したサブタイトルの30文字が欲しいので()で括ると Head30(ZtoH(SubTitle)) 先頭30としたが15文字だけ欲しい場合は、Head15と変更出来る。 $ZtoH(SDMM)$月 全角から半角にした録画開始の2桁表示の月 $ZtoH(SDDD)$日 全角から半角にした録画開始の2桁表示の日にち $ZtoH(SDYYYY)$$SDW$.ts 全角から半角にした録画開始の西暦4桁 .ts で拡張子をtsに指定。 Rm/削除したい文字/ で文字を消す。 $Rm/[初][映]【最新作】/ZtoH(Title)$ 番組タイトル(Title)から[...
続きを読む

冠山トンネル周辺のライブカメラ

-
イメージ
冠山峠トンネル周辺のライブカメラ 国道303号 新城山橋 北のライブカメラ LINK 国道303号 大蔵谷橋 南のライブカメラ LINK 国道303号 道場山隧道 北のライブカメラ LINK 国道417号 藤橋根尾交差点福井方面のライブカメラ LINK 国道476号 白粟のライブカメラ LINK 福井県道2号武生美山線 清水谷のライブカメラ LINK 福井県道2号武生美山線 相木のライブカメラ >LINK> 国道476号 河原橋のライブカメラ 福井県道229号福井鯖江線 花堂のライブカメラ >LINK> 国道417号 南坂下町のライブカメラ LINK 福井県道229号福井鯖江線 赤十字病院入口のライブカメラ LINK> ...
続きを読む