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:
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
Post a Comment