Last active
December 16, 2021 02:50
-
-
Save IdoBn/6c2c878e05ad5a964d41 to your computer and use it in GitHub Desktop.
javascript lecture
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <script src="http://code.jquery.com/jquery-latest.min.js"></script> | |
| <title>class</title> | |
| </head> | |
| <body> | |
| <h1>Hi Guys!</h1> | |
| <form> | |
| <input type="text" id="username"> | |
| <input type="password" id="password"> | |
| <button id="submit" onclick="check()">submit</button> | |
| </form> | |
| <script type="text/javascript"> | |
| function check() { | |
| var username = document.getElementById('username').value; | |
| var password = document.getElementById('password').value; | |
| if (username == 'admin' && password == 'password') { | |
| alert('hello admin!'); | |
| } else { | |
| alert('you are not my master...'); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <script src="http://code.jquery.com/jquery-latest.min.js"></script> | |
| <title>class</title> | |
| </head> | |
| <body> | |
| <h1>Hi Guys!</h1> | |
| <form id='form1'> | |
| <input type="text" id="username"> | |
| <input type="password" id="password"> | |
| <input type='submit' id="submit"></button> | |
| </form> | |
| <script type="text/javascript"> | |
| $('#form1').submit(function() { | |
| var username = $('#username').val(); | |
| var password = $('#password').val(); | |
| if (username == 'admin' && password == 'password') { | |
| alert('hello admin!'); | |
| } else { | |
| alert('you are not my master!'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <script src="http://code.jquery.com/jquery-latest.min.js"></script> | |
| <title>class</title> | |
| </head> | |
| <body> | |
| <h1>Check out these divs!</h1> | |
| <div id='red'></div> | |
| <div id='green'></div> | |
| <div id='yellow'></div> | |
| <script type="text/javascript"> | |
| var colors = ['red', 'yellow', 'green']; | |
| colors.forEach(function(elem) { | |
| $('#' + elem).hover(function() { | |
| $(this).width(50); | |
| }, function() { | |
| $(this).width(30); | |
| }); | |
| }); | |
| </script> | |
| <style> | |
| #red { | |
| background-color: red; | |
| width: 30px; | |
| height: 30px; | |
| } | |
| #yellow { | |
| background-color: yellow; | |
| width: 30px; | |
| height: 30px; | |
| } | |
| #green { | |
| background-color: green; | |
| width: 30px; | |
| height: 30px; | |
| } | |
| </style> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en" ng-app='ngHello'> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> | |
| <title>class</title> | |
| </head> | |
| <body ng-controller='mainCtrl'> | |
| <h1>{{header}}</h1> | |
| <form> | |
| <input type='text' ng-model="username"> | |
| <input type="password" ng-model="password"> | |
| <button ng-click='click()'>submit</button> | |
| </form> | |
| </body> | |
| <script type="text/javascript"> | |
| angular.module('ngHello', []). | |
| controller('mainCtrl', ['$scope', function($scope){ | |
| $scope.header = 'we can do it in angular?!'; | |
| $scope.click = function() { | |
| if ($scope.username == 'admin' && $scope.password == 'password') { | |
| alert('hello admin!'); | |
| } else { | |
| alert('you are not my master'); | |
| } | |
| }; | |
| }]) | |
| </script> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en" ng-app='ngHello'> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> | |
| <title>class</title> | |
| </head> | |
| <body ng-controller='mainCtrl'> | |
| <h1>{{header}}</h1> | |
| <divo color='red'></divo> | |
| <divo color='yellow'></divo> | |
| <divo color='green'></divo> | |
| </body> | |
| <script type="text/javascript"> | |
| angular.module('ngHello', []). | |
| controller('mainCtrl', ['$scope', function($scope){ | |
| $scope.header = 'we can do it in angular?!'; | |
| }]). | |
| directive('divo', function(){ | |
| return { | |
| scope: { | |
| color: '=' | |
| }, | |
| restrict: 'E', | |
| template: "<div ng-mouseover='width(50)' ng-mouseleave='width(30)' ng-style='style'></div>", | |
| link: function(scope, elem, attrs, controller) { | |
| scope.style = { | |
| 'background-color': attrs.color, | |
| 'width': '30px', | |
| 'height': '30px' | |
| }; | |
| scope.color = attrs.color; | |
| scope.width = function(width) { | |
| scope.style.width = width + 'px'; | |
| }; | |
| } | |
| }; | |
| }) | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment