Computers Languages and Programming JingShin Chang CSIE NCNU

電腦、語言、編程 Computers, Languages and Programming Jing-Shin Chang (張景新) CSIE, NCNU NLP & MT Labs 2019/10/03 (v 1. 3. 4) EPWP/PBPG-2019 -08 Internet Entrepreneur

Lecture 3 - Programming Jing-Shin Chang (張景新) CSIE, NCNU NLP & MT Labs 2019/10/09 (v 1. 3. 7) EPWP/PBPG-2019 -08 Internet Entrepreneur

BCC: Programming n Generic Programming with HLL l Processor Instructions n Manipulate data with programs which are written in generic High Level Language commands

BCC: Programming n Generic Programming with HLL l Memory (internal) Variables names are used to name some memory bytes l l Declared in HLL n int N 1, N 2, Sum (typed language) Variable have different data types Simple variables n N 1, N 2, Sum, … Structured data or objects n My. Birthday. Year, Meeting. Month, …

BCC: Programming n Generic Programming with HLL l Memory (external) filenames n Files access n Databases

BCC: Programming n Generic Programming with HLL l I/O n Input/Output statements/functions

BCC: Programming n Generic Programming with HLL l Example: say “Hello World” n print l l (“Hello World !!!”) In Python using the print() build-in function n printf l l (“Hello World !!!n”) In C/C++ using the printf() build-in function

BCC: Programming n Generic Programming with HLL l Example: add 2 numbers (1) n written l Source Program (“add 2. 00. py”) l l l in Python Or: print “The Sum is”, Sum (in Python 2) Execution (“python add 2. 00. py”)

BCC: Programming n Generic Programming with HLL l Example: add 2 numbers (2) n written l Source Program (add 2. 00. py) l l l in Python Or: print “The Sum is”, Sum (in Python 2) Execution (python add 2. 00. py)

BCC: Programming n Generic Programming with HLL l Example: add 2 numbers (3) n written l Source Program (add 2. py) l l l in Python Or: print (“The Sum is”, Sum) (in Python 2) Execution (python add 2. py)

BCC: Programming n Generic Programming with HLL l Example: add 2. c (written in C) N 1 = input(“Enter the 1 st Number (N 1)…”) N 2 = input(“Enter the 2 nd Number (N 2)…”) print (“The Sum is %d” % Sum)

BCC: Programming - Functions n Generic Programming with HLL l Function: add 2(Num 1, Num 2) N 1 = input(“Enter the 1 st Number (N 1)…”) N 2 = input(“Enter the 2 nd Number (N 2)…”) print (“The Sum is %d” % Sum)

BCC: Programming n Generic Programming with HLL l The example program consists of n Variable declaration n Input statements n Output statements n Task-specific statements l Collected as a function n named l as main(argc, argv, envp) argc, argv, envp are “arguments” that allow others to provide input data when executing the main() function

BCC: Programming - Functions n Generic Programming with HLL l Function: A collection of statements (and declarations) that performs some specific function n Can be used repeatedly, each time applying different parameters as needed l a = max(12, 23); b = min(a, 15); c = max(b, 18); … n You can write your own functions, so repeatedly used functions can be called without copy-pasting the same statements more than once.

BCC: Programming - Functions n Generic Programming with HLL l The 1 st function that will be executed in a C program is the main() function, which is executed only once. n Other languages have their own starting function. Check them out. n Web programming is event driven (response to events, like mouseclick), so there is not an explicit main() function to start with.

BCC: Programming - Libraries n Generic Programming with HLL l Build-in (內建) functions n Frequently used functions provided by the language l l l <stdio lib> - printf(), scanf(); <math lib> - sin(), cos(), … (in C/C++) 3 rd party library functions n Other persons may write useful functions that you can use by specifying their names and appropriate arguments l Example: play. Music(“birthday. mp 3”)

BCC: Programming - Libraries n Generic Programming with HLL l Library/Package: na collection of related functions that are pre-compiled. l E. g. , file compression packages n You can include (or import) them in the beginning of your program in order to use their functions in your program l You must install a package if not build-in. n E. g. ,

