kurse:ef05a-2021:js:utf8

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
kurse:ef05a-2021:js:utf8 [2022/02/14 08:29] – [ASCII] Ivo Blöchligerkurse:ef05a-2021:js:utf8 [2022/03/08 14:12] (current) – [Zeichencodierung] Ivo Blöchliger
Line 1: Line 1:
 +====== Zeichencodierung ======
 +  * https://www.youtube.com/watch?v=_mZBa3sqTrI Super Vortrag über Zeichencodierung.
 +===== ASCII =====
 +
 +Codierung mit 7 Bits, also 128 mögliche Zeichen. Heute auf praktisch allen Geräten unterstützt. Programm-Code und Dateinamen sollten nur aus diesen Zeichen bestehen.
 +
 +Zeichen 0-31 und 127: Kontrollzeichen (werden nicht angezeigt).
 +
 +<WRAP todo>
 +  * Erzeugen Sie untenstehende ASCII-Tabelle (es fehlen viele Zeilen im Beispiel) in JavaScript, CSS und HTML. Die Tabelle soll dynamisch nach dem vollständigen Laden der Seite erzeugt werden.
 +  * Die Tabelle soll erst in einem String erzeugt werden, der dann mit 'innerHTML' in ein ''div'' Element geschrieben wird.
 +  * Ist der ASCII-Code als Zahl gegeben, kann dieser mit ''String.fromCodePoint(zahl)'' in einen String umgewandelt werden.
 +  * Kontrollzeichen 0-31 werden nicht angezeigt, es gibt aber Unicode-Zeichen dafür. Deren Code erhält man, indem man ''0x2400'' addiert. (Funktioniert auch für den Leerschlag). Für ASCII 127 (delete) gibt es den Unicode '0x2421'.
 +  * Umwandlung ins Zweierstystem erledigt ''zahl.toString(2)''. Führende Nullen kriegt man hin, indem man vorne einfach 7 Nullen hinzufügt, und dann nur die letzten 8 Zeichen der ''zeichenkette'' nimmt, mit ''zeichenkette.substr(-8)''.
 +  * 
 +
 +<HTML>
 +<style>
 +table, th, td {
 +  background-color: black;
 +  color: white;
 +  border: 1px solid #444; 
 +  border-collapse: collapse;                                                                                          
 +}
 +
 +td {        
 +        padding: 2px;                                                                                                 
 +}
 +
 +/* Alle span in einem td drin */
 +td > span {         
 +        font-size: large;                                                                                             
 +        font-weight: bold;                                                                                            
 +        color : red;                                                                                                  
 +}
 +</style>
 +<table><tbody><tr><td><span>␀</span> &nbsp; 0 = 0b0000'0000</td><td><span>␠</span> &nbsp; 32 = 0b0010'0000</td><td><span>@</span> &nbsp; 64 = 0b0100'0000</td><td><span>`</span> &nbsp; 96 = 0b0110'0000</td></tr><tr><td><span>␁</span> &nbsp; 1 = 0b0000'0001</td><td><span>!</span> &nbsp; 33 = 0b0010'0001</td><td><span>A</span> &nbsp; 65 = 0b0100'0001</td><td><span>a</span> &nbsp; 97 = 0b0110'0001</td></tr><tr><td><span>␂</span> &nbsp; 2 = 0b0000'0010</td><td><span>"</span> &nbsp; 34 = 0b0010'0010</td><td><span>B</span> &nbsp; 66 = 0b0100'0010</td><td><span>b</span> &nbsp; 98 = 0b0110'0010</td></tr><tr><td><span>␃</span> &nbsp; 3 = 0b0000'0011</td><td><span>#</span> &nbsp; 35 = 0b0010'0011</td><td><span>C</span> &nbsp; 67 = 0b0100'0011</td><td><span>c</span> &nbsp; 99 = 0b0110'0011</td></tr><tr><td><span>␄</span> &nbsp; 4 = 0b0000'0100</td><td><span>$</span> &nbsp; 36 = 0b0010'0100</td><td><span>D</span> &nbsp; 68 = 0b0100'0100</td><td><span>d</span> &nbsp; 100 = 0b0110'0100</td></tr><tr><td><span>␅</span> &nbsp; 5 = 0b0000'0101</td><td><span>%</span> &nbsp; 37 = 0b0010'0101</td><td><span>E</span> &nbsp; 69 = 0b0100'0101</td><td><span>e</span> &nbsp; 101 = 0b0110'0101</td></tr><tr><td><span>␟</span> &nbsp; 31 = 0b0001'1111</td><td><span>?</span> &nbsp; 63 = 0b0011'1111</td><td><span>_</span> &nbsp; 95 = 0b0101'1111</td><td><span>␡</span> &nbsp; 127 = 0b0111'1111</td></tr></tbody></table>
 +</HTML>
 +</WRAP>
 +
 +===== Unicode =====
 +  * Jedem Zeichen eine Nummer (bereits über 100'000 Zeichen, inkl. Emojis wie 👍 mit der Nummer 0x1F44D).
 +  * Unicode ist einfach eine Zahl, unabhängig davon ob diese dezimal oder hexadezimal notiert wird, und unabhängig davon, wie diese dann effektiv codiert (d.h. gespeichert) wird.
 +  * De facto Standard auf dem Web, MacOS und Linux, wobei immer UTF-8 verwendet wird.
 +
 +
 +===== UTF-8 =====
 +  * Heute ist ein Byte auf Computern (fast) immer 8 Bit gross. ASCII passt wunderbar in ein Byte.
 +  * Zahlen über 65'536 brauchen mindestens 17 Bits, wie codieren, d.h. wie die Zahlen mit Bits und Bytes darstellen?
 +  * UTF-32: Immer 4 Bytes pro Zeichen.
 +  * UTF-8: ASCII-Zeichen als 1 Byte
 +    * Andere Zeichen über mehrere Bytes verteilen (so viele wie nötig).
 +    * Erstes Byte gibt u.a. an, wie viele Bytes benötigt werden. (z.B. 0b110x'xxxx heisst 1 Folgebyte, 0b1110'xxxx heisst zwei Folgebytes etc). Die 'x' codieren einen Teil der dem Unicode entsprechenden Zahl.
 +    * Weitere Bytes sind als Folgebytes gekennzeichnet (starten mit 0b10xx'xxxx). Die 'x' codieren einen Teil der dem Unicode entsprechenden Zahl.
 +
 +===== UTF-16 =====
 +  * JavaScript verwendet intern UTF-16 (was auch gut war, solange es viel weniger als $2^{16}$ Unicode Zeichen gab.
 +  * 2 Bytes pro Zeichen, gewisse Zeichen müssen auch da in 4 Bytes (d.h. 2x 16 Bits) codiert werden.
 +  * NTFS (das Windows-Filesystem) soll UTF-16 verwenden, wobei offenbar auch von Unicode ausdrücklich nicht zugelassene Kombinationen von Bytes verwendet werden können.
 +
 +====== Bool'sche und Bitweise Operationen ======
 +===== Bool'sche Operationen =====
 +Bei bool'schen Operationen werden Wahrheitswerte (''true'' / ''false'') miteinander verknüpft. Des Resultat ist ebenfalls wieder ein Wahrheitswert.
 +
 +Die wichtigsten drei Verknüpfungen sind:
 +==== and ''&&'', or ''||'', not ''!'' ====
 +<HTML><style>.table {width:auto;}</style></HTML>
 +^ ''a'' ^ ''b'' ^''a && b'' ^ ''a || b'' ^''!a'' |
 +| ''false'' | ''false '' | ''false '' | ''false '' | ''true'' |
 +| ''false'' | ''true '' | ''false '' | ''true '' | ''true'' |
 +| ''true'' | ''false '' | ''false '' | ''true '' | ''false'' |
 +| ''true'' | ''true '' | ''true '' | ''true '' | ''false'' |
 +
 +
 +===== Bitweise Operationen =====
 +Natürliche Zahlen werden im Binärsystem gespeichert. Diese Darstellung kann nun bitweise mit anderen zahlen Verknüpft werden. So können Bits einer Zahl extrahiert und oder gesetzt werden.
 +
 +Die Operatoren sind 
 +  * ''&'' für and
 +  * ''|'' für or
 +  * ''~'' für not
 +  * ''^'' für xor
 +  * ''<nowiki><<</nowiki>'' für shift left
 +  * ''<nowiki>>></nowiki>'' für shift right
 +
 +Beispiele: 
 +  * ''5 & 12 = 4'', weil ''0b0101 & 0b1100 = 0b0100''.
 +  * ''5 | 12 = 13'', weil ''0b0101 & 0b1100 = 0b1101''.
 +  * ''5 ^ 12 = 9'', weil ''0b0101 & 0b1100 = 0b1001''.
 +  * ''3 <nowiki><<</nowiki> 3 = 24'', weil ''0b11 <nowiki><<</nowiki> 3 = 0b11000'' (Multiplikation mit $2^3$)
 +  * ''42 <nowiki>>></nowiki> 3 = 5'', weil ''0b101010 <nowiki>>></nowiki> 3 = 0b101'' (Ganzzahldivision durch $2^3$)
 +
 +==== Bit-Extraktion ====
 +Bits 3,4 und 5 aus ''zahl'' extrahieren:
 +  * ''(zahl <nowiki>>></nowiki> 3) & 0b111''. 
 +
 +Bits 3,4 und 5 in ''zahl'' auf ''neu'' setzen (Annahme: Die entsprechenden Bits in ''zahl'' sind 0).
 +  * ''zahl = zahl | (neu <nowiki><<</nowiki> 3);'' 
 +Bits 3,4 und 5 in ''zahl'' auf ''neu'' setzen (Annahme: Die entsprechenden Bits in ''zahl'' beliebig).
 +  * ''zahl = (zahl & (~(0b111 <nowiki><<</nowiki> 3)) | (neu <nowiki><<</nowiki>3);''
 +
 +
 +
 +===== Arbeitsblatt =====
 +
 +{{kurse:ef05a-2021:js:utf8-sv.pdf|Arbeitsblatt zu UTF-8}}