用想像力寫程式：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>