用想像力寫程式：javascript的 this：第二堂

這要讓你減輕壓力的。讓你用「想像去」寫程式。

完全不用怕你沒有什麼數理的邏輯能力。要讓文本互動，即使是用「想像能力去」寫程式，也真的是足夠了。

This，所見即所得

對文科生而言，互動的變化是用「想像而來的」，而不是去「理性計算如何」。你有想像，你想像著文本有著某種互動的可能性，而這種「文本互動可能性」可以為那被產製 的文本，帶來一種「更多的」「意義給出」。

互動，是為了「讓文本產生出更多的意義」。

然而，要讓文本互動起來，要有「網頁寫作技能」，尤其是「互動的技術技能」。

javascript是好的工具。因為，一、它是瀏覽器直接就可以用的語法，二、我的使用經驗而言，這是最適合去「以對文本直接想像」的方式來寫作的語法。

換言之，有時，它不太精簡，不太「邏輯」，但你卻可以用「想像地」去了解這種語法寫作，而不是用數理邏輯去思考它。

用想像來寫語法，來，你就先學會使用「this」這一種語法的使用。

This，就是「這」，也就是眼睛所看到的「這個」。例如，你看到下面的「這張圖」了嗎？來，你又想，如果「按一下」它（這）就變成了另一張圖，那一定很有意思。

請按圖↓↓

看語法：

原始語法如下：

 <img onclick= "this.src = 'https://images.pexels.com/photos/4265560/pexels-photo-4265560.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940';"   src="https://images.pexels.com/photos/4070931/pexels-photo-4070931.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"  alt="">

不要怕，我們把它再簡化一下：

 <img onclick="this.src = '按下去的照片網址';"  src="原來照片網址"  alt="">

好了，就是 onclick 這一段（紅色字），讓照片可以互動了起來。

onclick是指，照片可以有「按下去」的功能了。this是指「這一張」。於是，對電腦而言，你就是為電腦下了命令：「按下去在這一張時……」。

好了，按下去後，會有什麼樣的變化內容呢?　這裡是：照片換掉了。所以，語法是：

this.src = '按下去的照片網址'；

src本來就是照片html語法中的屬性，是指照片網址。

於是，對電腦而言，你為它下了命令：按下去在這一張照片時，就要把照片的內容換成為所指定的那個。

其實到這裡，你也很清楚了，如果你對html以及css是不懂的，你是無法學javascript的。因為，javascript能夠讓文本互動，也就是去「互動 地重新處理」html以及css。


語法放大：

onclick=" this.src = '按下去的照片網址'; "

請注意，onclick= "xxx"; 外層的符號是「"」雙引號，而內層 src= 'xxx'; 的符號是「'」單引號。

外、內有別，電腦才會不搞錯了。

最後，在語法結束時，加上「;」分號，告訴電腦，這段程式到此結束。

還有，所有的符號都是使用半型的。如果你使用全型符號，會出問題。

來，同學，至少先依樣畫葫蘆的做一遍，讓「互動功能」真的跑出來了。你就開始真正的去累積寫語法的能力了。

去寫一遍。只用看的是沒有用的！

給文科生的十四堂 javascript 課：第一堂

先按一下下 面的這個區塊：

請 按我一下

於是你會看到，字體的顏色變紅了。對，這就是文本的互動。

本課程想教你這樣的一種「新的」「寫作模式」。

為什麼說這是「新的」「寫作模式」呢？

來，我們為什麼要寫作呢？吃飯沒事幹嗎？非也。寫作是為了想溝通。那麼，溝通什麼呢？溝通一種「意義」的交流。換言之，讓「意義」在作者和讀者之間，交流；更重要 的是，在交流中，意義是不變的。

只有在交流中的意義是沒有變動的，談「意義」的交流，才有意義。否則，那可以是什麼XX的交流，但就不會是意義的交流。

以上談是寫作。

但為什麼，按一下就變色這樣的「發生事件」，可以被我稱之為是「新的」「寫作模式」呢？

因為，在上一個例子中，如果，那按一下的過程，真的有什麼「意義」在這過程中被交流著在作者與讀者之間，那麼，「按一下」既然傳達出了意義，所以也是一種寫作。

可以吧！

但，說是「新的」是新在那裡呢？

