Introduction to Radiology: Key Components and Techniques

Slide Note

Radiology is a vital diagnostic tool using X-rays and other modalities to visualize anatomical structures. Over time, technologies have evolved, leading to specialized products for various clinical specialties. Radiologists have developed strong competencies in different fields, such as Mammography, Angiography, and more. Understanding the physical principles behind radiology, particularly the use of X-rays and their attenuation properties, is crucial in interpreting images effectively.

hougland_d Follow

Uploaded on Apr 12, 2025 | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.

Download Presentation

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.

E N D

Presentation Transcript

Chapter 5 An Introduction to JavaScript Web Development Path Dr. Ahmad Al-Sabhany CS Department AlMaarifUniversity College

Outline Introduction Hello World! & Basic Examples Internal & External JavaScript Access HTML Content Access CSS Properties Cool Example Variables, Objects, & Arrays Functions Comparisons and logical expressions If & if Else Statements Loops Example Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 2

JavaScript Introduction JavaScript is the world's most popular programming language. JavaScript is the programming language of the Web. JavaScript is easy to learn. Where to start on JS? Main Reference: https://www.w3schools.com/js/default.asp Must visit This tutorial will teach you JavaScript from basic to advanced. Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 3

Hello World! Example <!DOCTYPE html> <html> <body> <h2>My First JavaScript</h2> <button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello World!'"> Click me</button> <p id="demo"></p> </body> </html> Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 4

How to embed JavaScript in Web Pgaes -The internal way 1. JavaScript Functions and Events A JavaScript function is a block of JavaScript code, that can be executed when "called" for. For example, a function can be called when an event occurs, like when the user clicks a button. 2. The <script> Tag In HTML, JavaScript code is inserted between <script> and </script> tags. 3. JavaScript in <head> or <body> You can place any number of scripts in an HTML document. Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both. Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 5

How to embed JavaScript in Web Pgaes -External JavaScript Scripts can also be placed in external files: External scripts are practical when the same code is used in many different web pages. JavaScript files have the file extension .js. To use an external script, put the name of the script file in the src (source) attribute of a <script> tag: Example 1. <script src="myScript.js"></script> (Local file) 2. <script src="https://www.w3schools.com/js/myScript.js"></script> (URL) External JavaScript Advantages Placing scripts in external files has some advantages: It separates HTML and code It makes HTML and JavaScript easier to read and maintain Cached JavaScript files can speed up page loads Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 6

My First JavaScript <!DOCTYPE html> <html> <body> <h2>JavaScript in Body</h2> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "My First JavaScript"; </script> </body> </html> Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 7

JavaScript in <head> - <Body> <html> <head> <script> functionmyFunction(){ document.getElementById("demo").innerHTML="Paragraph changed.";} </script> </head> <body> <h2>Demo JavaScript in Head</h2> <pid="demo">A Paragraph</p> <buttontype="button"onclick="myFunction()">Try it</button> </body> </html> The same example can be used in body Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 8

External JavaScript Example Index.html myscript.js <html> <body> <h2>Demo JavaScript in Body</h2> <pid="demo">A Paragraph</p> <buttontype="button" onclick="myFunction()">Try it</button> <scriptsrc="index.js"></script> </body> </html> functionmyFunction(){ document.getElementById("demo").in nerHTML ="Paragraph changed."; } Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 9

JavaScript Output -How to Display Data in JS? JavaScript Display Possibilities Method 1 - Writing into an HTML element, using innerHTML. Method 2 - Writing into the HTML output using document.write(). Method 3- Writing into an alert box, using window.alert(). Method 4 - Writing into the browser console, using console.log(). Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 10

Using innerHTML. - Example <html> <body> <h1>My First Web Page</h1> <p>My First Paragraph</p> <pid="demo"></p> <script> document.getElementById("demo").innerHTML=5+6; </script> </body> </html> Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 11

Using document.write(). - Example <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> document.write(5+6); </script> </body> </html> Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 12

Using window.alert(). Example <html> <body> <script> window.alert("Hello This is a test"); </script> </body> </html> Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 13

Using console.log().Example <html> <body> <script> console.log(5+6); </script> </body> </html> Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 14

Access HTML using JavaScript <html> <body> <h2>What Can JavaScript Do?</h2> <p>JavaScript can change HTML attribute values.</p> <p>In this case JavaScript changes the value of the src(source) attribute of an image.</p> <buttononclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button> <imgid="myImage"src="pic_bulboff.gif"style="width:100px"> <buttononclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button> </body> </html> -Do Not forget to include the images(pic_bulboff.gif & pic_bulbon.gif) in your folder Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 15

