Computer Grade 9-1 Pages PDF

# UNIT 3 ## Programming Fundamentals - understand web development and differentiate between a website and a web application. - create a static website using HTML/CSS in an appropriate environment. - create dynamic websites using JavaScript as the frontend scripting. - implement common algorithms th...

# UNIT 3 ## Programming Fundamentals - understand web development and differentiate between a website and a web application. - create a static website using HTML/CSS in an appropriate environment. - create dynamic websites using JavaScript as the frontend scripting. - implement common algorithms that use sequence, selection, and repetition in JavaScript. - determine ways of debugging their code in JavaScript. ## 3.1 Introduction The World Wide Web's (WWW) development has made it easier to share information and data in many formats, which is becoming more prevalent and essential in our everyday lives. Documents, pictures, audio, video are the main types of information but not limited to. Especially, with the rise of social media, the links and tags of information enable you to share and search related information on the internet. Additionally, the dynamic nature allows changing the contents for individuals and group of peoples. For example, the contents of the website remain same whoever visits it, but after logging in as a member customized data is shown. Hyper-Text Markup Language (HTML) is the primary language that is used for the basic website development. Though different software and tools allow you to create a website using a template, but basic knowledge of HTML is necessary to customize it according to your desire. ## 3.1.1 Web and Website A document which exists and is accessible through internet is a webpage, while a set of webpages is a termed as Website. For example a news website Associated Press of Pakistan as shown in figure 1, has different sections and each one of them has at least one webpage in every section. To access a webpage, software namely web browser is used. You just provided in the Universal Resource Locator (URL) in the website which is the generally accessible address of the document. This way, web browser will locate the document and display it. In case, you are unable to recall the URL of the website you are searching, help of search engines is quite useful. Search engine provides the service to seek relevant information based on the keywords you have entered. The search engine on the basis of keywords creates different combinations and searches the relevant information. Apart from the relevant matches, auxiliary results are also displayed to help user to explore extra information and viewpoints. Once, the results are collected by the search engine, it displays the website address and little content from every website; in a list fashion as shown in fig. 2. This way, it is easier to select the website, you are looking for. The point to note is that every website has a 'Homepage'. As soon as a webpage opens up, its homepage is displayed and thereafter you can navigate the website to extract information. Every website and relevant pages need to be uploaded to a web hosting services, which offers web servers that are available round the clock. This way, clients and visitors can access the website on their digital devices. ## 3.1.2 Web Application On the other hand, a computer program which offers a service or executes tasks via a browser and internet connection, remotely accessing a server, is called web application. As shown in fig. 3, through web browser, a web application can be visited by users like a Customer Relations Management (CRM) system which handles retailing, supplies, promotions, customer feedback, etc. At the backend there can be more than one server, for each type of task or a single server handling all the requests and managing it accordingly, while keeping the front-end updated. It all depends on the architecture which is being deployed to facilitate the front-end, and transparent to a normal user. ## 3.1.3 Website Development Website is the first step to show your presence in the digital world. Website only shares information and contents and does not allow any changes by the viewer. A website can have single or multiple pages linked together. For example, you can create a personal page of your interest highlighting your hobbies, activities and passion. You can share your ambitions and achievements. Like, if photography is your hobby, you can upload picture albums on the website on a separate page. Anyone who visits the website can view the contents but in no manner can manipulate it. ## 3.1.4 Static Website Regardless, how much content and how many pages you increase in your website as discussed above, the contents remain unchanged; unless you change it yourself. In other words the website is static and once accessed by the user; it will be loaded from the server where you have hosted it. After loading, on the user's computer the link to the server is no more required. Such static websites are easy to create and load on the client's site. ## 3.1.5 Dynamic Website A website is dynamic if the information is changed or adjusted in accordance with user input or choice. For example, alteration of background color of a webpage every time a user clicks a button. So, why a website needs to be dynamic? The intention of every website owner is to have frequent visitors and the visitors should stay long. For example, online shopping sites offer promotions and packages. So that the visitors lengthen their stay on the interested page, get awareness and shop. To achieve this, dynamicity in websites is applied using scripts, like JavaScript, python, PHP, ASP, Net, etc. In the context of online-shopping site, every member of the website can customize its webpage based on his/her interest as shown in fig. 4, while non-members and visitors get the same page to view, every time. ## 3.1.6 Front-End Development A front-end of a website provides the interface which is graphical nowadays and termed as Graphical User Interface (GUI). The person visiting your website views and interacts with GUI. The front-end of a website is developed using Html, CSS and Javascript, etc. A person, who develops such front-end websites and GUIs, is termed as 'Front-end Developer' ## 3.1.7 Back-End Development Front-end developed websites and GUIs need to communicate with the server for every event which the user generates and corresponding result is to be displayed on the front-end. This bridging between the front-end and the server is taken care by back-end development. A person who writes code about such services that are provided by the website is called a 'Back-end Developer'. Back-end development requires more knowledge and skill level in hand than front-end development, like knowledge of JavaScript, Python, PHP, ASP, Net, etc. ## 3.2 HTML Hypertext Markup Language (HTML) is the language used to define and display your contents in the form of a webpage. With the help of tags, you will define different contents what they are, correspondingly HTML will display them accordingly. Html identifies and provides support for every object in a webpage on the basis of tags. For example, "This is my first attempt for a webpage." is a sentence which you want to get displayed in a web browser, so you have to put it like this: ```html <p>"This is my first attempt for a webpage."</p> ``` Character(s) between angle brackets '<' and '>' are called tags. The said character(s) is as per the defined HTML rules and is one of the elements that we can use. Every component of Html is identified by a starting and terminating tag. Additionally, we have to define from where to start and end the effect of every component. Therefore, we place <p>, the starting marker, in the start of the sentence and </p>, the closing marker, after the sentence. Now, you have put your sentence between two tags with a component to take effect. The 'p' tag is used for paragraph/sentences. Similarly, there are tags for everything in HTML. But, the main point to note here is that you can write your html code in a notepad and run it in a browser. There are many softwares/IDE environments available that help in minimizing your coding efforts. Visual Studio, Netbeans, etc. For this chapter, we will be using the Visual Studio version 2022 environment, but the codes mentioned here will be applicable to any other environment, as well. ## Installing Visual Studio For installing the latest Integrated Development Environment (IDE) of Microsoft Visual Studio, visit https://visualstudio.microsoft.com/vs/ and download the installer. The installer is an executable file (.exe extension) and you just need to double click to start the installation. Microsoft Visual Studio is a wide-ranging IDE which can be used for writing and running code for more than 30 languages. Therefore, it allows you to choose the language environment. Once selected, click "install" and it will download and install the environment on your system (PC/ Laptop). After the installation, you can run the IDE from your system. ## 3.2.1 HTML Document Object Model The Document Object Model (DOM) is a standard which provides mutual interpretation where grammar of a language can be associated with and can coexist on various operating systems. In HTML, every file is interpreted as a DOM-tree where hierarchy of the said file is defined. As discussed in last chapter, a tree consists of nodes and links, so is the case here where every object and component of HTML is treated as node. Hence, the file, components, features, script and even comments which exist in a web page all are treated as objects by HTML as shown in fig 5. Simpler approach in locating any object in a web page via accessing the DOM-tree is 'element-id'. So, we will call function like 'getElementById()' and it will either return the object of the element we seek if it is able to locate it else a null value is returned. ## 3.2.2 Tags in HTML However, since html is a tag based programming language, so we should recognize ourselves with the most important and frequent tags that we will encounter in the development of learning curve. With a little bit of practice, these tags will be on your fingertips, as the tags themselves are quite self-explanatory. ### 3.2.2.1 HTML Tag Any html is identified with the <html> and </html> tag-pair, i.e. anything written between this tag-pair is recognized as a html document. An HTML-Document is arranged just like a simple document that you write and prepare in Notepad, Wordpad or MS Word, etc., with headings, sub-headings, sentences, etc. Similar to <html> tag-pair, everything is characterized according to its respective tag-pair. The file is saved with extension .html. ### 3.2.2.2 Head Tag The <head> tag-pair is defined, where tags can be placed which are not part of the main body of html, like the title of the webpage. ### 3.2.2.3 Title Tag Just like every document has a name, the <title> tag-pair allows your webpage a name. This way, even if multiple pages or tabs are open in the browser, a webpage is easily identifiable. ### 3.2.2.4 Body Tag The main part of the html is the 'body', all the main constituents of the document are arranged in the <body> tag-pair. ### 3.2.2.5 Tag for Headings The headings are of different levels provided by html and there are 6 defined levels, 1 being the biggest and 6 is the smallest heading. The heading tag pair looks like <h2>...</h2>, for a second level heading. ### 3.2.2.6 Tag for Line Break To split a sentence into multiple lines a <br/> tag is used. If this tag is not used between 2 sentences, and even you write the second sentence on a new line; html does not recognize this style and will put both the sentences in the same line, one after the other. The following code in fig 7 shows how you can setup your first web page. The title of the page is between head tag-pair followed by the body, and is shown on the browser's tab in the output. Note that everything written in the body is displayed on the webpage. Thereafter, you can assign suitable headings and paras, with necessary line breaks. ### 3.2.2.7 Tag The Text Span is used to provide style and arrangement to a line. For multiple lines you need to assign the <span> tag-pair on every line. Whereas, <div> provides the same effect to a set of lines present in the page. The style and classes, etc. are generally applied in the div tag-pair. The 'i' tag-pair is used for a sentence to be in italics, like a note. The <em> tag-pair is for emphasis, whereas <b> and <strong> tag-pair are used for display of bold and strong characters. Frequently used tags are listed in Table 3-1. Fig 8 shows result of various text-tags, like "I" tag-pair used in line 20. | Tag-Pair | For the Task | |---|---| | p | Paragraph, sentence | | b | To make characters bold | | i | Text is shown in italics | | em | When you need to emphasize a word but with italics. | | strong | When emphasize a word but with bold | | sup | Superscript, helpful in formula and footnotes | | sub | Subscript, helpful in formula and footnotes | | u | Underline a text | | small | Smaller text size, like footnote | ## 3.2.2.8 Bullets & Numbering Html treats bullets and numbering in the form of an unordered <ul> and ordered list <ol>, respectively. Bullets can be of type circle, square or disc. The numbered list have the option of numerals and alphabets to choose from, just like a word-editor. ## 3.2.3 Manipulating Data with Tables ### Tables in HTML Tables are a good way to enlist data which is visually appealing. Html provides 'table' tag-pair to allocate and designate data within the table. The first row of the table is the header row and is generally used for headings and is defined with the 'th' tag-pair. Whereas data is manipulated through 'td' tag-pair. ## 3.2.4 Links to Resources Links are helpful components of a webpage, via which you can redirect to another webpage or a document. Links are called Hyperlinks in html with 'a' tag-pair. Hyperlinks are easy to identify on a webpage, as the mouse cursor changes as soon as the cursor touches a link element. Hyperlinks can be associated not only to text, but to images as well. The general syntax for defining a links is like "<a href="url">link text</a>", where href refers to the address alongwith the path and link-text is for user information. Target is an optional parameter but its value defines where to open the webpage. If the value chosen is 'blank', it will open in a new tab or window; however for the value of 'self' the destination address will open in the same tab or window. Fig-11 depicts result of adding the following line of code in the body of the webpage: ```html <a href="https://www.nbf.org" target="_blank">National Book Foundation </a> ``` ## 3.3 Cascading Style Sheets (CSS) In the development of HTML webpage the scheme, arrangement and presentation of the whole webpage along with the components are handled by a stylesheet language. There are various stylesheet languages available like Cascading Style Sheets (CSS), Document Style Semantics and Specification Language (DSSSL), Extensible Stylesheet Language (XSL), etc. The most common and frequently used with HTML is CSS. So, this way the contents of the webpage are defined through HTML while the look of different components is handled via CSS. This way, it is easier to manage and troubleshoot your web designing code for extension and digging out the errors. There are three ways, via which we can use CSS styles in our HTML webpage. ### Inline CSS Any CSS attribute that we want to incorporate can be added using a HTML tag (like the ones, we have covered in the last section) and incorporated in the body section, as shown in fig-12. ```html <p style="color:red; font-size:40px; font-style: italic; text-align:center;"> My Teaching Academy </p> ``` ### Embedded (Internal) CSS Instead of assigning styles for every heading and other component at the time of its first occurrence in the code, a better approach is to outline all the styles in the header under the tag-pair of 'style' as shown in fig-13. This way, all the presentation related CSS code is separated and do not indulge with the already written HTML code. Additionally, change in one line in the CSS section will be reflected throughout the respective components. ### External CSS Alternatively, a file with extension '.css' can be made and all relevant CSS code according to your schema can be present there. Once, the contents of HTML are finalized, just attach the CSS file in the head portion of HTML by passing the link. External CSS are used with large projects, like in commercial purposes. ```html <link rel="mystylesheet" href="my_own_SS.css" /> ``` NOTE: The priority of Inline is highest, followed by embedded styles and lastly the attributes of external are considered; if all three are present in a webpage. ## 3.3.1 Decorating Tables with CSS By using CSS, you can provide borders in table as well. For this purpose, we initially need to state the 'style' tag-pair just before the start of table and later inside the block, we need to set which style to opt for and where to apply it. As shown in the following code, as shown in fig 14 we are defining border for table, table header cells and every other cell in the table. Other than that, we can also designate a background color for the table. We may add background color of the table as well, by adding the following code, as shown in fig-15 in 'style' tag-pair. ## 3.3.2 Homepage Decor The code of fig-16(a) is similar to that of fig-11. As a first step, we define 'style' tag-pair in the body and add lines 22 to 24, which result in changing the color of 3rd level headings in the body to green as shown in fig-16 (b). In line 4, 'alt' image tag is alternative wording which describes the picture that is being shown on the page, in a short phrase. Thereafter, if we add line 14-21, then basically we are applying a new style to the whole body of the webpage. On line 17 of fig. 16(a) we are loading an image of an open book at the background of the webpage and kept it fixed in a non-repetitive fashion in the next couple of lines. In lines 20 and 21, we further extend our décor by underlining the text in the whole page and define the style of underline to be wavy, as shown in fig-17. ## 3.4 Java Script Javascript is an exciting language primarily used in development of web pages and scripts. It does not consume much of memory and that is why it is used at the client-end in developing websites, for making pages dynamic. It easily works with programming languages like Java and HTML, on any operating system. ### 3.4.1 Let's Meet Javascript Javascript code can be embedded in HTML with starting and ending tag of <script>, in a webpage. There is no limitation of where to place the code inside a HTML file. For example, the following Javascript code embedded in the body, displays a sentence (string) using 'document.write()' function, as shown in fig-20. In the sentence, displayed above we put additional spaces and tabs, which javascript simply discarded. For example, we will get the same output if the statement is like the one commented on line 5. Try it for yourself. In programming everything that a user or another program does with your program that can be sensed and triggers some task to be done, is called an 'event'. Events are important and critical in the functioning and flow-control of your program. Similarly, in website development, easiest way to introduce dynamicity is to allow some event to occur and respond accordingly. Alert is the commonly used functionality that Javascript provides to inform user, about the result of his action or notification. Event based code like 'onclick' are put between the start and end of <head> tag; unlike the above example, where we put our code within the <body> tag. The scenario in fig-21, allows the message to be displayed when the button is clicked. And after the 'Be Sure' button is pressed, the generated alert is as follows. You can try for yourself, by replacing different messages and even arithmetic operations like: ```js alert(2+2) ``` which results as: In the following line of code in fig-22, two variables are defined. One is a boy's name in the variable 'name' while other is 'reward' having value 5000. So, it displays the result in browser. Now, let's amend the same program for user input, where we want to change the value 'reward'; by taking input from the user. For input from the user we can use the prompt() function, which pops up a message window like that of alert() function. This input will be assigned to a variable at the backend which can be used, later. A sample code is as follows. You can replace these lines in the previous example and will get the outputs, as shown in fig-23. ## 3.4.2 Variables A variable is an entity that stores some value for later use. In mathematics, a variable is generally represented by a single character, but not limited to. Similarly, in programming languages, variable should be named in a meaningful manner. Additionally, the type of values the said variable can store is another important aspect. Such that the developer after defining and assigning a variable, is later able to recall about the task and type of values the said variable holds. The basic value that a variable can hold in JavaScript is either a number or set of characters (called string) or a Boolean which is either 'true' or 'false'. It is critical to note that variable naming convention does not support a number to be the first character of the variable name. Since, Javascript is case sensitive; therefore 'reward' and 'Reward' are two different variables. Table 3-2 enlists basic datatypes of JavaScript. | Number | 7 3 5 9 | |---|---| | String | JAVA | | Boolean | TRUE | Avariable is declared with the 'var' keyword and multiple variables can be declared in the same line of code, too. The first ever assignment of a value to a variable in the life span of program is called 'initialization'. A good programming practice is to declare and initialize the variable at the same time. It is important to note that sequence of instructions in programming matters. For example let's look at the following code, where we defined two variables and keeping the good practice in mind, declared and initialized variable name in line 7. However, just to highlight how things can be alternatively done, we declared the reward variable in line 8 but initial value as assigned to it in the next line. In line 12 we print the statement using both the variables, as shown in fig-24. Note that, if you take line 7 and put after line 11, then the following message is displayed. This is due to the reason that the variable is defined after the write statement is using the variable. Unless, the variable is declared and holds a value, only then it can be used as per the programming sequence. Hence, sequence of instructions is important and though you might have written a program syntax-wise correctly, but the change of sequence might lead you to unexpected bugs. ## 3.4.3 Operators Javascript supports arithmetic operators to be used which are Addition (+), Subtraction (-), Multiplication (*) and Division (/). Other than this, the Modulus (%) operator can also be used which gives remainder of a division operation. The code shown in fig-25, takes 3 variables namely, 'a', 'b' and reward. Only reward is initialized through a constant value in line 5. In line 6 and 7, remainder of reward divided by 10 is stored in 'a' and 'b' is assigned the value when reward is divided by 10, respectively. ## 3.4.4 Conditional Statement Conditional or selection statement is an essential part of the program where amongst choices, the program chooses on the basis of some constraint. Applying an 'if' statement before one or more lines of code on the basis of some condition is met makes a typical selection scenario. That is, if the condition is met, then those line(s) will be executed otherwise skipped. Now, to check the condition, Javascript provides set of comparison operators to be used for evaluating the condition. The conditional operators are listed in table. | Operator | Name | Example | |---|---|---| | == | Is equal | x == y | | != | Is not equal | x != y | | > | Greater than | x > y | | < | Less than | x < y | | >= | Greater than or equal to | x >= y | | <= | Less than or equal to | x <= y | For example, the admission office of a Montessori school checks the age of a child, if the kid is of at least 4 years old, then admission is granted. So, the code should look something like, as shown in fig-26. You may check it for different values of the variable and also for different comparison operators. A better notion is to align both the scenarios, i.e. if condition is met and vice versa. This is achieved using an 'if-else' statement, as shown in Fig-27. This way, either of the two situations will definitely happen. There are scenarios where more than two possibilities exist and for that reason, we can modify our selection statement to be an 'if-else if-else' statement. This way, the set of conditions apply, first with 'if' and thereafter with 'else if' statements. For any other condition that has not been catered for, 'else' will take care of it. In Fig-28 the previous code is extended by checking multiple conditions. ## 3.4.5 Iterative Statement Iterative statement like 'For Loop' is used to get similar kind of task done. Rather than writing the same line of code multiple times, the same task is achieved in much lesser line of code. The 'for loop' works on the basis of an index, which you can initialize in the loop. Next is the terminating condition which needs to be set for the loop to terminate. Lastly, step-size needs to be defined that how many steps the index will take after each iteration; till the terminating condition is met. In the following example 'for loop', an index is initialized to 0, the value of index will increment with 1 and loop will execute till index value remains less than 10. Fig-29 depicts start, end and iteration of a for-loop. Alternatively, we can decrease the index value and set the condition accordingly; in the code of fig-30 we increased the step size, too. ## 3.4.6 Nested Loops Multiple iterative tasks, if can be related then they can be incorporated in such a way that one loop can reside inside the other and are termed as 'Nested Loop'. In nested loop, initially the outer loop will start and then the inner loop will run and finish. Thereafter, the index value of outer loop will increment and the inner loop will start and end again, and so forth and so on; till the outer loop terminates. Fig-31 demonstrates a nested loop. In a similar fashion, the code in fig-32 prints Mathematical Tables from 2 to 5. The outer loop assigns the value, for which the table is required while the inner loop prints the table. ## 3.4.7 Arrays An array is a datatype which can hold a number of homogenous set of elements. Such that we do not need to define multiple variables of the same type like num1, num2, ... num25. Instead, we can declare an array which contains 25 values. This way, we can directly access any value just by passing the respective array-index number. It is trivial to note that array-index starts with 0. Declaration of an array is of the form as shown in line 7 of fig-33. Alternatively, we can declare a null array first and assign values to it later, as shown below: So, rather than assigning values one by one, as highlighted in the lines 8-12 in above code, we can alternatively use for-loop to populate an array. The code in fig-35 initializes a null-array on line 7. In the next couple of lines a for-loop is taken into account in which user input is taken, via prompt() function. Once, the user input is taken and the loop terminates, in line 12 the elements of the array are displayed as in pervious example. ## 3.4.8 Functions Function is a set of line which occurs in the code quite often that can be segmented once, and called again and again. This way, rewriting the same set of code for similar results can be eliminated. Through functions, different sets of code can be separated resulting in fewer lines of code assigning them meaningful names based on their functionality. This leads to efficiently managing a large computer program. Programming languages provide built-in such functions like earlier we have used functions prompt(), input(), etc. Whenever the function is called, the caller does not necessarily need to know the code behind that function, to use it. A function has a name through which it is identified and called. Additionally, a function can have arguments which are variables local to that function and their life span is limited to the said function. Variables outside functions are global variables and can be accessed anywhere from the program. Recall the earlier program of fig-11 where we defined a function, namely msgSure() and whenever the button is pressed an alert pops up asking "Are you sure?". In line 4 of the said code, we used the 'function' reserved word to define and named it. However, on line 11, we called the same function just with its name. We extend the same code, and provide it with values which are assigned to arguments of the function. And thus, we can use them in the function, as shown in Fig-36. Lastly, lets define another function calcBill() which is similar to the above as it accepts 2 arguments, namely bill and 'amount_rcvd'. The function subtracts bill from 'amount_rcvd' and returns the result. An important point to note in fig-37 is the lines 5 and 10, where the former prints inside the function and latter displays the result outside the scope of the function. Similar approach can be used for testing the values of a function, when frequent occurring set of codes are selected to form a new function. ## 3.5 Debug The Code Debugging refers to locating an error or a bug in the code. In Visual Studio .Net, Select Run from the menu and apply choose 'Run Debugging'. Thereafter, you will get the Debugging menu with some buttons and a debug console. Rather than every time accessing the menu and choose options from there to debug the code, the debugging menu is quite handy and allows you to 'Pause/Continue' your debugging code with the first button. 'Step Into' will go through the code line by line, as the program will normally execute, so that you have a thorough tracing capability of the code. To emphasize on lines where you want to check the values of variables, you can assign a breakpoint as shown in fig-38. You can assign multiple breakpoints for the sake of traceability. In Visual Studio .Net, a breakpoint is shown as a red dot at the start of line, as shown in fig-39. While the code is executed in debug mode, the execution halts at every breakpoint such that behavior of code according to the values can be analyzed. This way, it becomes easier to trace a bug and fix it accordingly. ## 3.6 Create a Dynamic Website If a school wants to display the result of each student on their website, then they have to create a different static webpage for each student. And as the students increase, so does the handling and managing of these webpages. The solution is to provide dynamic website such that contents change according to the user input. Such dynamic website can be created via JavaScript along with Html and CSS. Recall Fig 29, where we printed index number via a loop from 0-9. We extend the same code and the revised code is shown in fig. 40 (a), where the initial 9 lines are the same. At line 10, a new function is added namely 'descOrder()' which when is called prints the index in descending order. Additionally, the program has an id of 'dynamic content' and a button which when pressed calls the descorder() function. A dynamic content is component/portion of the website that alters based on user input. As the webpage loads, the index numbers are printed in ascending order and button with a message is visible as shown in fig- 40(b). On pressing the button, the index numbers are printed in reverse order, as shown in fig- 40(c). Moreover, after line 13 in the code, if we add the following line of code: ```js document.body.style.backgroundColor = "peachpuff"; ``` Save the file, refresh the webpage and press the button, then the output changes to fig-40(d) where the background color of the webpage also changes. You may try to add another button and separate the functionality of changing the background color. # UNIT 4 ## Data and Analysis - explain the scope of the data science field as an interdisciplinary field (computer sciences, mathematics & statistics, and business knowledge & understanding). - define and explain data types, data collection, and data storage. - define and explain big data, and applications of big data in real-world business. ## Introduction A computer system is a fundamental and important part of modern life. It has revolutionized the way we work, communicate, learn, and entertain ourselves.. In today's world, we are surrounded by a lot of data, which may be on our computer system or otherwise. This data is continuously growing and to get meaningful information from it we need to follow some discipline. Data science is the branch of knowledge, in which computer programming skills along with mathematics and statistics is used to extract meaningful information from the collection of data. ## 4.1 Data and Analysis ### Data Data is a collection of information or facts that we gather about something. It can be represented by numbers, measurements, descriptions, sounds or pictures. Here are two examples of data. In a science experiment when you record the temperatures at different times, that temperature values are data. If you conduct a survey of your classmates and get to know how many of them like Mathematics, it will be called data. ### Data Analytics Data Analytics refers to the process of carefully examining and studying data to identify patterns, draw conclusions, or make the data meaningful. It's like solving a puzzle or retrieving meaningful results from the given or collected data. To analyze data, you can use mathematical calculations, statistical techniques, charts, or other tools to understand data. For example, after recording hourly temperature data in a science experiment you can create a graph to see how it changed over time. From graphical representation of data, you draw a conclusion that it got warmer as the day went on, that information will be the result of your data analysis. Therefore, data is the information we collect, and data analytics is the way we observe it to get meaningful information. Data analytics can be quantitative(numeric) and qualitative. ## 4.1.1 Data Science Data Science refers to an interdisciplinary field of multiple disciplines that uses mathematics, statistics, data analysis, and machine learning to analyze data and to extract knowledge and insights from it. It is like a pipeline from data to insights. This insight or knowledge is used to find patterns in the data. The result drawn can be used for making informed decisions to solve real world problems e.g., medical, education, scientific research, and business etc. ## 4.1.2 Concepts of Data Science Data science consists of many components, theories, and algorithms. To understand data science and make its productive usage, following are some key concepts or components that lay the foundation of data science: ### Data As mentioned earlier, data is a collection of observations, facts or information collected from different sources. This data can be in the form of numbers, measurements, words, observations, or in audio or video form. It could be structured(processed) data which is in the form of tables or unstructured (unprocessed) data in the form of audio, video, tweets, pdf files etc. ### Dataset Dataset is a structured or processed collection of data usually associated with a unique body of work. This collection of data is related to each other in some way, for example a collection of brain CT scan of brain tumor patients is a dataset which can be used to evaluate certain pattern or trend common in the entire dataset. ### Statistics and Probability Statistics is the analysis of the frequency of past events and probability is to predict the likelihood of future events. Data scientists use statistics and probability to find patterns and trends in the data. ### Mathematics Mathematics is a fundamental part of data science which helps to solve problems, optimize the model performances, and interpret huge complex data into simple and clear results, for decision making. ### Machine Learning Machine learning is a branch of Artificial Intelligence and computer science which emphasis on the use of data and algorithms to imitate human learning by the computers. ### Deep Learning Deep learning is the subset of Machine learning, with emphasis on the simulation or imitation of human brain's behavior by using artificial neural networks. ### Data Mining Data mining is the subset of data science which primarily focuses on discovering