開発者用のメモです。
筆者(テイくん)が、プログラムを作成した時のコードをまとめて載せています。
ご自分で解決できないことがあった場合の参考にして頂ければと思います。
このページの目次
1. まずはじめに
他のページと違い、基本的な部分の解説を省いていますので中級者以上の内容になっています。
もし理解ができない時は、コマンド一覧と使い方や「基礎講座」の記事一覧などで勉強して頂ければと思います。
最終的に自分の思ったとおりマクロが動いてくれればOKです。
2. コード一覧(iMacrosファイル)
円マーク(\)と半角カンマ(,)を削除
EXTRACTで抜き出した後にEVALでreplace関数を2回使って削除する。
TAG POS=1 TYPE=SPAN ATTR=* EXTRACT=TXT
SET TRIMMED EVAL("\"{{!EXTRACT}}\".replace(/[\\\\\¥]/g,'').replace(/,/g,'');")
- 円マーク(\):
.replace(/[\\\\\¥]/g,'')
- 半角カンマ(,):
.replace(/,/g,'')
参考:teratail
空白と改行を削除
EXTRACTで抜き出した後、EVALでreplace関数で2回使って削除する。
TAG POS=1 TYPE=TH ATTR=TXT:* EXTRACT=TXT
SET TRIMMED EVAL("\"{{!EXTRACT}}\".replace(/ /g,'').replace(/\s/g,'');")
- 空白:
.replace(/ /g,'')
- 改行:
.replace(/\s/g,'')
#EANF#をセルに表示させない
EXTRACTでデータがない場所を抜き出すと#EANF#がセルに表示される。
if文を使ってもし#EANF#時は空の値、それ以外は通常の値を返す。
TAG POS=1 TYPE=IMG ATTR=SRC:https://* EXTRACT=HTM
SET TRIMMED EVAL("var s='{{!EXTRACT}}'; var x; if(s!='#EANF#'){ x='{{!EXTRACT}}';} x")
EVENTを使ってフォームのデータを上書き入力
JavaScriptで作成されたよくあるフォームに、新しいデータを入力する場合少しテクニックがいります。
通常の方法ですると、前のデータが残った状態になり正常に上書きできません。
※EVENTコマンドを使っている場合だけです。
'「前のデータ」を削除(control+Aを押しながらBACK)
EVENT TYPE=KEYPRESS SELECTOR="#sell-container>DIV>DIV>FORM>DIV:nth-of-type(5)>DIV>UL>LI>DIV>DIV>DIV>INPUT" KEY=8 MODIFIERS = "ctrl,A"
WAIT SECONDS=1
'777とフォームに入力
EVENTS TYPE=KEYPRESS SELECTOR="#sell-container>DIV>DIV>FORM>DIV:nth-of-type(5)>DIV>UL>LI>DIV>DIV>DIV>INPUT" CHARS=7777
- KEY=8はBACKキー
- MODIFIERS = “ctrl,A”はコントロールキー+A
イベントコマンドの解説はこちら
→iMacros公式 EVENT(英語)
キーコードの番号については以下で確認できます。
→ JavaScript プログラミング講座(キーコードの一覧表)
2. コード一覧(JavaScriptファイル)
EVENTSを使う方法
Experimental event recording modeに変更してキーボードなどの操作を自動記憶した場合、コードをそのまま.jsで使うとエラーが起きます。
囲いを“(ダブルコーテーション)ではなく‘(シングルコーテーション)に変更、もしくは\(エスケープ)を追加する必要があります。
//NG
macro += "EVENTS TYPE=KEYPRESS SELECTOR="(上略)>DIV:nth-of-type(2)>DIV>DIV>INPUT" CHARS={{!COL2}}" + "\n";
//OK '(シングルコーテーション)
macro += 'EVENTS TYPE=KEYPRESS SELECTOR="(上略)>DIV:nth-of-type(2)>DIV>DIV>INPUT" CHARS={{!COL2}}' + "\n";
//OK \(エスケープ)
macro += "EVENTS TYPE=KEYPRESS SELECTOR=\"(上略)>DIV:nth-of-type(2)>DIV>DIV>INPUT\" CHARS={{!COL2}}" + "\n";
SET !DATASOURCEを使う方法
DATASOURCEフォルダ内で使う場合は.iimも.jsも書き方は全く同じです。
SET !DATASOURCE test.csv
macro += "SET !DATASOURCE test.csv" + "\n";
DATASOURCEフォルダ以外で使う場合は、書き方が少し変わります。
区切りの\(バックスラッシュ)の数が違うので注意。
SET !DATASOURCE C:\Users\PC\Desktop\test.csv
macro += "SET !DATASOURCE C:\\Users\\PC\\Desktop\\test.csv" + "\n";
- .iim:区切りは
\
を1個 - .js:区切りは
\\
を1個
XPATHを使う方法
XPATHを.iimと同じ構文で.jsで書くとエラーが起きます。
.jsの場合は=の後の“(ダブルコーテーション)を消します。
TAG XPATH="/html/body/div[1]/section/div[1]/table/tbody/tr[2]/td/a[1]/div"
macro += "TAG XPATH=/html/body/div[1]/section/div[1]/table/tbody/tr[2]/td/a[1]/div" + "\n";
それとXPATH+EXTRACTを使うときは特に間違いやすいので注意が必要です。
TAG XPATH="/html/body/div[1]/section/div[1]/table/tbody/tr[2]/td/a[1]/div" EXTRACT=TXT
macro += "TAG XPATH=/html/body/div[1]/section/div[1]/table/tbody/tr[2]/td/a[1]/div EXTRACT=TXT" + "\n";
空白と改行を削除
.jsと.iimでは少しreplaceの使い方が変わってきます。
.iimで作ったものを.jsに変えた場合動かない場合があります。よくあるのが\(エスケープ)の追加です。
macro += "TAG POS=1 TYPE=TH ATTR=TXT:* EXTRACT=TXT" + "\n";
macro += "SET TRIMMED EVAL(\"'{{!EXTRACT}}'.replace(/ /g,'').replace(/\\s/g,'');\")" + "\n";
//以下のでも可
macro += "SET TRIMMED EVAL(\"var s='{{!EXTRACT}}'; s.replace(/ /g,''); s.replace(/\\s/g,''); \")" + "\n";
replace(/\\s/g,'')
iim内では
(/\s/g,'')
で問題ありませんが、.js内では(/\\s/g,'')
\(エスケープ)を入れてあげないと改行として認識しません。値によって条件分岐
取得した値によって条件分岐させる場合はEAVL内でif文を使えば可能です。
//100以上の場合は◯、それ以外は☓
macro += "SET MARK EVAL(\"var s={{!EXTRACT}}; if(100 <= s ){s= '○';} else{s = '×';} \") " + "\n";
//100以上、999以下の場合は◯、それ以外は☓
macro += "SET MARK EVAL(\"var s={{!EXTRACT}}; if(100 <= s && s <= 999){s= '○';} else{s = '×';} \") " + "\n";
LOOP回数を任意にユーザーが設定する
JavaScriptではRepeat MacroのMAX数値を変更してもLOOP(繰り返し再生)できません。
解決方法は、for文とif文を追加するとiimと同じように使うことができます。
var num = prompt("繰り返したい回数を入力してください!\n ");
// キャンセルを押した場合の処理
if(num == null) {
iimClose(); // マクロを終了
}
// 値を何も入力しなかった場合の処理
else if(num == "") {
alert("数値は必須事項です!");
iimClose();
}
// 1~99までの数値(半角)を入力しなかった場合の処理
else if(isNaN(num) || !(num >=1 && num <=99)) {
alert("1~99までの数値(半角)を入力してください!");
iimClose();
}
var macro = "CODE:";
macro += "PROMPT {{loop}}" + "\n";
//1から順番に99まで1づつ増える
for (var loop = 1; loop <= 99; loop++){
// numより数値が大きくなった場合マクロ終了
if (loop > num){
iimClose();
}
iimSet("loop", loop);
iimPlay(macro);
}
上記のようにすることで.iimと同じようにLOOP回数をユーザーが簡単に選ぶことができます。
それと99の数値を増やせば無限ループさせることも可能です。
replaceを使った割引きの方法
何割引きにするかをユーザーに選んでもらうときに使う方法です。
計算式の数値は小数点が出てくるので、整数で入力できるように変更します。
1割引きなら×0.9
2割引きなら×0.8
3割引きなら×0.7
var value = prompt("何割値引きするか入力してください!\n・1~9までの半角数字\n・0は割引なし\n ");
if(value == null) {
iimClose();
}
else if(value == "") {
alert("数値は必須事項です!");
iimClose();
}
else if(isNaN(value) || !(value>=0 && value<=9)) {
alert("0~9までの数値(半角)を入力してください!");
iimClose();
}
//valueの数値を置き換えして割引率を出す
switch( parseInt(value, 10) ) {
case 0: var off = value.replace(0, 1); //割引なし
break;
case 1: var off = value.replace(1, 0.9); //1割引
break;
case 2: var off = value.replace(2, 0.8); //2割引
break;
case 3: var off = value.replace(3, 0.7); //3割引
break;
case 4: var off = value.replace(4, 0.6); //4割引
break;
case 5: var off = value.replace(5, 0.5); //5割引
break;
case 6: var off = value.replace(6, 0.4); //6割引
break;
case 7: var off = value.replace(7, 0.3); //7割引
break;
case 8: var off = value.replace(8, 0.2); //8割引
break;
case 9: var off = value.replace(9, 0.1); //9割引
break;
}
var macro = "CODE:";
macro += "SET !VAR1 2000" + "\n";
macro += "SET PRICE_A EVAL(\"var s = {{!VAR1}}; s = s * {{off}};\")" + "\n";
macro += "PROMPT 入力した数値:{{value}}<br>置き換え後の値:{{off}}<br>割引の計算式:{{!VAR1}}*{{off}}={{PRICE_A}}" + "\n";
macro += "SET !VAR2 999" + "\n";
macro += "SET PRICE_B EVAL(\"var s = {{!VAR2}}; s = s * {{off}};\")" + "\n";
macro += "PROMPT 入力した数値:{{value}}<br>置き換え後の値:{{off}}<br>割引の計算式:{{!VAR2}}*{{off}}={{PRICE_B}}" + "\n";
//小数点を四捨五入するバージョン
macro += "SET !VAR2 999" + "\n";
macro += "SET PRICE_B EVAL(\"var s = {{!VAR2}}; s = s * {{off}}; s = Math.round(s);\")" + "\n";
macro += "PROMPT ※四捨五入したバージョン<br>入力した数値:{{value}}<br>置き換え後の値:{{off}}<br>割引の計算式:{{!VAR2}}*{{off}}={{PRICE_B}}" + "\n";
iimSet("value", value);
iimSet("off", off);
iimPlay(macro);
数学が苦手な方の場合入れ間違える可能性がありますので、上記のように置き換えれば分かりやすくなります。
参考
【JavaScript入門】Switch文で条件分岐する方法(default/break)samurai Blog
参考 【JavaScript入門】四捨五入/切り上げ/切り捨てを桁数を指定して行うsamurai Blog
EXTRACT抜き出しデータをjsで使う
iimで抜き出したデータはjsでは使うことができません。
jsで使いたい場合は、iimGetExtractコマンドが必須です。
//【iMacrosエリア】
// 1000、2000、3000を順番にEXTRACTに入れる
var macro = "CODE:";
macro += "SET !REPLAYSPEED MEDIUM" + "\n";
macro += "SET !VAR1 1000" + "\n";
macro += "SET !VAR2 2000" + "\n";
macro += "SET !VAR3 3000" + "\n";
macro += "ADD !EXTRACT {{!VAR1}}" + "\n";
macro += "ADD !EXTRACT {{!VAR2}}" + "\n";
macro += "ADD !EXTRACT {{!VAR3}}" + "\n";
iimPlay(macro);
//【JavaScriptエリア】
//iMacrosで抜き出したデータをJavaScriptに受け渡す
var getA = iimGetExtract(1); //1個目のEXTRACTデータを変数「getA」に渡す
var getB = iimGetExtract(2); //2個目のEXTRACTデータを変数「getB」に渡す
var getC = iimGetExtract(3); //3個目のEXTRACTデータを変数「getC」に渡す
alert(getA); //変数「getA」の値を確認
alert(getB); //変数「getB」の値を確認
alert(getC); //変数「getC」の値を確認
//JavaScriptにあるデータを100で割ったあとiMacrosにセットする
iimSet("getA", getA / 100);
iimSet("getB", getB / 100);
iimSet("getC", getC / 100);
//【iMacrosエリア】
//JavaScriptから受け渡されたデータをiMacrosで使う
var macro2 = "CODE:";
macro2 += "PROMPT {{getA}}" + "\n";
macro2 += "PROMPT {{getB}}" + "\n";
macro2 += "PROMPT {{getC}}" + "\n";
iimPlay(macro2);
iimGetExtract(1)のカッコの中の数値は、上から何番目のExtractの値という意味です。
データソースの列(COL)でLOOPさせる
LINEでLOOPする場合はSET !DATASOURCE_LINE {{!LOOP}}と{{!COL}}使えばできます。
では、COLでLOOPする場合はSET !DATASOURCE_COLUMNS {{!LOOP}}と{{!LINE}}を使えばできるような気がしますが、{{!LINE}}というコマンドが存在しません。
データソース使用時に使えるコマンドは{{!COL}}だけです。もしどうしてもカラム1→2→3…としたい時はJavaScriptを使うしかありません。
下記の方法を使えばカラムでも可能です。
function csvColumn(loop) {
var macro = "CODE:";
macro = "SET !DATASOURCE test.csv" + "\n"; //ここに+を入れるとエラーが起きるので注意!
macro += "SET !DATASOURCE_LINE 1" + "\n";
macro += "PROMPT {{!COL" + loop + "}}" + "\n";
return macro;
}
for (loop = 1; loop <= 5; loop++) { //5カラム目まで繰り返す
iimPlayCode(csvColumn(loop)); //Codeを忘れないよう
}
ファイルを作成するのが面倒な方はコピペして試しに動かしましょう。
ファイル名はtest.csvです。
1 | 2 | 3 | 4 | 5 |
A | B | C | D | E |
あ | い | う | え | お |
iimSet内で変数(動的)と文字列を一緒に使う
変数 + “文字列”でコードを書けば繰り返す毎に変数の値を増やすことができます。
var macro = "CODE:";
macro += "PROMPT {{NUM}}" + "\n";
for (var loop=1; loop <= 5; loop++){
iimSet("NUM", loop + "回目" );
iimPlay(macro);
}
両端に文字を入れることもできます。
var macro = "CODE:";
macro += "PROMPT {{NUM}}" + "\n";
for (var loop = 1; loop <= 5; loop++){
iimSet("NUM","現在の繰り返し回数は" + loop + "回目" );
iimPlay(macro);
}
JavaScript内のエラー回避
- iMacros:SET !ERRORIGNORE YESでエラー回避します。
- JavaScript:try catchでエラー回避します。
try{
//ここに処理を書く
} catch(e){
//ここにエラー時の処理を書く(何もなければ空白でもOKです)
}
途中でエラーが起きても止まることがなく処理を継続できます。
値を特定の基準(2や3の倍数など)で増やす
全て5回繰り返すサンプルです。
//2の倍数で増やす
var macro = "CODE:";
macro += "PROMPT {{loop}}" + "\n";
for (var loop=0; loop <= 10; loop += 2){
iimSet("loop", loop);
iimPlay(macro);
}
//3の倍数で増やす
var macro = "CODE:";
macro += "PROMPT {{loop}}" + "\n";
for (var loop = 0; loop <= 15; loop += 3){
iimSet("loop", loop);
iimPlay(macro);
}
//2ずつ増やす
var macro = "CODE:";
macro += "PROMPT {{loop}}" + "\n";
for (var loop = 1; loop <= 11; loop += 2){
iimSet("loop", loop);
iimPlay(macro);
}
//3ずつ増やす
var macro = "CODE:";
macro += "PROMPT {{loop}}" + "\n";
for (var loop = 1; loop <= 16; loop += 3){
iimSet("loop", loop);
iimPlay(macro);
}
新しいフォルダを自動生成する
場所を指定して新しいフォルダを生成することができます。
以下を動かすと各フォルダに「test」が自動で生成されます。
//Macrosフォルダ
var foldername = "test";
imns.FIO.makeDirectory(imns.Pref.getFilePref('defsavepath').path+"\\"+foldername);
//Datasourcesフォルダ
var foldername = "test";
imns.FIO.makeDirectory(imns.Pref.getFilePref('defdatapath').path+"\\"+foldername);
//Downloadsフォルダ
var foldername = "test";
imns.FIO.makeDirectory(imns.Pref.getFilePref('defdownpath').path+"\\"+foldername);
変数を定義せずに直接ファイル名を入れる場合は
//Macrosフォルダ
imns.FIO.makeDirectory(imns.Pref.getFilePref('defsavepath').path+"\\"+"test");
//Datasourcesフォルダ
imns.FIO.makeDirectory(imns.Pref.getFilePref('defdatapath').path+"\\"+"test");
//Downloadsフォルダ
imns.FIO.makeDirectory(imns.Pref.getFilePref('defdownpath').path+"\\"+"test");
さらに下層にフォルダを生成することもできます。ただあまりする方はいないと思いますが…
var foldername = "test";
var foldername2 = "test2";
imns.FIO.makeDirectory(imns.Pref.getFilePref('defsavepath').path+"\\"+foldername+"\\"+foldername2);
特定の位置まで画面スクロール
scrollBy(0,1000)の1000の部分を大きくすればスクロールする量を増やすことも出来ます。
ただ、サイトの作りによっては動かない場合があります。
例えばFacebookやTwitterなどのように一部分だけ無限スクロールになっているようなサイトです。
var macro = "CODE:";
macro += "URL GOTO=https://www.yahoo.co.jp/" + "\n";
macro += "URL GOTO=javascript:window.scrollBy(0,1000)"+ "\n"; // スクロール
macro += "WAIT SECONDS=1"+ "\n";
macro += "URL GOTO=javascript:window.scrollBy(0,1000)"+ "\n"; // スクロール
macro += "WAIT SECONDS=1"+ "\n";
macro += "URL GOTO=javascript:window.scrollBy(0,1000)"+ "\n"; // スクロール
macro += "WAIT SECONDS=1"+ "\n";
macro += "URL GOTO=javascript:window.scrollBy(0,1000)"+ "\n"; // スクロール
macro += "WAIT SECONDS=1"+ "\n";
macro += "URL GOTO=javascript:window.scrollBy(0,1000)"+ "\n"; // スクロール
iimPlay(macro);
MacとWindowsで条件分岐させる
よく使うケースはdatasourceを使う時です。
MacとWindowsではファイルパスの表記の仕方が違うためWindowsで制作するとMacでは動きません。
Mac用とWindows用と2つプログラムを作成すれば、もちろん対応できますが凄く非効率になります。
以下の方法を使えば、プログラム内で条件分岐をして両方に対応することができます
var os = window.navigator.userAgent.toLowerCase(); // 使用端末のOS情報を取得
if (os.indexOf("mac os x") !== -1) { // Macの場合
imns.FIO.makeDirectory(imns.Pref.getFilePref('defdatapath').path+"\/テスト"); // Datasources内にテストフォルダを作成
} else { // その他(Windows)
imns.FIO.makeDirectory(imns.Pref.getFilePref('defdatapath').path+"\\テスト"); // Datasources内にテストフォルダを作成
}
さらにファイルパス(hogehoge.csv)を取得する方法は↓
var os = window.navigator.userAgent.toLowerCase(); // 使用端末のOS情報を取得
if (os.indexOf("mac os x") !== -1) { // Macの場合
imns.FIO.makeDirectory(imns.Pref.getFilePref('defdatapath').path+"\/テスト"); // Datasources内にテストフォルダを作成
// ファイルパス取得
var str = imns.Pref.getFilePref('defdatapath').path+"\/テスト\/hogehoge.csv";
var hogehogeCsvFilePath = str.replace(/ /g, '<SP>') // もしもパスに空白がある場合に必要(imacrosでは空白を<SP>にしないとエラーが起きる)
} else { // その他(Windows)
imns.FIO.makeDirectory(imns.Pref.getFilePref('defdatapath').path+"\\テスト"); // Datasources内にテストフォルダを作成
// ファイルパス取得
var str = imns.Pref.getFilePref('defdatapath').path+"\\テスト\\hogehoge.csv";
var hogehogeCsvFilePath = str.replace(/ /g, '<SP>') // もしもパスに空白がある場合に必要(imacrosでは空白を<SP>にしないとエラーが起きる)
}
iimデータをjsに受け渡す
この方法をよく使うケースは、jsで複数プログラムを作成していると共通の処理が出てきます。
その場合は以下の流れにすると、共通処理の部分だけ1つのファイルにすることができます。
・test_02.js ▶ kyoutu.iim ▶ test_02.js
・test_03.js ▶ kyoutu.iim ▶ test_03.js
PROMPT "適当な数値を入力してください" !VAR1
'上で入力した値を抜き出だす
SET !EXTRACT {{!VAR1}}
var macro = "CODE:";
iimPlay("kyoutu"); // kyoutu.iimファイルを動かす
// kyoutu.iimからデータ取得
var num = iimGetExtract(1); // kyoutu.iimの数値を変数numに格納
var macro = "CODE:";
macro += "PROMPT "+num+ "\n"; // numの数値を確認
iimPlay(macro);
var macro = "CODE:";
iimPlay("kyoutu"); // kyoutu.iimファイルを動かす
// kyoutu.iimからデータ取得
var num = iimGetExtract(1); // kyoutu.iimの数値を変数numに格納
var macro = "CODE:";
macro += "PROMPT "+num+ "\n"; // numの数値を確認
iimPlay(macro);
var macro = "CODE:";
iimPlay("kyoutu"); // kyoutu.iimファイルを動かす
// kyoutu.iimからデータ取得
var num = iimGetExtract(1); // kyoutu.iimの数値を変数numに格納
var macro = "CODE:";
macro += "PROMPT "+num+ "\n"; // numの数値を確認
iimPlay(macro);
一度4つのファイルを作成して、試して頂ければ理解しやすいかと思います。
何度か筆者は試しましたが、数回に1回エラーが起きマクロが止まります。
公式サイトの見解を見つけましたので念の為に載せておきます。
参考
1つの.jsから3つの.jsを停止せずに実行する方法は?iMacrosフォーラム(英語)
入力した値が範囲内の場合で条件分岐させる
EXTRACTで抜き出したデータを使って、条件分岐させる方法は少しテクニックが必要です。
例えば1~100までの数値が入力された場合のみ、処理をする方法は以下のようになります。
まずは失敗例からご紹介します。
var macro = "CODE:";
macro += "PROMPT 数値を入力してください!<br> !VAR1" + "\n"; // 入力した数値が変数!VAR1に格納される
macro += "SET !EXTRACT {{!VAR1}}" + "\n"; // 変数!VAR1を抜き出す
macro += "ADD !EXTRACT 100" + "\n"; // 100を抜き出す
iimPlay(macro);
var num = iimGetExtract(1); // VAR1のデータはjsで使えないため変数numに渡す
var maxNum = iimGetExtract(2); // 100のデータはjsで使えないため変数maxNumに渡す
// 1~100以外の場合
if (!(num >= 1 && num <= maxNum)){
var macro = "CODE:";
macro += "PROMPT 1~"+maxNum+"までの数値(半角)を入力してください!<br>" + "\n";
iimPlay(macro);
iimClose();
// 1~100以内の場合
} else {
var macro = "CODE:";
macro += "PROMPT 正解" + "\n";
iimPlay(macro);
iimClose();
}
範囲内の数値をいれてもエラーが発生します。この解決方法は以下のになります。
var macro = "CODE:";
macro += "PROMPT 数値を入力してください!<br> !VAR1" + "\n"; // 入力した数値が変数!VAR1に格納される
macro += "SET !EXTRACT {{!VAR1}}" + "\n"; // 変数!VAR1を抜き出す
macro += "ADD !EXTRACT 100" + "\n"; // 100を抜き出す
iimPlay(macro);
var num = iimGetExtract(1); // VAR1のデータはjsで使えないため変数numに渡す
var maxNum = iimGetExtract(2); // 100のデータはjsで使えないため変数maxNumに渡す
// 1~100以外の場合
if (!(num >= 1 && num <= parseInt(maxNum))){
var macro = "CODE:";
macro += "PROMPT 1~"+maxNum+"までの数値(半角)を入力してください!<br>" + "\n";
iimPlay(macro);
iimClose();
// 1~100以内の場合
} else {
var macro = "CODE:";
macro += "PROMPT 正解" + "\n";
iimPlay(macro);
iimClose();
}
NGとOKを比べて頂いたらわかると思いますが、
・if (!(num >= 1 && num <= parseInt(maxNum))){
parseInt関数を使っている方がOKの例です。
人間の見た目では分かりませんが100という数字を、「文字列」か「数値」として扱うかによって大きな違いがあります。
文字列として100を使った場合、計算や条件分岐に使えません。そのため一度、文字列から数値に変換する必要があります。
こちらのサイト様が実例を紹介しています。
参考
文字列を数値に変換するJavaScript入門パズルネット智慧
if文の条件分岐に関してはこちら
参考
【JavaScriptの条件分岐】if文の書き方/使い方 - サンプルコードとあわせて解説pasonatech