Access CSS Properties <!DOCTYPE html> <html> <body> <h2>What Can JavaScript Do?</h2> <pid="demo1">JavaScript can change the style of an HTML element.</p> <buttontype="button"onclick="document.getElementById('demo1').style.fontSize='35px'">Click Me!</button> <pid="demo2">JavaScript can change the style of an HTML element.</p> <buttontype="button"onclick="document.getElementById('demo2').style.color='red'">Click Me!</button> <pid="demo3">JavaScript can change the style of an HTML element.</p> <buttontype="button"onclick="document.getElementById('demo3').style.border='2px solid blue'">Click Me!</button> </body> </html> Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 16

Change Background Color Example Index.html Index.js constbtn=document.getElementById('btn'); btn.addEventListener('click',function onClick(event){ document.body.style.backgroundColor='red'; <html> <body> <divid="box">Some text here</div> <buttonid="btn">Change</button> // document.body.style.color= 'white'; }); <scriptsrc="index.js"></script> </body> </html> Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 17

Cool Example (Try yourself) - Idea credit: https://css-tricks.com/snippets/javascript/random-hex-color/ Index.html myscript.js <body> <divid="box"> <h1id="demo"></h1> <buttonid="btn"><h3>click to change the color</h3></button> </div> <script src="myscript.js"></script> </body> </html> <html> <head> <style> body { padding: 1rem; display: grid; place-items: center;} #box padding: 20px; border-radius: 5px;} </style> </head> constbtn=document.getElementById('btn'); btn.addEventListener('click',function onClick(event){ constrandomColor='#'+ Math.floor(Math.random()*16777215).toString(16 ); document.getElementById("demo").innerHTML= randomColor; {background-color:#fff; document.body.style.backgroundColor= randomColor; }); Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 18

JavaScript Input User Interaction -Input Example <html> <body> <h2>WelcomPage</h2> <h1id="demo"></h1> <script> varname =window.prompt("Enter your name: "); alert("Your name is "+name); document.getElementById("demo").innerHTML='Hello '+name; </script> </body> </html> Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 19

JS Statements <html> <body> <h2>JavaScript Statements</h2> <p>A <b>JavaScript program</b>is a list of <b>statements</b>to be executed by a computer.</p> <pid="demo"></p> <script> letx,y,z; // Statement 1 x =5; // Statement 2 y =6; // Statement 3 z =x +y; // Statement 4 document.getElementById("demo").innerHTML= "The value of z is "+z +"."; </script> </body> </html> Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 20

JavaScript Keywords Keyword Description var Declares a variable let Declares a block variable const Declares a block constant if Marks a block of statements to be executed on a condition switch Marks a block of statements to be executed in different cases for Marks a block of statements to be executed in a loop function Declares a function Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 21

JavaScript Syntax JavaScript uses the keywords var, let and const to declare variables. 1. Numbers are written with or without decimals: 2. Strings are text, written within double or single quotes: JavaScript uses arithmetic operators ( + - * / ) to compute values: The values can be of various types, such as numbers and strings. For example, "John" + " " + "Doe", evaluates to "John Doe": Hyphens are not allowed in JavaScript. They are reserved for subtractions. //Variable declaration varx,y; x =5+6; y =x *10; //Comment Example letx =5; // I will be executed // x = 6; I will NOT be executed //String Variables letlastname,lastName; lastName="Doe"; lastname="Peterson"; Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 22

JavaScript Data Types /////JavaScript Data Types letlength =16; letlastName="Johnson"; letx ={firstName:"John",lastName:"Doe"}; // Object // Number // String //Value & Type letcar; // Value is undefined, type is undefined car =undefined; // Value is undefined, type is undefined //////The typeofoperator typeof"" typeof"John" typeof0 typeof314 typeof3.14 // Returns "string" // Returns "string" // Returns "number" // Returns "number" // Returns "number" Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 23

JavaScript Objects You have already learned that JavaScript variables are containers for data values. This code assigns a simple value (Fiat) to a variable named car: letcar ="Fiat"; This code assigns many values (Fiat, 500, white) to a variable named car: constcar ={type:"Fiat",model:"500",color:"white"}; Object Definition You define (and create) a JavaScript object with an object literal: Example: constperson ={firstName:"John",lastName:"Doe",age:50, eyeColor:"blue"}; Spaces and line breaks are not important. An object definition can span multiple lines: <script> constperson ={// Create an object: firstName:"John", lastName:"Doe", age:50, eyeColor:"blue" }; // Display some data from the object: document.getElementById("demo").innerHTML= person.firstName+" is "+person.age+" years old."; </script> Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 24

JavaScript Functions A JavaScript function is a block of code designed to perform a particular task. A JavaScript function is executed when "something" invokes it (calls it). JavaScript Function Syntax A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...) Inside the function, the arguments (the parameters) behave as local variables. Accessing a function without () will return the function definition instead of the function result: When JavaScript reaches a return statement, the function will stop executing. // The function returns the product of p1 and p2 functionmyFunction(p1,p2){ returnp1 *p2; } // Function is called, return value will end up in x letx =myFunction(4,3); functionmyFunction(a,b){ returna *b; } // The function converts from fahrenheit to Celsius functiontoCelsius(fahrenheit){ return(5/9)*(fahrenheit-32); document.getElementById("demo").innerHTML=toCelsius(77); } Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 25

JavaScript Arrays Creating an Array const array_name = [item1, item2, ...]; Example const cars = ["Saab", "Volvo", "BMW"]; Accessing Array Elements const cars = ["Saab", "Volvo", "BMW"]; let car = cars[0]; Changing an Array Element const cars = ["Saab", "Volvo", "BMW"]; cars[0] = "Opel"; Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 26

JavaScript Comparison and Logical Operators Comparison and Logical operators are used to test for true or false. Comparison operators are used in logical statements to determine equality or difference between variables or values. if (mark < 50) text = Fail"; let voteable = (age < 18) ? "Too young":"Old enough"; Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 27

Logical Operators - Example (Votable) <html> <body> <h2>JavaScript Comparison</h2> <p>Input your age and click the button:</p> <inputid="age"value="18"/> <buttononclick="myFunction()">Try it</button> <pid="demo"></p> <script> functionmyFunction(){ letage =document.getElementById("age").value; letvoteable =(age <18)?"Too young":"Oldenough"; document.getElementById("demo").innerHTML=voteable +" to vote.";} </script> </body> </html> Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 28

if (age < 18) text = "Too young to buy alcohol"; let x = 5; Operator Description Comparing Returns Try it Try it == equal to x == 8 false Try it x == 5 true Try it x == "5" true Try it === equal value and equal type x === 5 true Try it x === "5" false Try it != not equal x != 8 true Try it !== not equal value or not equal type x !== 5 false Try it x !== "5" true Try it x !== 8 true Try it > greater than x > 8 false Try it < less than x < 8 true Try it >= greater than or equal to x >= 8 false Try it <= less than or equal to x <= 8 true Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 29

JavaScript if else & else if The if Statement Syntax if (condition) { // block of code to be executed if the condition is true } Example if (hour < 18) { greeting = "Good day"; } The else Statement Syntax if (condition) { // block of code to be executed if the condition is true } else { // block of code to be executed if the condition is false } Example if (hour < 18) { greeting = "Good day"; } else { greeting = "Good evening"; } Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 30

If Else Example <!DOCTYPE html> <html> <body> <h2>JavaScript if .. else</h2> <p>A time-based greeting:</p> <pid="demo"></p> <script> consthour =newDate().getHours(); letgreeting; if(hour <18){ greeting ="Good Morning";} else{ greeting ="Good evening";} document.getElementById("demo").innerHTML=greeting; </script> </body> </html> Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 31

JavaScript While Loop The while loop loops through a block of code as long as a specified condition is true. Syntax while (condition) { // code block to be executed } Example while (i < 10) { text += "The number is " + i; i++; } Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 32

While Loop Example <!DOCTYPE html> <html> <body> <h2>JavaScript While Loop</h2> <pid="demo"></p> <script> lettext =""; leti=0; while(i<10){ text +="<br>The number is "+i; i++;} document.getElementById("demo").innerHTML=text; </script> </body> </html> Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 33

Primality Test Example <html> <body> <h2>Prime Test Page</h2> <h1id="demo1"></h1> <h1id="demo2"></h1> <script> varnumber =window.prompt("Enter your number: "); alert("Your number is "+number); document.getElementById("demo1").innerHTM L='Is '+number +' Prime?'; functionisPrime(number){ letnum =number; if(num <=3)returnnum >1; if((num %2===0)||(num %3===0))returnfalse; letcount =5; while(Math.pow(count,2)<=num){ if(num %count ===0||num %(count +2)===0)returnfalse; sa=count; count +=6; } returntrue;} document.getElementById("demo2").innerHTML='Answer is '+isPrime(number); </script> </body> </html> Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 34