How to write Pure java script Program?

Create  the Below  folder structure

app.js:
====

function submit() {

    var name = document.getElementById("txtName").value;
    var code = document.getElementById("txtCode").value;
    console.log(name + code);
}

function turnOffLight() {
    var a, b, c;
    a = 10;
    b = 12;
    document.getElementById("tagDisplay").innerHTML = a + b;
}

function turnOnLight() {

    /*Comment Implementation
      document.getElementById("tagInnerHtmlBasicTag").innerHTML = 'Sreenivas';
    */


    var x, y;

    x = y;
    x += y;//x=x+y;
    x -= y;//x=x-y;
    x *= y;//x=x*y;
    x /= y;//x=x/y;

    x = 10;
    y = 10;
    console.log(x | y);
    console.log(x ** y);
    console.log(x ^ y);
    console.log(x >>> y);

    //document.getElementById("tagInnerHtmlBasicTag").innerHTML = 'Sreenivas';  -- Comment implementation
    document.getElementById("tagInnerHtmlBasicTag").innerHTML = 'Sreenivas';
}


function Details(x, y) {
    return x + y;
}


Index.html:
========

<!DOCTYPE html>
<html>
<title>BasicJavascriptApp</title>

<head> </head>

<body>
    <h1>My basic javascript Application</h1>

    <input type="text" id="txtName" onclick="turnOnLight()" />
    <input type="text" id="txtCode" onkeypress="turnOffLight()" />

    <span id="spnName"></span>
    <p id="tagDisplay"></p>
    <p id="tagInnerHtmlBasicTag"></p>
    <span id="spnName"></sapn>

    <button id="btnSubmit" onclick="submit()">Submit</button>
    <input type="submit" onclick="stringManupulations()" name="String Manupulations"  value="String Manupulations"></input>
    <button onclick="btnOnclick()"> Click   </button>
    <button id="btnStringMethods" onclick=" stringMethods()" > String Methods</button>    
 
    <button id="btnDateFormats" onclick="dateFormats()" >Date Formats</button>
    <button id="btnDateMethods" onclick="dateMethods()" >Date Methods</button>

    <button id="btnArray" onclick="basicArray()" >Array</button>
    <button id="btnArray" onclick="arrayMethods()" >Array Methods</button>


    <div>
        <input type="text" onmousedown="eventMethos('onmousedown')" ></input>
        <input type="checkbox" onchange="eventMethos('onchange')"></input>
        <input type="text" onblur="eventMethos('onblur')" ></input>
        <input type="text" onclick="eventMethos('onclick')" ></input>
        <input type="button"  ondblclick="eventMethos('ondblclick')" value="submit" ></input>
        <input type="text" onmouseup="eventMethos('onmouseup')" ></input>
        <input type="text" onkeypress="eventMethos('onkeypress')" ></input>
        <input type="text" onkeydown="eventMethos('onkeydown')" ></input>
        <input type="text" onmouseover="eventMethos('onmouseover')" ></input>
    </div>

    <div>
         <button type="submit" onclick="mathMethos()" > Math Methods</button>    
    </div>

    <script src="app.js"></script>
    <script src="basic.js"></script>
    <script src="stringanddate.js"></script>
    <script src="arrayandobjects.js"></script>
    <script src="events.js"></script>
    <script src="math.js"></script>

        <script>

            myCommonFunction();
            stringManupulations();
            /*Comment Implementation
            document.getElementById("tagInnerHtmlBasicTag").innerHTML = 'Sreenivas';
            */

            var m;
            var m = null;
            var m = 9;
            var m = { obj: null };

            var x, y;

            x = y;
            x += y;//x=x+y;
            x -= y;//x=x-y;
            x *= y;//x=x*y;
            x /= y;//x=x/y;

            x = 10;
            y = 10;
            console.log(x | y);
            console.log(x ** y);
            console.log(x ^ y);
            console.log(x >>> y);
            console.log(Details(x, y));
            //document.getElementById("tagInnerHtmlBasicTag").innerHTML = 'Sreenivas';  -- Comment implementation
            document.getElementById("tagInnerHtmlBasicTag").innerHTML = 'Sreenivas';
        </script>
        <script>
            document.getElementById("tagInnerHtmlBasicTag").innerHTML = "Sreenivas";
        </script>
 







 
</body>

</html>



    <!-- <button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
    <img id="myImage" src="pic_bulboff.gif" style="width:100px">
    <button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button> -->




gulpfile.js
==========


var gulp = require('gulp');
// var webserver = require('gulp-webserver');
// var gulpInject = require('gulp-inject');
// var uglify = require("gulp-uglify");
// var concat = require("gulp-concat");
// var cssmin = require("gulp-cssmin");
// var htmlReplace = require("gulp-html-replace");
// //var fileSources = require('./sources.json');
// var imagemin = require("gulp-imagemin");
// var minifyHTML = require('gulp-minify-html');
var connect = require('gulp-connect');
//var templateCache = require('gulp-angular-templatecache');

gulp.task('connect', function () {
    connect.server({
        root: 'app/',
        port: '8001'
    })
})
// gulp.task('run', function () {
//     gulp.src('app')
//         .pipe(webserver({
//             livereload: false,
//             directoryListing: false,
//             open: true,
//             fallback: 'index.html'
//         }));
// });

// gulp.task('copy_html', function () {
//     return gulp.src("app/**/*.html")
//         .pipe(gulp.dest("build/app/"));
// });
// gulp.task("vendor_libs", function () {
//     return gulp.src(fileSources.vendorlibs)
//         .pipe(uglify())
//         .pipe(concat('libs.min.js'))
//         .pipe(gulp.dest("build/app/scripts/"))
// });
// gulp.task("app_libs", function () {
//     return gulp.src(fileSources.app_libs)
//         .pipe(uglify())
//         .pipe(concat('app_libs.min.js'))
//         .pipe(gulp.dest("build/app/scripts/"));
// });

// gulp.task("vendor_css", function () {
//     return gulp.src(fileSources.vendor_css)
//         .pipe(cssmin())
//         .pipe(concat("libs.min.css"))
//         .pipe(gulp.dest("build/app/css/"));
// });
// gulp.task("custom_css", function () {
//     return gulp.src(fileSources.custom_css)
//         .pipe(cssmin())
//         .pipe(concat("custom.min.css"))
//         .pipe(gulp.dest("build/app/css/"));
// });
// gulp.task('html_replace', function () {
//     gulp.src('build/app/index.html')
//         .pipe(htmlReplace({
//             'css': ["css/libs.min.css", "css/custom.min.css"],
//             'js': ["scripts/libs.min.js", "scripts/app_libs.min.js", "scripts/templates.js"]
//         }))
//         .pipe(gulp.dest('build/app/'));
// });
// gulp.task("image-min", function () {
//     return gulp.src("app/assests/images/*")
//         .pipe(imagemin())
//         .pipe(gulp.dest("build/app/assets/images/"));
// });
// gulp.task('templates', function () {
//     gulp.src([
//         'app/**/**/*.html',
//         '!./bower_components/**'
//     ])
//         .pipe(minifyHTML({
//             quotes: true
//         }))
//         .pipe(templates('templates.js'))
//         .pipe(gulp.dest('build/app/scripts/'));
// });
// gulp.task("build", ['copy_html', 'vendor_libs', 'app_libs', 'custom_css', 'vendor_css', 'image-min']);






Package.json:
=========
{
  "name": "basicjavascript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Sreenivas",
  "license": "ISC",
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-connect": "^5.0.0"
  }

}



Result will be:





Comments

Popular posts from this blog

Reverse Sentence using c#