因為，意義的產生過程中，有一個「必要的」構成元素：互動。

沒有互動，你就看不到「字變紅了」，你就無法由字的不紅到字的紅這一變化過程，獲取意義。互動是這意義獲取過程的必要的被設置進入文本的「媒材」。

在數位文本以前，沒有人，是透過「互動媒材」來讓文本進行意義的傳達。這種文本傳達意義模式，從一種歷史眼光而言，可以稱之為是「新的」。

在一般而言的教育學習過程中，你並沒有學到用「互動媒材」的方式來寫作。你會用好的成語，會用好的遣詞，甚至是好的插畫。但，你不會用「互動媒材」來傳達意 義。

好，使用「互動媒材」的工具很多。我們在這裡想談的是 javascript。為什麼，因為 javascript 是讓網頁文本互動起來的一種程式語法，而且是最基本的。使用它的方式，規定了如何去思考如何讓數位文本互動起來以及如何互動。

當然，你會問：字變紅色，這有什麼意義？

這，又是另一個問題了：如何創建出有文本意義的互動文本？


程式語法：

<div style="border: 1px solid gray; color: black; cursor: pointer;" onclick="this.style.color = 'red';">
請按我一下
</div>

紅色的這一段，就是互動語法。把它寫進去了，於是你就可以讓文本變成是可互動文本。

其實，看起來也沒有太複雜。如果你想學會寫這種互動語法，並不會有太大的障礙，尤其是什麼數理方面而來的障礙。相信我，我是歷史本科生畢業的。javascript 的語法思考其實很直覺的，往往是把你想要的畫面轉成語法，而不是用數學去推理思考。換言之，想像比推理重要。

不會很難學的。

之前談過，javascript 的程式語法特色，規定了我們如何去寫，如何去思考，網頁文本互動的可能性以及思考方向。

我希望在這十四堂課，能夠讓你對這語法的運作方式有一基本的概念。

在使用 javascrpt 之前，你對HTML以及CSS的使用，是要先掌握的。這是學互動語法的前題。誰也無法迴避的。

和 CSS 搭起來快速成形滑動效果

如果你喜歡 animation 動態的互動呈現，那麼搭配著 CSS 的 transition 之作用，可以很快的達成。

很簡單的使用 toggle 功能，就可以將滑動效果，加到 click 互動動作的呈現樣態。

在設計思考中，也使用了 CSS 變數的使用功能 --variable 。這一功能和 javascript 搭起來，就可以使用 javascrip 來改變 css 的 Class 的內容。

真好用！啊！

javascript 和 CSS 連手起來，對文科生而言，在思考上真的直觀的很多。不用去想太多什麼迴圈之類的寫法，就可以有了 transition 的效果。

原始照片檔案：

請按這裡，圖片就會以滑動的動作出現和隱藏

CSS語法及程式：

 <div id="aaa01">
  <style>
   
        div#aaa01 {
        --imgheight: 0px;
        }
    
       .imgshowdisappear {
      overflow: hidden;
      height: 0px;
      width:100%;
      transition: 1s;
    }

    .imgshowdisappear img {
      width:100%;
    }
   
    .imgshowdisappearadd {
     
      height: var(--imgheight, 550px);
    }

    .cla200507 {
      border: 1px solid gray;
      padding:1em;
      cursor: pointer;
    }
   
    .cla200507:hover {
     background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.24) 36%,rgba(0,0,0,0.5) 75%,rgba(0,0,0,0.65) 97%,rgba(0,0,0,0.65) 100%);
     }
   
   </style>


<div onclick="myFun0507()" class="cla200507">請按這裡，圖片就會以滑動的動作出現和隱藏<br></div>


<div class="imgshowdisappear"><img src="https://images.pexels.com/photos/4265597/pexels-photo-4265597.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"      alt="">
</div>

</div>


<script>
      var  root = document.getElementById("aaa01"); 
      var ele =  document.querySelector("div.imgshowdisappear");
      var ele2 =  document.querySelector("div.imgshowdisappear >img");
      ele2.onload = function() {
      var ele2img = ele2.offsetHeight;
      root.style.setProperty("--imgheight",  ele2img + "px");}
    
    
      function myFun0507() {   
        ele.classList.toggle("imgshowdisappearadd");
      }
 </script>

javascript 的滑動式網頁內部超連結