BCC: Programming - Framework n Generic Programming with HLL l Framework: a way to make large projects (for example: a big website) easier n. A collection of related library functions n Well-organized of modules l E. g. , logically related, hierarchical directories n Easy l for creating a big project by properly configuring configuration files in the framework, adding user-provided features, modifying codes

網路程式設計 Web Programming Jing-Shin Chang (張景新) CSIE, NCNU NLP & MT Labs 2019/10/07 (v 1. 3. 6) EPWP/PBPG-2019 -08 Internet Entrepreneur

BCC: Web Programming n Web Access Method: l Client-Server Model n l Request-response model User Request => Web Browser => Web Server => Server Response => Response Result in HTML Page

BCC: Web Programming n Web Programming vs. Generic Application Programming l Better user interaction and user experiences n GUI: Graphic User Interface l n for average users Flexible UI elements l l Event Driven n on. Click=calc. Sum(), on. Mouse. Over Manipulating Browser Objects & Document Objects in Event Handlers n calc. Sum() { … document. my. FORM. Sum. value = document. my. FORM. N 1. value + document. my. FORM. N 2. value }

BCC: Web Programming n Web Programming = Static Web Pages + Active Programs l Static Web Pages: n present l fixed contents Active Programs (scripts) n Interact with users for input data, and present contents (dynamic web pages) that depend on the use request/interaction l l Client (browser) side: javascript Server side: JSP, ASP, PHP, Perl, Python, javascript

BCC: Web Programming n Web Programming vs. Mobile Application Programming l l Similar development flow Mobile: n n Use simulator in PC for development More UI elements

BCC: Web Programming n Web Programming + Mobile Programming l n Responsive web design (RWD): decide the display geometry dynamically and render results according to the device specification SEO (Search Engine Optimization) l Optimize web design so that search engine will find your website easily, rank your website in top ranks, and classify your website appropriately n E. g. , meta data in header section to describe the nature of web page(s) (and/or web site)

BCC: Web Programming n Processor l Client side script language n input l validation & processing Server side script & generic HLL n Main task processing (scientific, commercial, AI apps)

BCC: Web Programming n Memory (& Data) n Script l Variables used by scripts n Browser l Object Model (BOM) Variables to address browser attributes for manipulating browsers n E. g. , go back/forward one page by manipulating the “history” attribute n Document l Object Model (DOM) Variables to address contents of the current page (e. g. , a <p> named “Sum”) n Database: SQL

BCC: Web Programming n I/O l Contents: HTML, HTML 5 n Content elements n UI elements l l l Event Driven n on. Click=calc. Sum() n on. Mouse. Over=show. Alert() Event Handlers n calc. Sum() {…} Style: CSS n Style elements

資料結構+演算法+物件導向 Data Structure, Algorithm, Object-Oriented Programming Jing-Shin Chang (張景新) CSIE, NCNU NLP & MT Labs 2019/10/09 (v 1. 3. 5) EPWP/PBPG-2019 -08 Internet Entrepreneur

BCC: Programming n Programming: l n Write instructions for the processor to complete some tasks What is a better way for programming? ?

Programming – Data Structures ( 資料結構) & Algorithms (演算法) n Program A set of instructions that implement some specific task when executed l Complete the task by manipulating some related data l n Data l Structure: represent data for the task properly n Algorithm: l manipulating the data according to some logical steps

BCC: Programming – Data Types n Most programming language allow you to store data in different data types, so you can represent, store and handle your data in a logical manner.

BCC: Programming – Data Types n Simple Data Types: l Boolean constants: true, false (0) Character (char): ‘a’, ‘b’, ‘Z’ l String: “I Love You !!!” l Integer (int): 1, 23, 456 l Floating number (float): 3. 14 l Exponential numbers: 2. 4 e (-5) l

BCC: Programming – Data Types n Complex Data Structures: l l Structured Data = {a set of related data members (attributes)} Structured Dada Types (Examples): n Date: {year, month, day} l n l // with 3 attributes, fields or member variables Time: {hour, minute, second} Instances of Date n Date Today, Tomorrow, Christmas l Int Num 1, Num 2

