aspNetCoreMvc6EFCoreAngularJavaScript

JavaScript

• The client side language for web apps
• object oriented
• prototypical inheritance instead of classes
• dynamically typed
• just in time compiled without an intermediate format, like MSIL or Bytecode
• older browsers have an interpreter instead of JIT
• place scripts before the end of the body tag, executes as html is parsed

events / anonymous function / callback

var main = document.getElementById("main");
main.onmouseenter = function () { main.style.backgroundcolor = "#ddd"; };
main.onmouseleave = function () { main.style.backgroundcolor = ""; main.style = "background: #eee"; };

global scope, as files are loaded they may overwrite variables, avoid name collisions. Either use very specific names, or use function private scope. The function name though may be leaking other function names, immediately executing nameless function. (function(){})();

Bower is for js what NuGet is for cs, client side package management. Add Bower configuration file, dependencies download to a lib folder in wwroot. .bowerrc is the config options for bower. JQuery handles the cross-browser compatibility issues.

<script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>

$('#username').text("was innerHtml or InnerHTML");
$(#main).on("mouseenter", function() {main.style = ""} );
var menuItems = $("ul.menu li a");
menuItems.on("click", function(){ alert($(this).text()); });

div, sidebar toggle visibility button, wrapped set of DOM elements

var hscn = "hide-sidebar";
$("#sidebar-toggle").on("click", function () {
    var sw = $("#sidebar,#wrapper");        
    sw.toggleClass(hscn);
    if (sw.hasClass(hscn)) {
        $(this).text("show sidebar");
    } else {
        $(this).text("hide sidebar");            
    }
});

on the css side #sidebar.hide-sidebar {left: -250px;} downside is tracking const values, and #wrapper.hide-sidebar {margin-left: 0;}. Can add a transition: left ease .25s; and transition: margin-left ease .25s;. Also add vendor specifics.

Building a Web App with ASP.NET Core, MVC 6, EF Core, and Angular