---這裡是內文編輯區塊的頂部----



文件內部超連結的互動移動，是最常用到的互動技巧之一。

在這裡，我們使用 javascript 來達到這一文本的互動目的。先試一下互動功能來理解。

click!!  我會滑動到 【程式語法】區

如你所看到，按下去後，網頁會向上滑動到指定的位置。這裡所設定的是物件 span id="aa1"。

這個簡單的程式，但卻很有用。

程式中你會看到有紅色字的 +375 ，這是這個布落格布局上的需求所加的。指的是從內文區塊頂到螢幕頂的距離。

 以下的空白是製造可以滑動的必要空間。

---------------------------------------------------------------------------

補充：外部超連結的語法

<script>
function myFunction() {
  window.open("https://www.w3schools.com", "_blank“);  //開新視窗；-self  原視窗開啟。
}
</script>

--------------------------------------------------------------------
 

程式語法：


<div class="testclass" onclick="myFun0506()">click!!&nbsp; 我會滑動到 【程式語法區】</div>


<u><b><span id="aa1">程式語法</span></b></u>


 <script>
      function myFun0506() {
      var el = document.querySelector("#aa1");
      window.scroll({top: el.offsetTop +357 , behavior: 'smooth'});  //+357這是內文區塊頂到螢幕頂部的距離。
      }
 </script>

開關的思考：給讀者「停下來」的權力

互動，在文本閱讀過程的意義給出中，到底要為讀者提供出什麼？換言之，互動在文本的結構中，到底有什麼存在的理由。

對我而言，這一點，要能被理論性的論證出來。否則，並沒有什麼說服的力道去跟學生說：你要去學會互動寫作技能。

來，
人為什麼要閱讀？在於從文本中獲取「意義」。

好，
那在文本中有了互動機制的嵌入，所以，對於意義的獲取，會產生了什麼變化？這點若沒有說清楚，那麼在文本中就無法找到要去嵌入互動機制之必要的理論說明。

互動是一種內容嗎？還是一種形式？顯然，是一種形式。

所以，到目前為止，整個的推論可以如此：互動文本在於透過某種「互動形式」為文本意義的給出，增加可能性。

於是，一種文本的互動模態之設計與嵌入，能不達到這目的，就是設計之好與壞的基本判準。

那麼，設計出一種去停止互動的互動模組，會不會為文本提供意義給出呢？可以的。因為，去停止，【就形式而言】，也是一種意義。



互動範例：

在這裡，首先，DIV的寬度會自己動起來。

互動寫作者而言，如果考慮到讀者要有控制權，來決定動態文件元組是不是繼續動下下，那麼我們就要賦與讀者去「關掉」這動態文件元組的「會動狀態」。

按一下下方的 test 區塊！就停了。再按下下，重新動起來。這樣的互動模態，我稱之為「開關」。

test!!

 語法和程式：

 <style>
.testdiv {
width: 10%;
border: 1px solid gray;
background-color: lightgray;
cursor: pointer;
transition: 1s;
}

.testdivch {
width: 100%;
}
</style>


 <div id="test0429a" class="testdiv" onclick="myFun0429()"> test!! </div>


<script>

var i = 0;

setInterval (frame, 1100);

function frame() {
    if(!i ) {       //在這裡設定通不通電
    var dwcft = document.getElementById("test0429a");
    dwcft.classList.toggle("testdivch");

    } else {  }
}

function myFun0429() {     //這 是開關的地方，按一下「閉」，再按一下「開」
var addi = i+1;
var addkey = addi%2;
  i = addkey;
} 
     
</script>
  
   



滑動是一種互動的身體姿態：scroll

互動文本的互動，是要考量「以什麼身體的姿式」來讓文本動起來。就網路的閱讀環境而言，可以被選擇而考量的身體互動姿態，並不多。

按下去，即 Click ，是最常看到的。但另一種動作，滑動網頁，scroll，也是常被使用的去「和文本進行互動」的動作。

就數位文本的寫作而言，每一種可能的動作姿態，都要進入其對互動文本的設計思考範圍內。透過這種動作，於是，讀者和文本，產生了一種理解上的可能性，這種可能性有著「互動」為中介。

至於，有「互動為中介」的閱讀狀況，會形成什麼不同的意義理解模式，那就又是另個要討論的問題了。

請往下滑動網頁吧！中標會變顏色。

我是中標。變色，是為了引起注意。

我是中標。變色，是為了引起注意。

我是中標。變色，是為了引起注意。

我是中標。變色，是為了引起注意。

語法程式碼：

<style>
.test01 {
font-family: '微軟正黑體';
font-size: 130%;
font-weight: bold;
padding: 5px 1em;
border: 3px solid black;
}
</style>

<div class="test01">
我是中標。變色，是為了引起注意。
</div>

<script>
window.onscroll = function() {myFunction()};      //啟動計算滑的動作

function myFunction() {
  var elmnt = document.documentElement;
  var x = elmnt.scrollTop;              //網頁向上滑動的高度
  var y = document.getElementsByClassName("test01");
 
  for (var i= 0; i< y.length; i++) {
  var yy = y[i].offsetTop;   //中標到內文區頂端的高度
  yy += 370;                      //這是本部落格用的，是內文區到頁頂的高度
   if (yy - x < 110) {
   y[i].style.color= "red";
   } else {
   y[i].style.color= "black";
   };
  }
}
</script>


按文字跑出相應的圖像（組）

互動文中，在於讓讀者可以經驗到更多，從文本的互動中。但，什麼是可以讓讀者經驗到更多的方法呢？「更多的資料」，是一種答案。很不錯的答案。

但，我在思考的是，「互動形式」如何可以讓讀者「得到更多」，在閱讀的經驗中。

於是，如果這種想法是對的話，那麼，什麼是「對的互動形式」，就進入了可以被討論的論證範圍！成為創作過程中，具有創造意義呈現的某種關鍵性技能。

就此，一位作者的「程式掌握」能力，就是文本結構的必要寫作技能。換言之，寫程式是作者要會的技能，而不是丟給程式設計的委派工作。

於是，在數位文本的教學中，教程式就獲得了合法的理論論證。那麼，這一篇，這是對的互動形式嗎？

Click !! ↓↓

海邊看海

小廟香火

渡天宫的入口

石頭在海水中

顏色鮮鮮的香火

居高臨下

程式語法：



 <div id="test0422">
      <p onclick="myfunction0422(this, 0)">海邊看海</p>
      <p onclick="myfunction0422(this, 1)">小廟香火</p>
      <p onclick="myfunction0422(this, 2)">渡天宫的入口</p>
      <p onclick="myfunction0422(this, 3)">石頭在海水中</p>
      <p onclick="myfunction0422(this, 4)">顏色鮮鮮的香火</p>
      <p onclick="myfunction0422(this, 5)">居高臨下</p>
    </div>
    <br>

   <img style="width:100%;" src="https://images.pexels.com/photos/4196318/pexels-photo-4196318.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"
      alt="" id="aaa02"><br>


  <script>

     var imgarry = [
       "https://images.pexels.com/photos/4196318/pexels-photo-4196318.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
       "https://images.pexels.com/photos/4196316/pexels-photo-4196316.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
       "https://images.pexels.com/photos/4196315/pexels-photo-4196315.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
       "https://images.pexels.com/photos/4183204/pexels-photo-4183204.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
       "https://images.pexels.com/photos/4183201/pexels-photo-4183201.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
       "https://images.pexels.com/photos/4183199/pexels-photo-4183199.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"];  //共六張圖

    function myfunction0422(objj, ind) {  //指定第幾張圖
      objj.style.display = "none";
      document.getElementById("aaa02").src = imgarry[ind]; };
   
 </script>



往圖按下去就一直換圖：陣列的使用概念

一張照片，如果我們按一下它，於是就會變成另外一張照片。一共有三張，如下：

Click! ↓↓


這是互動，文本的互動。沒錯。但我們其實更要問：為什麼要做這種互動？做這種互動，對於閱讀而言，到底能夠給了什麼助益，而且這種助益是傳統文本所無法給的。

在數位文本中，文本中的互動，到底是為了什麼？

互動，往往可以把「潛藏」的內容，拉到可視的區域。這一過程，透過受眾的互動行為，讓更多「被設計好但潛藏著」的資訊，浮了出來。

文本，成為了在內容的結構上是「有深度的」文本；有待讀者去「挖」出來。讀者，在此，可說有了閱讀上的「主動性」。

本例，我們使用陣列的觀念來創作。這一範例，在於讓你了解陣列的儲藏作用。儲藏是讓文本有深度的方法。

陣列（Arrays）語法結構如下：  

var cars = [
  "Saab",
  "Volvo",
  "BMW"
];

陣列的選擇是：  cara[0] ；是指選到第一個。 cara[1] ；是指選到第二個。


本例互動文本語法：

<img onclick=" chimg(this) " src="https://images.pexels.com/photos/3966242/pexels-photo-3966242.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940">

<script>

var cars = [
  "https://images.pexels.com/photos/3966242/pexels-photo-3966242.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  "https://images.pexels.com/photos/3870087/pexels-photo-3870087.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  "https://images.pexels.com/photos/3903661/pexels-photo-3903661.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
];  //陣列使用

var i200421 = 1;

function chimg(obj) {
i200421 = i200421 % 3; //取餘數，有三張照片所以用 3 除。
obj.src = cars[i200421];
i200421 = i200421+1;
}

</script>

對所有選中元素設置 onmouseover

讓所選用中的所有元素，都具有特定 onmouseover / onmouseout 的效果。

這裡的困難是，並不是單獨在每一個 HTML元素裡面設定 onmouseover 互動功能，而是「寫一段程式」來讓所有被選中的元素都具有互動功能。

在範例中，所有具有 class="demo" 的元素，都被賦與了特定的 mouseover 的互動作用。


範例：

請 mouseover ↓↓

Mouse over me

4

Hi, 5 is good.

6

this is p!

語法：

<style>
.demo {
margin-bottom: 1em;
cursor: pointer;
}
</style>

<h1 class="demo">Mouse over me</h1>
<div class="demo">4</div>
<div class="demo">Hi, 5 is good.</div>
<div class="demo">6</div>
<p class="demo">this is p!</p>

<script>

var elms = document.getElementsByClassName("demo");
var n = elms.length;

for(var i = 0; i < n; i ++) {
    elms[i].onmouseover = function() {
        this.style.cssText = "color: red; padding-left: 3em; border-left: 3px solid gray;";
    };
    elms[i].onmouseout = function() {
       this.style.cssText = "color: black; padding-left: 0em; border-left: 0px solid gray;";;
    };
}

</script>


對比單獨HTML元素的設置

在範例中，mouseover 的功能是直接設置在HTML元素裡面。這其實對「文本寫作者」而言是更「切適」的方法。

因為，可以很精準的控制想要去設置的元素，同時，在設置的過程，也是較為直覺的一種「數位文本寫作」方法。


語法：

<h1 class="demo" onmouseover="this.style.cssText = 'color: red; padding-left: 3em; border-left: 3px solid gray;'" onmouseout=" this.style.cssText = 'color: black; '">Mouse over me in HTML</h1>


效果：

Mouse over me in HTML

對所有選出的元素進行變化

選出所有你想選出的元素，然後又一一的對這些元素進行變化。在 javascript 中，你要寫程式才能對一一元素來進行變化。

Hello World!

Hello You!

Click the button to change the color of all p elements.

# 按我回復



語法：

<style>
.sall {
padding: 1em;
border: 1px solid gray;
}
</style>

<p class="sall">Hello World!</p>

<p class="sall">Hello You!</p>

<p class="sall">Click the button to change the color of all p elements.</p>

<button onclick="myFunction()">按我全部的P變紅色</button>

<script>
function myFunction() {
  var myCollection = document.querySelectorAll("p.sall");
  var i;
  for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.color = "red";
  }
}
</script>

基礎動畫的形成

這是動畫的形成的基本語法。

請你按一下下列的 DIV，那麼寬度就會慢慢的變化，直到720px的界限！

click here !!

按我恢復原狀


語法：

<div onclick = "move()" id="mo0417" style="width: fit-content; border: 1px solid gray; padding: 1em;"><span>click here !!</span></div>
<br>
<br>
 



<script>

function move() {
var divw = document.getElementById("mo0417");
var id = setInterval (frame, 1);
var width = divw.firstChild.offsetWidth;
 function frame() {
if (width >= 720) { 
   clearInterval (id);
   }
else {
width = width+3;
divw.style.width = width+"px";
}
 }
}

</script>