BCC: Programming – Data Types n Complex Data Structures: l l Related data members (attributes) tend to be handled as a whole So we give them a upper level name (‘Today’), and access individual members as attributes in a hierarchical manner, if necessary n n n Today. Year = 2019 Today. Month = 9 Today. Day = 23 l l “Today is 2019/9/23” vs. 3 independent variables: year, month, day

BCC: Programming – Data Types n Complex Data Structures: l Structured data can be managed as a whole, like n My. Birthday l = Christmas 1986 or individually by their “members” or “fields”, like n Today. year = 2019 n Mary. Birthday. month = 8 n John. Birthday. day = 12

BCC: Programming – Data Types n Data Structure + Access Methods = Object: l n Object = Structured Data + Access Methods Example: l Date: { year, month, day, init. Date(), add. Days(), sub. Days() } n Tomorrow = Today. add. Days(1) l l // vs. functional notation: // Tomorrow = add. Days(Today, 1) n Days. Before. Xmas Today = Christmas -

BCC: Programming – Data Types n Data Structure + Access Methods = Object: n Structured data is often associated with some frequently used functions that specifically handle such data members. l Example: initializing attributes (often called a constructor function) n Include such functions (or called methods) as a part of the structured data specification is convenient to reuse them on objects that has the same attributes (and only on such objects).

BCC: Programming – Data Types n Data Structure + Access Methods = Object: n n Date: { year, month, day, init. Date(), add. Days(), sub. Days(), get. Julian. Date() } Initialization/Construction: l l When instances of Date are created, their attributes are initialized by automatically calling a constructor function (such as init. Date(), __init()__, …), instead of initializing outside the creation step. Today = Date(2019, 12, 21), Xmas = Date(2019, 12, 25) vs. n Today. year = 2019; Today. month = 12; Today. day = 21 n Xmas. year = 2019; Xmas. month = 12; Xmas. day = 25

BCC: Programming – Data Types n Data Structure + Access Methods = Object: n Date: { year, month, day, init. Date(), add. Days(), sub. Days(), get. Julian. Date() } n Accessing l l Member functions jd. Today = Today. get. Julian. Date() jd. Xmas = Xmas. get. Julian. Date() n Convert (year, month, day) into a continuous date number called Julian Date for astronomical scale time computation n 2019/9/23 = 2458749. 5 JD n 2019/12/25 = 2458842. 5 JD n 2019/12/25 – 2019/9/23 = 93 days

BCC: Programming – Data Types n Data Structure + Access Methods = Object: n n Date: { year, month, day, init. Date(), add. Days(), sub. Days(), get. Julian. Date() } Information Hiding l l Sometimes, it is not desirable to update or memorize the individual data members. So OOP languages allows you to hide the real members but provide functions to get or change (“set”) those unseen member variables: Today = Date(2019, 12, 21), Xmas = Date(2019, 12, 25) vs n print(Today. get. Year()) // get the Year part of Today, and print it n Today. set. Day(Meeting. get. Day()) // set the Day part of Today to be the same as the Meeting day.

BCC: Programming – Data Types n Data Structure + Access Methods = Object: l Each such instance is called an object. n Example: l l Today = New Date(2019, 9, 23) // Today= 2019/9/23 Tomorrow = Today. Add. Days(1) // =Today + 1 day Christmas = New Date(2019, 12, 25) The template that defines an object’s member variables and member functions is itself call a Class in most object oriented programming (OOP) languages. n n OOPL: C/C++, Java, Python, … (Refer to OOP textbooks …)

BCC: Programming – Development Environment n Program Development Loop: l Edit => Compile (or Interpret) => Test => Debug

BCC: Programming – Development Environment n IDE: Integrated Development Environment (Software Tools) l l Editor: edit source program Compiler: convert source code to object code n l l Interpreter: compile one instruction and execute it repeatedly Linker: combine object code with other library code to form a complete executable Loader: send executable code to the computer for execution Debugger: trace errors (logical errors and run time errors) in order to correct the program Profiler: analysis of the execution flow and/or execution time for performance improvement.