1. Introduction to javascript
* is an object-based and event-driven language, applied to the client.- Object-based:
** Provides a lot of objects, which can be used directly
- Event-driven:
** html does website static effects, javascript dynamic effects
- client-side: specifically refers to the characteristics of browser
* js
(1) Interaction Sex
- dynamic interaction of information
(2) security
- js cannot access files on the local disk
(3) cross-platform
- cross-platform in java, virtual machine
- as long as the browser that can support js can run * javascript and java The difference (Lei Feng and Lei Feng Pagoda) (1) Java is Sun, now Oracle; js is Netscape (2) JavaScript is object-based, Java is object-oriented (3) Java is a strongly typed language, js is Weakly typed languages - such as int i = "10"; in java; - js: var i = 10; var m = "10"; (4) JavaScript can be executed only by parsing, while java needs to be compiled into bytecode first file, and then execute. * The composition of javascript is composed of three parts (1) ECMAScript
- ECMA : European Computer Association
- The syntax of js developed by the ECMA organization, the statement...
(2) BOM
- broswer object model: browser object model
(3) DOM
- document object model: document object model
Second, the combination of js and html (two)
- use a tag <script type="text/javascript"> js code; </script>
<script type="text/javascript">
alert("hello");
</script>
The second:
- Use the script tag to introduce an external js file
*** Create a js file and write js code
- <script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="1.js"></script>
3. JS primitive types and declared variables
** The basic data type of java: byte short int long float double char boolean** Defining variables all use the keyword var
** js primitive types (five) - string: string *** var str = "abc";
- number: numeric type
*** var m = 123;
- boolean: true and false
*** var flag = true;
- null
*** var date = new Date();
*** get a reference to the object, null means The object reference is empty, and all object references are also object - undefined *** define a variable, no assignment *** var aa;
** typeof(); View the data type of the current variable
Four, js statement
- Statements in java:**if judgment
** switch statement
** loop for while do-while **if judgment statement **** =: indicates assignment **** ==: indicates judgment ** switch statement- java Does it support the data type string support? Supported in jdk1.7 - js supports - switch(a) { case 5: break; case 6: break; default: ...... } ** Loop statement for while do-while - while loop ** ** var i = 5; while(i>1) { alert(i); i--; } - for loop for(var mm=0;mm<=3;mm++) { alert(mm); } ** i++, ++i are the same as in java
Five, js operators
** +=: x+=y; is equivalent to x=x+y; ** js does not distinguish between integers and decimals int i = 123; System.out.println(i/1000*1000); The result obtained in java is 0 in js Does not distinguish between integers and decimals, 123/1000=0.123 * 1000 = 123
<script type="text/javascript"> var i = 123; document.write((i/1000*1000)); <!--The result is 123--> </script>** The operation of adding and subtracting strings
var str = "123";
** If adding, it is a concatenation of strings.
** If subtracting, it is a numerical subtraction operation
* // String operation
var str = "456";
//alert(str+1); //The result of the operation in java is 4561, in js it is still 4561
alert(str-1); //When subtracting, execute Subtraction operation
* Prompt NaN: not a number ** boolean type can also operate *** If set to true, the value is 1 *** If set to false, the value is 0 ** == Difference from === ** Make judgments ** == Compares only values ** === Compares values and types ** A statement that introduces knowledge and outputs directly to the page (the content can be displayed on the page) * document. write("aaa"); document.wirte("<hr/>"); ** can output variables, fixed values and html codes to the page
Six, ninety-nine multiplication table case demonstration
<style>
table,table td{
border:#06F double 1px;
}
</style>
<script type="text/javascript">
document.write("<table>");
for(var x=1;x<=9;x++){
document.write("<tr>");
for(var y=1;y<=x;y++){
document.write("<td>"+x+"*"+y+"="+(x*y)+"</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
七、js的数组
* 什么是数组？
- 使用变量，var m = 10;
- java里面的数组 定义 int[] arr = {1,2,3};
* 定义方式（三种）
第一种： var arr = []; //可以先定义一个空数组，之后在添加元素
var arr = [1,"4",true]; //可以定义数组的时候添加元素，之后也可以继续向后添加元素
第二种：使用内置对象 Array对象var arr1 = new Array(5); //定义一个数组，数组的长度是5
第三种：使用内置对象 Array
var arr2 = new Array(3,4,5); //定义一个数组，数组里面的元素是3 4 5
* There is a property length in the array: you can get the length of the array
* Arrays can store data of different data types
* The length of the array is variable
Eight, js function
** There are three ways to define a function (method) in js
**** In the parameter list of the function, you don't need to write var, just write the parameter name directly
The first way:
**** Use a keyword function
*** * function method name (parameter list) {
method body;
return value optional (according to actual needs);
}
// use the first method to create a function
function test() {
alert("qqqqq");
}
// call the method
test();
The second way:
**** anonymous function
var add = function (parameter list) {
method body and return value;
}
// use anonymous function
var add=function(x,y) {
alert(x+y);
}
// call the method
add(5,8);
The third way: (use less, understand)
*** Dynamic function
*** Use a built-in object Function in js
var add = new Function("parameter list", "method body and return value");
// use dynamic function
var add=new Function("x,y","var sum; sum=x+y; return sum;");
// call the method
var sum=add(3,4);
document.write("sum="+sum);
nitty gritty:
<script type="text/javascript">
function test() {
alert("hello");
}
test();
var i = test;
i();
document.write(i);
</script>
<!--Notes:
test itself is a function name, the function itself is an object in js, and test is a reference to this function object.
var i=test; This code is equivalent to assigning this address to i, at this time i also points to this function object. Can be called by i();.
document.write(i); prints the code definition format of the function
function test() { alert("hello"); }
-->
** js function overloading
** What is overloading?
Is there an overload of js with the same method name and different parameters ? Does not exist
** call the last method
** save the passed parameters in the arguments array ** Is there
any overload in js? (Interview questions)
(1) There is no overloading in js.
(2) But the effect of overloading can be simulated in other ways (through the aruguments array)
<script type="text/javascript">
function add(){
var sum = 0;
for(var i=0;i<arguments.length;i++){
sum+=arguments[i];
}
return sum;
}
document.write(add(1,2)+"<br/>"); //3
document.write(add(1,2,3)+"<br/>"); //6
document.write(add(1,3,2,4)+"<br/>"); //10
document.write(add(1,2,5,4,3)+"<br/>"); //15
</script>
Nine, js global variables and local variables
- used outside the method, used inside the method, used in another script tag
** Local variable : define a variable inside the method, which can only be used inside the method
- if this variable is called outside the method, an error is displayed
Ten, where the script tag is placed
* It is recommended to put the script tag after </body>
* If there is such a requirement now:
in js, you need to get the value in the input, if you put the script tag in the head, there will be problems.
HTML parsing is parsed from top to bottom. The script tag is placed in the head, and the value in the input is directly taken in it.
Because the page has not been parsed to the input line, it must not be obtained.