Scripting für Kommunikationswissenschaftler Gruppe C

Transkript

1 Professur E-Learning und Neue Medien Institut für Medienforschung Philosophische Fakultät Scripting für Kommunikationswissenschaftler Gruppe C Steve Nebel M.A.

2 Scripting für Kommunikationswissenschaftler Telefon: / Fax: / Sitz: Rawema-Gebäude, Straße der Nationen 12, Raum steve.nebel@phil.tuchemnitz.de Sprechzeiten: nach Vereinbarung 2

3 Scripting für Kommunikationswissenschaftler Inhalt des Seminars ist das Thema Scripting 3

4 Scripting für Kommunikationswissenschaftler Schreiben Sie sich (wenn noch nicht bereits getan) in die OE ein, darüber erhalten Sie auch alle relevanten Veranstaltungsmails! Grundlegender Ablauf: Einführungsveranstaltung Online-Videokurse Hausaufgaben Klausur 4

5 Scripting für Kommunikationswissenschaftler Prüfungsvorleistung (PVL): Gibt es nicht aber, Klausurinhalte beziehen sich in etwa zu 50% auf die Hausaufgaben. Es ist also in Ihrem Interesse, die Aufgaben zu erledigen. Prüfungsleistung (PL): 60-minütige Klausur zur Vorlesung Scripting für Kommunikationswissenschaftler Übung ist Ersatz für die Vorlesung, daher gibt es die gleiche PL. MELDEN SIE SICH DAHER GANZ NORMAL FÜR DIE PRÜFUNG AN! 5

6 Zeitplanung Termin Thema entfällt Einführung JAVA SCRIPT entfällt Freischaltung Tutorials SosciSurvey entfällt Freischaltung Tutorials SPSS entfällt Freischaltung Tutorials R entfällt Pfingsten Freischaltung Tutorials OpenSesame entfällt entfällt entfällt 6

7 JAVA SCRIPT CPU CPU INTERPRETER JAVA SCRIPT ist nicht JAVA COMPILER CODE CODE 7

8 HTML Öffnen Sie Spiegel.de mit Mozilla Drücken Sie Strg + U HTML - Hypertext Markup Language Auszeichnungssprache, Markierung durch Tags Unterteilung in head und body Der Head beinhaltet Meta-Informationen (z. B. Name der Website, Kontaktdaten, Informationen für Suchmaschinen) sowie Verweise auf zugehörige externe Komponenten wie CSS oder JavaScripts. Der Body beinhaltet das, was dem Nutzer auf der Seite angezeigt wird. 8

9 HTML <p> Absatz</p> <div> Abschnitt </div> <br> bzw. <br /> Umbruch <a href=" Spiegel</a> <img src=" font style buttons Hilfe z.b bei: Teil der Hausaufgabe (Wichtig: em, strong, img, a href, p, br, font size, font color, table) 9

10 CSS Cascading Style Sheets Stylesheet Sprache bestimmt die Darstellung Formatierung mit HTML (z.b. via font) gilt als überholt Was ist Kaskadierung? - Eigenschaften werden an untergeordnete Elemente vererbt, es sei denn sie werden explizit überschrieben entweder direkt im Head der HTML-Seite mit <style> </style> oder als zusätzliche.css-datei, im Head aufgerufen mit <link rel="stylesheet" href= beispielname.css">" <p class="testklasse">test</p> p.testklasse{background-color: #f89; border: 1px solid black} 10

11 CSS CSS macht effiziente Änderungen möglich, da diese automatisch für alle zugeordneten Elemente gelten Body - Blau Body - Blau Absätze - Rot Body Blau Absätze - Rot Class Sonne - Gelb 11

12 JAVA SCRIPT Typischerweise um Interaktion zu steuern klassische Objektorientiere Programmiersprache Einbinden via <script> oder Verweis im head <script src="pfad.js">

13 JAVA SCRIPT Funktionen: HTML <button onclick = "TEST()">DRÜCK MICH</button> JAVA SCRIPT function TEST() { window.alert("test") } 13

14 JAVA SCRIPT Zugriff auf HTML: HTML <p id="ausgabe">das steht hier</p> <button onclick = "TEST()">DRÜCK MICH</button> JAVA SCRIPT function TEST() { document.getelementbyid("ausgabe"). innerhtml = "nicht mehr"; } 14

15 JAVA SCRIPT Variablen: HTML <p id="ausgabe"></p> <p id="ausgabe2"></p> <button onclick = "TEST()">DRÜCK MICH</button> JAVA SCRIPT function TEST() { var Nummer = var Buchstabe = "K" document.getelementbyid("ausgabe"). innerhtml =Nummer; document.getelementbyid("ausgabe2"). innerhtml =Buchstabe; } 15

16 JAVA SCRIPT Bedingungen (Conditional Statements): HTML <p id="ausgabe"></p> <button onclick = "TEST()">DRÜCK MICH</button> JAVA SCRIPT function TEST() { var Datum = new Date() var Sekunden = Datum.getSeconds(); var Statement; if (Sekunden < 30) {Statement= "kleiner";} else {Statement = "groesser";} document.getelementbyid("ausgabe"). innerhtml =Statement; } 16

17 HAUSAUFGABE I Ihre Hausaufgabe: Programmieren Sie ein Beispiel auf JSBin, bei dem zu Beginn ein roter (!) Instruktionstext wie oben steht Gefolgt von einem Button, der eine JS-Funktion aufruft welche eine Zufallszahl (von 0 bis 1) erzeugt und dann per if-/else anzeigt, ob die Zahl größer oder kleiner als 0,5 ist Wichtiges Objekt: MATH 17