Tag: indentation

Structure of a basic C Program

Lets write our first C program – the typical “Hello World!” program.

In this video tutorial lets learn the structure of a basic C program:
1. Preprocessors – include directive.
2. Main method/function.
3. printf method/function.
4. Semicolon syntax.
5. Indentation for readability of code.

Source Code: A Simple C Program

view plaincopy to clipboardprint?
  1. #include<stdio.h>  
  2.   
  3. int main()  
  4. {  
  5.     printf("Microsoft\n Apple\n Oracle\n Google\n Yahoo\n");  
  6.     return 0;  
  7. }  

Output:
Microsoft
Apple
Oracle
Google
Yahoo

Structure of a basic C Program



YouTube Link: https://www.youtube.com/watch?v=3Yu6u3tmBS4 [Watch the Video In Full Screen.]


Preprocessor statement

The “include” directive which we see in the first line is a preprocessor directive. Here we are including a standard library file which has some set of useful functions in it, which we are using in our “Hello World” C Program.

stdio stands for “Standard Input Output”. As the name suggests this library file has functions to read and write data to console window, along with other many useful functions. For example, printf() is a function present in stdio.h library file. We simply use it in our program to print data on to the console window. We need not know the implementation details of printf method/function.

main() method

Main method or function is part of all ‘C’ programs. It’s entry point of any C program execution. Function is a way of grouping some code together. We can write any logic/statements inside a function.

It’s a standard that main always returns a integer value. Thus main is preceded by a keyword called int, which means integer. It’s a keyword or reserve word. We’ll know more about keywords(or reserve words) in a separate video tutorial. Since main method needs to return a integer value, we explicitly return 0 at the end.

Readability of code

It’s very important that we write code which is readable. It helps in maintaining the code. Large programs get too clumsy very easily and reading and understanding code often becomes difficult. So we need to indent the code and make sure its readable as far as possible.

Note:
Main method/function doesn’t take any argument.

Basics of Jade – Template Engine: Node.js

Lets learn some of the basics of Jade Template Engine. Jade is the default template engine for Express Web Framework of Node.js Also note that, Jade and Express are open source product of the same company, so go very well with each other!

jade-template-engine-nodejs-express-web-framework

Using template engine might seem pointless in the beginning, but if you’re building a large-scale application, it’s a handy tool and you’ll feel good about your decision to use one for your project.

Make sure you’ve installed Express Web framework and Jade module locally for your application. You can find the procedure at Express Web Framework: Node.js

Configuration Section
app.js

1

app.set('view engine', 'jade');

This would let your application know that you’ll be using Jade as Template Engine. This way, you need not mention the Template Engines file extension each time.

Jade File: Indentation
index.jade

1
2
3
4

html
 head
  title Technotip
 body

Would output

1
2
3
4
5

<html>
 <head><title>Technotip</title></head>
 <body>
 </body>
</html>

Indentations in Jade decide which element(s) is/are a child off which element.

Jade File: Variable
index.jade

1
2

 - var name = "Love For Design"
 p= name

and

Jade File: String. Minus sign significance
index.jade

1
2

 - var name = "Love For Design"
 p #{name}

Out put Love For Design on the browser, inside a paragraph tag.

Jade File: Code Interpretation – REPL
index.jade

1

 p #{ 1 + 5 }

This outputs 6 on to the browser inside a paragraph tag.

Jade File: String Length Management
index.jade

1
2
3
4
5
6
7

 p
  | My Name is Satish
  | I Love web development
  | I love helping people
  | by teaching them whatever I know
  | I believe, this is a good cause of 
  | spreading knowledge.

This would treat the entire string as a single line text, and out put looks like:
My Name is Satish I Love web development I love helping people by teaching them whatever I know I believe, this is a good cause of spreading knowledge.

Jade File: Id’s and Classes
index.jade

1
2

div#wrapper
  p.highlight I Love Node.js

This would apply the id wrapper to div and highlight class to p tag.

Jade File: Multiple id and class
index.jade

1
2

div#wrapper.content.highlight
  p I Love Node.js

We could even assign multiple id’s and classes to a html element.

Jade File: Anchor Tag
index.jade

1

a(href="/about", rel="nofollow") Satish

This would wrap the word Satish with anchor tag and nofollow attribute.

Jade File: Anchor Tag and Image Tag
index.jade

1
2

a(href="/about", rel="nofollow") Satish
img(src="1.gif", alt="Child Eating KitKat")

This would output Satish with anchor tag and nofollow attribute. Also an image with alt attribute attached to it. Both these tags are siblings.

Jade File: Hyperlink the Image file – Hypermedia
index.jade

1
2

a(href="/about", rel="nofollow")
 img(src="1.gif", alt="Child Eating KitKat")

Indent img tag inside anchor tag and the image gets linked to by the anchor tag.

Jade File: Writing Function inside Jade file
index.jade

1
2

- var fn = function() { return "android KitKat"}
p #{fn()}

This outputs android KitKat to the browser.

Jade File: Accessing elements of Object
index.jade

1
2
3
4

- obj = { name: "Apple", product: "iPhone"}
ul
  li #{obj.name}
  li #{obj.product}

This would output

  • Apple
  • iPhone

Jade File: Accessing elements of an array
index.jade

1
2
3
4

- obj = [ "Nexus 5", "iPhone 5S"]
ul
  li #{obj[0]}
  li #{obj[1]}

This would output

  • Nexus 5
  • iPhone 5S

Jade File: Including another jade file
index.jade

1
2

p
 include show

This would include the contents of show.jade file inside index.jade file.

Basics of Jade – Template Engine: Node.js



YouTube Link: https://www.youtube.com/watch?v=xNoWTLsZbaU [Watch the Video In Full Screen.]



Note:
– sign tells jade that the code that follows should be executed.
= sign tells that the code should be evaluated, escaped and then output.

Stay subscribed: In next video we’ll show how to use bootstrap + Express + Jade + Node.js
Building a web form. Loops and Conditional statements present in Jade.