Introduction to js:
JavaScript is a programming language that can make your web page more lively, and it is also the easiest and most convenient language in web page design.
You can easily use JavaScript to create friendly welcome messages, beautiful digital clocks, advertising marquee lanterns and simple elections, and also display the time the browser stays. Let these special effects increase the obsession of the web page.
JavaScript can now do a lot of things on the web page, including web special effects, operating dom, html5 games (based on the combination of html5 and JavaScript), animations and other special effects, and can also pull backstage data (through ajax), which can not only be used as the front desk but also as the backstage.
For example, node.js, etc., and some desktop engines node-webkit can render JavaScript into desktop applications. For example, in unity3d, you can use JavaScript to write games (the syntax, features, etc. of JavaScript used by unity3d)
Features of JavaScript language:
1).JavaScript is mainly used to add interactive behavior to HTML pages.
2).JavaScript is a scripting language with similar syntax to Java.
3).JavaScript is generally used to write client scripts.
4).JavaScript is an interpreted language that explains while executing.
JavaScript knowledge points explanation:
1. Operator
Operators are a series of symbols that complete operations. They have seven categories: assignment operators, arithmetic operators, comparison operators, logical operators, conditional operations, bit operation operators and string operators.
2. Expressions
The combination of operators and operands is called expressions, which are usually divided into four categories: assignment expressions, arithmetic expressions, boolean expressions and string expressions.
3. Sentences
A Javascript program is composed of several statements, and the statement is a directive for writing the program. Javascript provides complete basic programming statements, which are: if~else, assignment statement, switch selection statement, while loop statement, for loop statement, do while loop statement, break loop abort statement and continue loop interrupt statement.
Note: When judging, only these results are false: i.e.
If the logical object has no initial value or its value is 0, -0, null, "", false, undefined, or NaN, then the value of the object is false. Otherwise, its value is true (even when the argument is the string "false")!
4. Function
Functions are named statement segments, which can be referenced and executed as a whole. The following points should be paid attention to when using functions:
1) The function is defined by the keyword function;
2) The function must be defined first and then used, otherwise an error will occur;
3) The function name is the name referenced when calling a function. It is case sensitive and the function name cannot be written incorrectly when calling a function;
4) The parameter represents the value passed to the function for use or operation. It can be a constant or a variable;
5) The return statement is used to return the value of the expression, or it can be left without it.
5. Object
An important function of Javascript is the object-based function. Through object-based programming, program development can be carried out in a more intuitive, modular and reusable way. A set of attributes containing data and methods that operate on data contained in attributes are called objects. For example, if you want to set the background color of the web page, the object you are targeting is document, and the attribute name used is bgcolor, such as document.bgcolor="blue", which means that the background color is blue.
6. Events
The actions generated when a user interacts with a web page are called events. Most of the things are caused by the user's actions, such as: if the user presses the mouse button, the onclick event will be generated, and if the mouse pointer moves on the link, the onmouseover event will be generated, etc. In Javascript, events are often used in conjunction with event handlers.
7. Variables
For example, var myVariable = "some value";
Classic Case:
js lottery
Included knowledge points: the use of timers, the use of document objects methods, the use of js arrays, the use of built-in objects, the use of js system functions, and the registration event.
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> var alldata = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z" var alldataarr = alldata.split(","); var num = alldataarr.length - 1; var timer; function start() { clearInterval(timer);h timer = setInterval('change()', 10); } function change() { document.getElementById("oknum").innerHTML = alldataarr[GetRnd(0, num)]; } function GetRnd(min, max) { return parseInt(Math.random() * (max - min + 1)); } function ok() { clearInterval(timer); document.getElementById("showresult").value = document.getElementById("oknum").innerText; } </script> </head><body> <div id="oknum" name="oknum" >Please click Start</div> <button onclick="start()" accesskey="s">Start</button> <!--///The accesskey attribute specifies the shortcut key to activate (make the element focus) the element. --><button onclick="ok()" accesskey="o">Stop</button> Your choice is: <input type="text" id="showresult" value=""/></body></htmlSwitching background image
Included knowledge points: the use of timers, the use of methods of document objects
<script type="text/javascript"> window.onload = function () { setInterval(step, 1000); } var num = 1; function step() { if (num < 5) { num++; } else { num = 1; } var dom = document.getElementById("imgId"); //Change its images src attribute dom.src = 'images/' + num + '.jpg'; } </script></head><body> <img src="images/1.jpg" id="imgId"/></body></html>Marquee:
Included knowledge points: the use of timers, the use of document objects methods, the use of system functions, the use of mouse events, the use of node operations, loop statements, and judgment statements
<script src="js/jquery-1.8.3.min.js"></script> <script type="text/JavaScript"> ( function ($) { $.fn.extend({ RollTitle: function (opt, callback) { if (!opt) var opt = {}; var _this = this; _this.timer = null; _this.lineH = _this.find("li:first").height(); _this.line = opt.line ? parseInt(opt.line, 15) : parseInt(_this.height() / _this.lineH, 10); _this.speed = opt.speed ? parseInt(opt.speed, 10) : 3000, _this.timespan = opt.timespan ? parseInt(opt.timespan, 13) : 5000; if (_this.line == 0) this.line = 1; _this.upHeight = 0 - _this.line * _this.lineH; _this.scrollUp = function () { _this.animate({ marginTop: _this.upHeight }, _this.speed, function () { for (i = 1; i <= _this.line; i++) { _this.find("li:first").appendTo(_this); } _this.css({ marginTop: 0 }); }); } _this.hover(function () { clearInterval(_this.timer); }, function () { _this.timer = setInterval(function () { _this.scrollUp(); }, _this.timespan); }).mouseout(); } })})(jQuery);</script></head><body> <ul id="RunTopic" style="list-style:none ;background:#0ff ;border:2px dashed blue;width:100px;" ><li style="color:red">i love you</li><li style="color:pink">I LOVE YOU</li><li style="color:blue">I LOVE you</li><li style="color:green">i LOVE YOU</li><li style="color:yellowgreen">I love YOU</li></ul><br/><input type="button" onclick="test();" value="marionette" > <script type="text/javascript"> function test() { $("#RunTopic").find("li:first").appendTo($("#RunTopic")); } </script> </body></html>This is the end of JavaScript's understanding. There will be cases about js in the future. Hope it can help everyone! ! !
The above javascript understanding and classic case analysis are all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.