Scribd Logo
Upload

Welcome to Scribd!

  • S09 MSWD Class

    Uploaded by

    Surya Kiran Jonnalagadda
    15 views4 pages
    The document provides examples of different JavaScript concepts including: 1) Creating class and function components in React, including importing and rendering components in parent and child relationships. 2) Defining anonymous functions without a name in JavaScript and using them immediately or assigning them to variables. 3) Demonstrating arrow functions in JavaScript and how they provide a concise syntax as an alternative to writing function expressions. 4) Examples of object-oriented programming concepts in JavaScript including declaring classes, creating object literals, using constructor functions, and looping through object properties.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document provides examples of different JavaScript concepts including: 1) Creating class and function components in React, including importing and rendering components in parent and child relationships. 2) Defining anonymous functions without a name in JavaScript and using them immediately or assigning them to variables. 3) Demonstrating arrow functions in JavaScript and how they provide a concise syntax as an alternative to writing function expressions. 4) Examples of object-oriented programming concepts in JavaScript including declaring classes, creating object literals, using constructor functions, and looping through object properties.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    15 views4 pages

    S09 MSWD Class

    Uploaded by

    Surya Kiran Jonnalagadda
    The document provides examples of different JavaScript concepts including: 1) Creating class and function components in React, including importing and rendering components in parent and child relationships. 2) Defining anonymous functions without a name in JavaScript and using them immediately or assigning them to variables. 3) Demonstrating arrow functions in JavaScript and how they provide a concise syntax as an alternative to writing function expressions. 4) Examples of object-oriented programming concepts in JavaScript including declaring classes, creating object literals, using constructor functions, and looping through object properties.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 4

    -- Program (CC Example)

    create CC.js in src folder

    import React, {Component} from 'react'


    class CC extends React.Component
    {
    render()
    {
    return <h1>Class Component Demo</h1>
    }
    }
    export default CC;

    Go to App.js and add below line

    import CC from './CC'

    import logo from './logo.svg';


    import './App.css';
    import CC from './CC'
    function App() {
    return (
    <div className="App">
    <h3>Hello React JS</h3>
    <CC/>
    </div>
    );
    }

    export default App;

    -- Program (FC Example)

    create FC.js in src folder

    import React from 'react'

    function FC()
    {
    return <h1>Function Component Demo</h1>
    }

    export default FC;

    >> Parent and Child Component

    import React from 'react'


    import Child from './Child';
    function Parent()
    {
    return <div>
    <h1>Parent Component Demo</h1>
    <Child/>
    </div>
    }

    import React from 'react'


    function Child()
    {
    return <h1>Child Component Demo</h1>
    }

    export default Child;

    export default Parent;

    >>JavaScript anonymous function

    In JavaScript, an anonymous function is that type of function that has no name or


    we can say which is without any name.
    When we create an anonymous function, it is declared without any identifier.

    -- Program

    let show = function () {


    console.log('Anonymous function');
    };
    show();

    -- Program

    <html>
    <head>
    <title>JavaScript named and anonymous function example</title>
    </head>
    <body>
    <script>
    // Named function
    function nameShowMessage() {
    let x;
    x = 'JavaScript by Shagufta!'
    console.log(x);
    return x;
    }
    // Anonymous function
    const anonyShowMessage = function () {
    let y;
    y = 'JavaScript by Shagufta!'
    console.log(y);
    return y;
    }
    nameShowMessage();// Named function
    anonyShowMessage();// Anonymous function
    </script>
    </body>
    </html>

    >> Arrow functions are a new way to write anonymous function expressions in
    JavaScript

    -- Program (Parameterless Arrow Function)

    let message = () => console.log("Happy Type Scripting")


    let message = () : void => console.log("Happy Type Scripting")
    message()

    let sayHi = () => alert("Hello!");


    sayHi();

    -- Program

    let sum = (x : number , y : number) : number => {


    return x+y
    }
    console.log(sum(1,2))

    -- Program

    let sum = (a, b) => a + b;

    /* This arrow function is a shorter form of:

    let sum = function(a, b) {


    return a + b;
    };
    */

    alert( sum(1, 2) ); // 3

    -- Program

    let age = prompt("What is your age?", 18);


    let welcome = (age < 18) ?
    () => alert('Hello') :
    () => alert("Greetings!");
    welcome();

    >>JS OOPS

    Simple example of declaring the class.

    <script>
    //Declaring class
    class Employee
    {
    //Initializing an object
    constructor(id,name)
    {
    this.id=id;
    this.name=name;
    }
    //Declaring method
    detail()
    {
    document.writeln(this.id+" "+this.name+"<br>")
    }
    }
    //passing object to a variable
    var e1=new Employee(101,"Martin Roy");
    var e2=new Employee(102,"Duke William");
    e1.detail(); //calling method
    e2.detail();
    </script>

    JavaScript Object by object literal (a literal is a notation for representing a


    fixed value in source code)
    <script>
    emp={id:102,name:"Shyam Kumar",salary:40000}
    document.write(emp.id+" "+emp.name+" "+emp.salary);
    </script>

    <html>
    <head>
    <script type="text/javascript">
    var employee={first:"John", last:"Doe", department:"Accounts"};
    var details = "";
    document.write("<b>Using for/in loops </b><br />");
    for (var x in employee)
    {
    details = x + ": " + employee[x];
    document.write(details + "<br />");
    }
    </script>
    </head>
    <body>
    </body>
    </html>

    By creating instance of Object

    var objectname=new Object();

    <script>
    var emp=new Object();
    emp.id=101;
    emp.name="Ravi Malik";
    emp.salary=50000;
    document.write(emp.id+" "+emp.name+" "+emp.salary);
    </script>

    By using an Object constructor

    <script>
    function emp(id,name,salary){
    this.id=id;
    this.name=name;
    this.salary=salary;
    }
    e=new emp(103,"Vimal Jaiswal",30000);

    document.write(e.id+" "+e.name+" "+e.salary);


    </script>

    You might also like