1.简介

概念： 一门客户端脚本语言

　　运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
　　脚本语言：不需要编译，直接就可以被浏览器解析执行了

功能：
　　可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

JavaScript发展史：
　　1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C-- ，后来更名为：ScriptEase
　　2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
　　3. 1996年，微软抄袭JavaScript开发出JScript语言
　　4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

2.基本语法

2.1与HTML结合方式

1.内部js

　　定义<script>,标签体内容就是js代码

2.外部js

　　定义<script>,通过src属性引入外部的js文件

注意：

　　1.<script>可以定义在HTML页面的任何地方，但是定义的位置会影响执行顺序。

　　2.<script>可以定义多个。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!--内部JS-->
  7.     <script>
  8.         alert("hello world"); //定义在head中，先加载script，再加载input标签；
  9.  
  10.     </script>
  11.     <!--外部js-->
  12.     <script src="js/a.js"></script>
  13.  
  14. </head>
  15. <body>
  16.     <input type="text">
  17.     <!--<script>
  18.         alert("hello world"); //定义在body中，先加载input，再加载script标签；
  19.  
  20.     </script>-->
  21. </body>
  22. </html>

a.js

  1. alert("我是外部的js文件")

2.2注释

1. 单行注释：//注释内容
2. 多行注释：/*注释内容*/

2.3数据类型

1. 原始数据类型(基本数据类型)

　　1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
　　2. string：字符串。 字符串 "abc" "a" 'abc'
　　3. boolean: true和false
　　4. null：一个对象为空的占位符
　　5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

2. 引用数据类型：对象

2.4变量

变量：一小块存储数据的内存空间
Java语言是强类型语言，而JavaScript是弱类型语言。
　　强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据(java/c)
　　弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。（python）
语法：
var 变量名 = 初始化值;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>变量</title>
  6.  
  7.     <script>
  8.         /* //定义变量
  9.          var a = 3;
  10.          alert(a);
  11.          a = "abc";
  12.          alert(a);*/
  13.  
  14.         // 1.定义number类型
  15.         var num = 1;
  16.         var num2 = 1.1;
  17.         var num3 = NaN;
  18.  
  19.         document.write(num + "<br>");
  20.         document.write(num2 + "<br>");
  21.         document.write(num3 + "<br>");
  22.  
  23.         //2.定义string类型
  24.         var str = "abc";
  25.         var str2 = 'a';
  26.         document.write(str + "<br>");
  27.         document.write(str2 + "<br>");
  28.  
  29.         //3.定义boolean
  30.         var flag = true;
  31.         document.write(flag + "<br>");
  32.  
  33.         //4.定义null和undefined
  34.         var obj = null;
  35.         var obj2 = undefined;
  36.         var obj3;
  37.         document.write(obj + "<br>");
  38.         document.write(obj2 + "<br>");
  39.         document.write(obj3 + "<br>");
  40.  
  41.     </script>
  42. </head>
  43. <body>
  44.  
  45. </body>
  46. </html>

typeof运算符：获取变量的类型。
注：null运算后得到的是object

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>变量</title>
  6.  
  7.     <script>
  8.         /* //定义变量
  9.          var a = 3;
  10.          alert(a);
  11.          a = "abc";
  12.          alert(a);*/
  13.  
  14.         // 1.定义number类型
  15.         var num = 1;
  16.         var num2 = 1.1;
  17.         var num3 = NaN;
  18.  
  19.         document.write(num + "----" + typeof (num) + "<br>");
  20.         document.write(num2 + "----" + typeof (num2) + "<br>");
  21.         document.write(num3 + "----" + typeof (num3) + "<br>");
  22.  
  23.         //2.定义string类型
  24.         var str = "abc";
  25.         var str2 = 'a';
  26.         document.write(str + "----" + typeof (str) + "<br>");
  27.         document.write(str2 + "----" + typeof (str2) + "<br>");
  28.  
  29.         //3.定义boolean
  30.         var flag = true;
  31.         document.write(flag + "----" + typeof (flag) + "<br>");
  32.  
  33.         //4.定义null和undefined
  34.         var obj = null;
  35.         var obj2 = undefined;
  36.         var obj3;
  37.         document.write(obj + "----" + typeof (obj) + "<br>");
  38.         document.write(obj2 + "----" + typeof (obj2) + "<br>");
  39.         document.write(obj3 + "----" + typeof (obj3) + "<br>");
  40.  
  41.     </script>
  42. </head>
  43. <body>
  44.  
  45. </body>
  46. </html>

2.5运算符

1. 一元运算符：只有一个运算数的运算符
　　++，-- ， +(正号)

　　+(-)：正负号
　　注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
　　　　* 其他类型转number：
　　　　* string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
　　　　* boolean转number：true转为1，false转为0

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script>
  7.         var b = "123";
  8.         document.writeln(typeof (b+1)+"<br>");
  9.         document.writeln(b+1+"<br>");
  10.  
  11.         var c = +"123";
  12.         document.writeln(typeof (c+1)+"<br>");
  13.         document.writeln(c+1+"<br>");
  14.  
  15.         var d = +"abc";
  16.         document.writeln(typeof (d+1)+"<br>");
  17.         document.writeln(d+1+"<br>");
  18.     </script>
  19. </head>
  20. <body>
  21.  
  22. </body>
  23. </html>

2. 算数运算符
　　+ - * / % ...

3. 赋值运算符
　　= += -+....

4. 比较运算符
　　> < >= <= == ===(全等于)

5. 逻辑运算符
　　&& || !

6. 三元运算符
　　? : 表达式
　　var a = 3;
　　var b = 4;

　　var c = a > b ? 1:0;
　　语法：
　　表达式? 值1:值2;
　　判断表达式的值，如果是true则取值1，如果是false则取值2；

2.6流程控制语句

1. if...else...
2. switch:
　　在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
　　　　switch(变量):
　　　　case 值:
　　在JS中,switch语句可以接受任意的原始数据类型

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script>
  7.         var a = "abc";
  8.         switch (a) {
  9.             case 1:
  10.                 alert("number");
  11.                 break;
  12.             case "abc":
  13.                 alert("string");
  14.                 break;
  15.             case null:
  16.                 alert(null);
  17.                 break;
  18.         }
  19.     </script>
  20. </head>
  21. <body>
  22.  
  23. </body>
  24. </html>

3. while
4. do...while
5. for

2.7JS特殊语法

1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
2. 变量的定义使用var关键字，也可以不使用
　　用： 定义的变量是局部变量
　　不用：定义的变量是全局变量(不建议)

3.基本对象

3.1 Function：函数(方法)对象

1.创建

　　1. var fun = new Function(形式参数列表,方法体); //忘掉吧
　　2. function 方法名称(形式参数列表){
　　　　　　方法体
　　　　}

　　3. var 方法名 = function(形式参数列表){
　　　　　　方法体
　　　　}

2.方法

3.属性

　　length:代表形参的个数

4.特点

　　1. 方法定义时，形参的类型不用写,返回值类型也不写。
　　2. 方法是一个对象，如果定义名称相同的方法，会覆盖
　　3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
　　4. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数

5.调用

　　方法名称(实际参数列表);

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script>
  7.         //1.创建方式1
  8.         var fun1 = new Function("a", "b", "alert(a);");
  9.         fun1(3, 4);
  10.         alert(fun1.length);
  11.  
  12.         //2.创建方式2
  13.         function fun2(a, b) {
  14.             alert(a + b);
  15.         }
  16.  
  17.         fun2(3, 4);
  18.  
  19.         //3.创建方式3
  20.         var fun3 = function (a, b) {
  21.             alert(a * b);
  22.         }
  23.         fun3(4, 5);
  24.  
  25.         /*
  26.         求任意两个数的和
  27.          */
  28.         function fun4(a, b) {
  29.             return a + b;
  30.         }
  31.  
  32.         var sum = fun4(5, 6);
  33.         alert(sum)
  34.  
  35.         /*
  36.         求任意多个数的和
  37.          */
  38.         function fun5() {
  39.             var sum = 0;
  40.             for (var i = 0; i < arguments.length; i++) {
  41.                 sum += arguments[i];
  42.             }
  43.             return sum;
  44.         }
  45.  
  46.         var sum2 = fun5(1, 2, 3);
  47.         alert(sum2);
  48.     </script>
  49. </head>
  50. <body>
  51.  
  52. </body>
  53. </html>

3.2array对象

1. 创建：
　　1. var arr = new Array(元素列表);
　　2. var arr = new Array(默认长度);
　　3. var arr = [元素列表];
2. 方法
　　join(参数):将数组中的元素按照指定的分隔符拼接为字符串
　　push() 向数组的末尾添加一个或更多元素，并返回新的长度。
3. 属性
　　length:数组的长度
4. 特点：
　　1. JS中，数组元素的类型可变的。
　　2. JS中，数组长度可变的。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script>
  7.  
  8.         //1.创建方式
  9.         var arr1 = new Array(1, 2, 3);
  10.         var arr2 = new Array(3);
  11.         arr2[1] = 8;
  12.         var arr3 = [4, 5, 6];
  13.         document.writeln(arr1 + "</br>");
  14.         document.writeln(arr2 + "</br>");
  15.         document.writeln(arr3 + "</br>");
  16.         document.writeln(arr3.join("***") + "</br>"); //按照指定格式拼接字符串
  17.         arr3.push("abc");
  18.         document.writeln(arr3.join("***") + "</br>"); //按照指定格式拼接字符串
  19.  
  20.     </script>
  21. </head>
  22. <body>
  23.  
  24. </body>
  25. </html>

3.3Date对象

1. 创建：
　　var date = new Date();

2. 方法：
　　toLocaleString()：返回当前date对象对应的时间本地字符串格式
　　getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script>
  7.         var date = new Date();
  8.         document.writeln(date+"<br>");
  9.         document.writeln(date.toLocaleString()+"<br>");
  10.         document.writeln(date.getTime());
  11.     </script>
  12. </head>
  13. <body>
  14.  
  15. </body>
  16. </html>

3.4Math：数学对象

1. 创建：
　　特点：Math对象不用创建，直接使用。 Math.方法名();

2. 方法：
　　random():返回 0 ~ 1 之间的随机数。 含0不含1
　　ceil(x)：对数进行上舍入。
　　floor(x)：对数进行下舍入。
　　round(x)：把数四舍五入为最接近的整数。
3. 属性：
　　PI

3.5正则表达式对象

1. 正则表达式：定义字符串的组成规则。
　　1. 单个字符:[]
　　　　如： [a] [ab] [a-zA-Z0-9_]
　　　　* 特殊符号代表特殊含义的单个字符:
　　　　　　\d:单个数字字符 [0-9]
　　　　　　\w:单个单词字符[a-zA-Z0-9_]
　　2. 量词符号：
　　　　?：表示出现0次或1次
　　　　*：表示出现0次或多次
　　　　+：出现1次或多次
　　　　{m,n}:表示 m<= 数量 <= n
　　　　　　 m如果缺省： {,n}:最多n次
　　　　　　 n如果缺省：{m,} 最少m次
　　3. 开始结束符号
　　　　^:开始
　　　　$:结束
2. 正则对象：
　　1. 创建
　　　　1. var reg = new RegExp("正则表达式");
　　　　2. var reg = /正则表达式/;
　　2. 方法
　　　　1. test(参数):验证指定的字符串是否符合正则定义的规范

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script>
  7.         //1.方式1
  8.         var reg = new RegExp("\\w{6,12}");
  9.         var reg2 = /\w{6,12}/;
  10.         alert(reg.test("zhangsan"));
  11.         alert(reg2.test("zhangsan"));
  12.  
  13.     </script>
  14. </head>
  15. <body>
  16.  
  17. </body>
  18. </html>

3.6Global对象

1. 特点：

　　全局对象，这个Global中封装的方法不需要对象就可以直接调用。 方法名();
2. 方法：
　　encodeURI():url编码
　　decodeURI():url解码

　　encodeURIComponent():url编码,编码的字符更多
　　decodeURIComponent():url解码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script>
  7.         var str = "大学";
  8.         var encode = encodeURI(str);
  9.         document.writeln(encode + "<br>");
  10.         var s = decodeURI(encode);
  11.         document.writeln(s + "<br>");
  12.  
  13.         var encode1 = encodeURIComponent(str);
  14.         document.writeln(encode1 + "<br>");
  15.         var s1 = decodeURIComponent(encode);
  16.         document.writeln(s1 + "<br>");
  17.  
  18.         str1 = "https://www.baidu.com?wd=大学";
  19.         var encode = encodeURI(str1);
  20.         document.writeln(encode + "<br>");
  21.         var s = decodeURI(encode);
  22.         document.writeln(s + "<br>");
  23.  
  24.         var encode1 = encodeURIComponent(str1);
  25.         document.writeln(encode1 + "<br>");
  26.         var s1 = decodeURIComponent(encode);
  27.         document.writeln(s1 + "<br>");
  28.     </script>
  29. </head>
  30. <body>
  31.  
  32. </body>
  33. </html>

　　parseInt():将字符串转为数字
　　　　逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
　　isNaN():判断一个值是否是NaN
　　　　NaN六亲不认，连自己都不认。NaN参与的==比较全部问false

　　eval():讲 JavaScript 字符串，并把它作为脚本代码来执行。
3. URL编码
　　传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1.javascript语法体系

1）EMCA基础语法（统一）

2）BOM编程（不统一）

3）DOM编程（不统一）

1.1 javascript使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>javascript基础</title>
  6.     <script>
  7.         /*
  8.     javascript的使用方法：
  9.         1）内部javacript:
  10.             a)在html页面中使用<script>标签，在<script>标签体中写js内容
  11.             b)弊端：和html代码混杂在一起，不好维护，不好重用
  12.  
  13.         2）外部javascript（推荐使用）
  14.     */
  15.         /*
  16.     常用的函数：
  17.         alert("提示框");
  18.         document.write("向浏览器输出内容");
  19.     */
  20.         // alert("提示框");
  21.         // document.write("输出内容");
  22.     </script>
  23. <!-- 导入外部js文件
  24.     注意： 不能使用<script src="01.j/s"> 空标签方式导入
  25.  -->
  26. <script src="01.js"></script>
  27.  
  28. </head>
  29. <body>
  30.  
  31. </body>
  32. </html>
  1. document.write("输出内容");

1.2 变量和数据类型

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>变量和数据类型</title>
  6.     <script type="text/javascript">
  7.         /*
  8.     1）定义和赋值变量： var 变量名=值;
  9.         注意：
  10.             1）使用var关键词定义变量，var可以省略的，但是不建议省略var
  11.             2) 在js中可以重复定义变量，后面定义的变量会覆盖前面的变量。
  12.             3) js是弱类型语言，使用var来定义任何数据类型
  13.             4）js中变量的类型是由变量的值决定的，所以只定义不赋值的变量，就是一个未赋值变量（undefined），未赋值的变量不能使用
  14.  
  15.         typeof(变量)： 查看变量的数据类型
  16.  
  17.     2)js的数据类型分类：
  18.         a）number： 无论整数还是小数，都是number类型
  19.         b) string:  无论字符还是字符串，都是string类型
  20.         c) boolean
  21.         d) object  对象类型
  22.     */
  23.         a = 10;
  24.         document.write('a的值为：' + a + ' 类型为: ' + typeof(a) + '<br/>');
  25.         b = 3.14;
  26.         document.write('b的值为:' + b + ' 类型为: ' + typeof(b) + '<br/>');
  27.         c = 'hello';
  28.         document.write('c的值为：' + c + ' 类型为: ' + typeof(c) + '<br/>');
  29.         d = true;
  30.         document.write('d的值为：' + d + '<br/>');
  31.         e = new Object();
  32.         document.write('e的值为：' + e+' 类型为: ' + typeof(e) );
  33.     </script>
  34. </head>
  35.  
  36. <body>
  37.  
  38. </body>
  39. </html>

1.3 类型转换函数

string->number(整数) :  parserInt(变量)

string->number(小数):  parserFloat(变量)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>类型转换函数</title>
  6.     <script type="text/javascript">
  7.         /*
  8.     string->整数： parseInt(变量)
  9.     注意：
  10.         1）使用parseInt函数转换时，转换的内容中的第一个是数值类型，就可以继续转换，直到遇到非数组类型为止。
  11.  
  12.     string->小数： parseFloat(变量)
  13.  
  14.     */
  15.         a = "10";
  16.         a = "10a";
  17.         document.write("a的类型是(转换前)：" + typeof(a) + "<br/>");
  18.         //转换
  19.         a = parseInt(a);
  20.         document.write("a的类型是(转换后)：" + typeof(a) + ",值为：" + a + "<br/>");
  21.  
  22.         b = "3.14";
  23.         b = parseFloat(b);
  24.         document.write("b的类型是(转换后)：" + typeof(b) + ",值为：" + b + "<br/>");
  25.  
  26.     </script>
  27. </head>
  28. <body>
  29.  
  30. </body>
  31. </html>

1.4 运算符

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>运算符</title>
  6.     <script type="text/javascript">
  7.         /*
  8.         1)算术运算符： + - * /  %
  9.         2)比较运算符： > <  >=  <= ==
  10.         3)逻辑运算符： &&  ||   !
  11.         4)三目运算符:  表达式 ? true的结果 : false的结果
  12.  
  13.         注意：
  14.             在js中，布尔值可以用true用1来代表，false用0来代表
  15.  
  16.         */
  17.         a = 10;
  18.         b = false;
  19.         document.write("结果为：" + (a / b) + "<br/>");
  20.         document.write("结果为：" + (a + b) + "<br/>");
  21.  
  22.         a = 10;
  23.         b = 20;
  24.         document.write("结果为:" + (a < b) + "<br/>");
  25.  
  26.         a = 1;
  27.         b = true;
  28.         document.write("结果为:" + (a = b) + "<br/>");
  29.  
  30.         document.write("结果为:" + (false && true) + "<br/>");
  31.         document.write("结果为:" + (false || true) + "<br/>");
  32.         document.write("结果为:" + (!true) + "<br/>");
  33.  
  34.         age = 12;
  35.         document.write(age >= 18 ? "成年人" : "未成年人");
  36.     </script>
  37. </head>
  38. <body>
  39.  
  40. </body>
  41. </html>

1.5 流程控制语句

if

swtich

for

while

do-while

for-in

with

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>流程控制语句</title>
  6.     <script type="text/javascript">
  7.         /*
  8.         1，显示"*"为三角型，5行，第1行有1个"*"，第2行有2个"*"……
  9.  
  10.         2，显示乘法口诀。
  11.                 1*1=1
  12.                 1*2=2 2*2=4
  13.                 ....
  14.                 1*9=9 2*9=18 ...
  15.  
  16.         */
  17.         for (i = 1; i <= 5; i++) { //行数
  18.             for (j = 1; j <= i; j++) { // 控制星星数
  19.                 document.write("*&nbsp;");
  20.             }
  21.             document.write("<br/>");
  22.         }
  23.         document.write("<hr/>");
  24.  
  25.         for (i = 1; i <= 9; i++) {
  26.             for (j = 1; j <= i; j++) {
  27.                 document.write(i + "*" + j + "=" + (i * j) + "&nbsp;");
  28.             }
  29.             document.write("<br/>");
  30.         }
  31.         /*
  32.             for-in语句：
  33.                 for(var 遍历 in  数组|对象){
  34.  
  35.                 }
  36.  
  37.                 作用：
  38.                     1）遍历数组
  39.                     2）对象
  40.                     注意：
  41.                         遍历对象的时候，变量是属性的名称，如果获取属性值，则 p[i];
  42.             */
  43.         //定义数组
  44.         arr = [10, 20, 30, 40];
  45.  
  46.         //遍历数组
  47.         //使用for循环
  48.         for (i = 0; i < arr.length; i++) {
  49.             document.write(arr[i] + ",");
  50.         }
  51.         document.write("<hr/>");
  52.         //使用for-in遍历
  53.         for (i in arr) {
  54.             document.write(arr[i] + ",");
  55.         }
  56.  
  57.         //定义对象
  58.         function Person(name, age) {
  59.             this.name = name;
  60.             this.age = age;
  61.         }
  62.  
  63.         //创建对象
  64.         p = new Person("eric", 20);
  65.  
  66.         //遍历对象
  67.         for (i in p) {
  68.             document.write(p[i] + "<br/>");
  69.         }
  70.  
  71.     </script>
  72. </head>
  73. <body>
  74.  
  75. </body>
  76. </html>

1.6函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>函数</title>
  6.     <script>
  7.         /*
  8.      函数定义：
  9.          function 函数名称(形式参数列表){
  10.              语句
  11.          }
  12.  
  13.      调用函数:
  14.          函数名称(实际参数列表);
  15.  
  16.          注意：
  17.              1）js的函数使用function定义，但是形式参数列表不能使用var关键词
  18.              2）js的函数可以有返回值，直接使用return关键词返回即可，不需要声明返回值类型
  19.              3) js没有方法重载的概念，后面定义的函数会覆盖前面的函数。
  20.              4）js中的形式参数和实际参数的数量可以不一致，依然可以调用。
  21.              5）js的每个函数中都隐藏了一个叫arguments的数组，这个数组用于接收函数调用时传递过来的实际参数值。
  22.              6)arguments数组接收完实际参数后，会逐一的依次从左到右赋值给形式参数,如果实际参数数量大于形式参数，则丢失剩下的实际参数
  23.  
  24.      */
  25.         function add(a, b) {
  26.             result = a + b;
  27.             // document.write('结果为：'+result);
  28.             return result;
  29.         }
  30.  
  31.         s = add(10, 20);
  32.         document.write(s);
  33.     </script>
  34. </head>
  35. <body>
  36.  
  37. </body>
  38. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>函数练习</title>
  6.     <script type="text/javascript">
  7.     /*
  8.     如果大月，显示“该月有31天”
  9.     如果小月,显示“该月有30天”
  10.     如果2月，显示“该月有28天“
  11.     */
  12.     function check(){
  13.         //alert("调用");
  14.         var month = document.getElementById("month").value; //表单输入的内容都是string类型！！
  15.         //alert(typeof(month));
  16.         //alert(month);
  17.  
  18.         //string和number比较，string会自动转换成number类型，再进行比较
  19.         /*
  20.         if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10
  21.             || month==12){
  22.             alert("该月有31天");
  23.         }else if(month==4 || month==6 || month==9 || month==11){
  24.             alert("该月有30天");
  25.         }else if(month==2){
  26.             alert("该月有28天");
  27.         }else{
  28.             alert("地球上没有这个月份");
  29.         }
  30.         */
  31.  
  32.         //强制转换
  33.         month = parseInt(month);
  34.         switch(month){
  35.         case 1:
  36.         case 3:
  37.         case 5:
  38.         case 7:
  39.         case 8:
  40.         case 10:
  41.         case 12:
  42.             alert("该月有31天");
  43.             break;
  44.         case 4:
  45.         case 6:
  46.         case 9:
  47.         case 11:
  48.             alert("该月有30天");
  49.             break;
  50.         case 2:
  51.             alert("该月有28天");
  52.             break;
  53.         default:
  54.             alert("地球上没有这个月份");
  55.         }
  56.  
  57.     }
  58.  
  59. </script>
  60.  
  61. </head>
  62. <body>
  63. 请输入一个月份值：<input type="text" id="month"/><input type="button" value="查询" onclick="check()"/>
  64. </body>
  65. </html>

1.7基于对象编程

string对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>String对象</title>
  6.     <script type="text/javascript">
  7.         //方式一：定义String对象
  8.         str1 = new String("hello");
  9.         str2 = new String("hello");
  10.  
  11.         document.write("结果：" + (str1 == str2) + "<br/>");
  12.         //valueOf（）:该方法返回对象的内容
  13.         document.write("结果：" + (str1.valueOf() == str2.valueOf()) + "<br/>");
  14.  
  15.         //方式二：
  16.         str1 = "hello";
  17.         str2 = "hello";
  18.  
  19.         document.write("结果：" + (str1 == str2) + "<br/>");
  20.         /*
  21.             常用方法：
  22.                 charAt(): 返回指定索引的内容
  23.                 indexOf(): 返回首次出现指定字符的索引位置
  24.                 lastIndexOf(): 返回最后出现指定字符的索引位置
  25.                 fontcolor(): 直接给字符串添加颜色
  26.                 replace(): 替换指定的字符串
  27.                 split(): 使用指定字符串切割字符串，返回字符串数组
  28.                 substring(start,end); 截取字符串，start：开始索引， end:结束索引
  29.                 substr(strat,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度
  30.             */
  31.  
  32.         str = "hellojava";
  33.         document.write(str.charAt(4) + "<br/>");
  34.         document.write(str.indexOf("a") + "<br/>");
  35.         document.write(str.lastIndexOf("a") + "<br/>");
  36.         document.write(str.fontcolor("#0000ff") + "<br/>");
  37.         document.write(str.replace("java", "jxufe") + "<br/>");
  38.         document.write(str.substring(5, 9) + "<br/>");
  39.         document.write(str.substr(5, 4) + "<br/>");
  40.         str = "java-net-php-平面";
  41.         strArray = str.split("-");
  42.         for (i = 0; i < strArray.length; i++) {
  43.             document.write(strArray[i] + ",");
  44.         }
  45.  
  46.     </script>
  47. </head>
  48. <body>
  49.  
  50. </body>
  51. </html>

Number对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>number对象</title>
  6.     <script type="text/javascript">
  7.         //方式一：定义Number对象
  8.          num1 = new Number(20);
  9.          num2 = new Number(20);
  10.         document.write((num1==num2)+"<br/>");
  11.         document.write((num1.valueOf()==num2.valueOf())+"<br/>");
  12.         //方式二：
  13.         var num1 = 20;
  14.         var num2 = 20;
  15.  
  16.         document.write((num1==num2)+"<br/>");
  17.         document.write((num1.valueOf()==num2.valueOf())+"<br/>");
  18.  
  19.         b1 = new Boolean(true);
  20.         b2 = new Boolean(true);
  21.         document.write((b1 == b2) + "<br/>");
  22.         document.write((b1.valueOf() == b2.valueOf())+"<br/>");
  23.  
  24.     </script>
  25. </head>
  26. <body>
  27.  
  28. </body>
  29. </html>

Date对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Date对象</title>
  6.     <script type="text/javascript">
  7.     //创建日期
  8.      date = new Date(); //取当前系统日期时间    java: SimpleDateFormat对象 yyyy-MM-dd 格式化
  9.     //document.write(date);  //默认格式
  10.     //格式： 2015年06月01日 15时12分30秒
  11.     //年份
  12.     document.write(date.getFullYear()+"年");
  13.     //月
  14.     document.write((date.getMonth()+1)+"月");
  15.     //日
  16.     document.write(date.getDate()+"日");
  17.     //星期
  18.     document.write("星期"+date.getDay()+"&nbsp;");
  19.     //时
  20.     document.write(date.getHours()+"时");
  21.     //分
  22.     document.write(date.getMinutes()+"分");
  23.     //秒
  24.     document.write(date.getSeconds()+"秒");
  25.  
  26. </script>
  27. </head>
  28. <body>
  29.  
  30. </body>
  31. </html>

数组对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>数组对象</title>
  6.     <script type="text/javascript">
  7.         /*
  8.     注意：
  9.         1）数组的长度会随着元素的添加而变化，不用担心出现索引位置越界的异常。
  10.         2) js的数组可以存放任意类型的元素。
  11.     */
  12.         //方式一：创建数组
  13.         //1.1 指定数组长度
  14.         // arr = new Array(3);
  15.         // arr[0] = 1;
  16.         // arr[1] = 2;
  17.         // arr[2] = 3;
  18.         // for (i in arr) {
  19.         //     document.write(i + " , ")
  20.         // }
  21.         //1.2 不指定数组长度、默认0个元素
  22.         arr = new Array();
  23.         arr[0] = 6;
  24.         arr[1] = 'hello';
  25.         arr[2] = true;
  26.         let i;
  27.         for (i in arr) {
  28.             if (!arr.hasOwnProperty(i))
  29.                 continue;
  30.             document.write(arr[i] + " , ");
  31.         }
  32.         //1.3 指定具体内容
  33.         arr = new Array(10, "world", false); //arr = [10,"world",false] 更推荐Python的这种写法
  34.         for (i in arr) {
  35.             if (!arr.hasOwnProperty(i))
  36.                 continue;
  37.             document.write(arr[i] + " , ");
  38.         }
  39.         /*
  40.     常用的方法：
  41.         join(字符串): 使用指定的字符串，把数组的所有元素连接在一起，最终组成一个新的字符串
  42.         reverse(): 反转数组中的元素
  43.     */
  44.         document.write("<hr/>");
  45.         arr = ["java", "net", "php", "ios"];
  46.         let str = arr.join("-");
  47.         document.write(str);
  48.         // for (let i = 0; i < arr.length; i++) {
  49.         //     document.write(arr[i] + ",");
  50.         // }
  51.         document.write("<hr/>");
  52.         //反转
  53.         arr = arr.reverse();
  54.  
  55.         for (let i = 0; i < arr.length; i++) {
  56.             document.write(arr[i] + ",");
  57.         }
  58.     </script>
  59. </head>
  60. <body>
  61.  
  62. </body>
  63. </html>

1.8 自定义对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>自定义对象</title>
  6.     <script type="text/javascript">
  7.         /*
  8.         定义对象方式一：有参数的构造函数 （推荐）
  9.             function 对象名称(形式参数){
  10.                 定义属性
  11.                 定义方法
  12.             }
  13.  
  14.         创建对象：
  15.             var 变量 = new 对象名称(实际参数);
  16.         */
  17.         //定义人对象
  18.         function Person(name, age) { //this: 表示当前调用的对象
  19.             //定义属性  赋值
  20.             this.name = name;
  21.             this.age = age;
  22.  
  23.             //定义方法
  24.             this.say = function () {
  25.                 alert("这个对象的方法");
  26.             }
  27.         }
  28.  
  29.         //创建人对象
  30.         let p = new Person("狗娃", 12);
  31.         //查看属性
  32.         document.write(p.name + '</br>');
  33.         document.write(p.age + '</br>');
  34.         // p.say();
  35.         for (let i in p) {
  36.             if (!p.hasOwnProperty(i))
  37.                 continue;
  38.             document.write(p[i] + '</br>');
  39.         }
  40.  
  41.         //定义对象方式二： 无参数的构造函数
  42.         //定义对象
  43.         function Person2() {
  44.         }
  45.  
  46.         //创建对象
  47.         let p2 = new Person2();
  48.         //追加属性
  49.         p2.name = "狗剩";
  50.         p2.age = 14;
  51.         //追加方法
  52.         p2.say = function () {
  53.             alert("狗剩的函数");
  54.         };
  55.         for (let i in p2) {
  56.             if (!p2.hasOwnProperty(i))
  57.                 continue;
  58.             document.write(p2[i] + '</br>');
  59.         }
  60.  
  61.         //定义对象的方式三：使用Object对象。 Object对象可以作为任意对象的模板
  62.  
  63.         //创建对象
  64.         let p3 = new Object();
  65.         //追加属性
  66.         p3.name = "狗蛋";
  67.         p3.age = 16;
  68.         //追加方法
  69.         p3.say = function () {
  70.             alert("狗蛋的函数");
  71.         };
  72.         for (let i in p3) {
  73.             if (!p3.hasOwnProperty(i))
  74.                 continue;
  75.             document.write(p3[i] + '</br>');
  76.         }
  77.         /*
  78.         定义对象方式四：使用字面量的形式创建对象。 json语言（了解）
  79.  
  80.         */
  81.         //创建人对象
  82.         let p4 = {
  83.             //定义属性（属性名：属性值）
  84.             "name": "铁蛋",
  85.             "age": 20,
  86.             //定义方法
  87.             "say": function () {
  88.                 alert("铁蛋的函数");
  89.             }
  90.         };
  91.         for (let i in p4) {
  92.             if (!p4.hasOwnProperty(i))
  93.                 continue;
  94.             document.write(p4[i] + '</br>');
  95.         }
  96.  
  97.     </script>
  98. </head>
  99. <body>
  100.  
  101. </body>
  102. </html>

1.9 原型

给内置对象追加方法，相当于扩展对象的方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>原型</title>
  6.     <!--
  7.     问题： 不使用ArrayUtil工具，但也想实现search和max方法的功能
  8.     预期解决方法： 想把search和max方法设计到Array内置对象中
  9.  
  10.     问题：如何给Array对象扩展两个方法呢？
  11.  
  12.     方案一：拿到Array定义对象的代码，在代码上加
  13.         function Array(){
  14.             this.join = function(){}
  15.             this.reverse = function(){}
  16.             this.saarch = function(){}   追加方法
  17.         }
  18.         拿不到Array对象的源码，行不通
  19.  
  20.      方案二：使用原型属性给Array对象添加方法
  21.          什么是原型？
  22.             1）js的每个对象中都包含有了原型属性（prototype）
  23.             2）如果往某个对象的原型属性添加了方法，那么添加的这个方法就会自动地添加到当前对象的方法中。
  24.             3) 原型的作用：给内置对象追加方法的
  25.  
  26.            function Array(){
  27.                    //属性
  28.                    this.prototype = new Prototype(); //原型对象
  29.  
  30.                    this.search = function(){}
  31.            }
  32.  
  33.            原型对象
  34.            function Prototype(){
  35.                    this.search = function(){}
  36.  
  37.             }
  38.  
  39.  -->
  40.  
  41. <script type="text/javascript">
  42.     /*
  43.         给Array追加一个search和max方法
  44.     */
  45.     Array.prototype.search = function(target){
  46.             //遍历
  47.             for(let i=0;i<this.length;i++){
  48.                 if(this[i]==target){
  49.                     return i;
  50.                 }
  51.             }
  52.             return -1; //找不到就是-1
  53.         };
  54.  
  55.     Array.prototype.max = function(){
  56.             //存储最大值
  57.             let max = this[0];
  58.             for(let i=1;i<this.length;i++){
  59.                 if(this[i]>max){
  60.                     max = this[i];
  61.                 }
  62.             }
  63.             return max;
  64.     };
  65.  
  66.     let arr = [10,43,21,65,3,87];
  67.  
  68.     let index = arr.search(87);
  69.     document.write("位置是："+index+"<br/>");
  70.  
  71.     let max = arr.max();
  72.     document.write("最大值："+max);
  73.  
  74. </script>
  75. </head>
  76. <body>
  77.  
  78. </body>
  79. </html>

03javascript01的更多相关文章

随机推荐

  1. 构造Map并对其排序

    #构造Map并对其排序 attr_tul = ['a','b','c','d','e','f'] one_tul = [,,,,,] one_dic = {} for i in range(len(a ...

  2. Git：目录

    ylbtech-Git:目录 1.返回顶部 1. https://git-scm.com/ 2. 2.返回顶部 1.Easy Git Integration Tools https://marketp ...

  3. centos6.5+jdk1.7+mysql5.6+tomcat8.0部署jpress

    前言:此篇记录在linux下搭建环境部署jpress,mysql使用的是源码安装 1.准备 2.安装 3.部署 1.准备 a.准备centos6.5服务器环境 mysql-5.6.19.tar.gz  ...

  4. 【汇总】Wireshark 过滤规则

    作者:Bay0net 时间:2019-07-01 14:20:09 更新: 介绍:记录使用过的 wireshark 过滤规则 0x01. 使用介绍 抓包采用 wireshark,提取特征时,要对 se ...

  5. 封装一个windows转发端口的脚本

    使用方法: 1.打开文本编辑工具如(Notepad++) 2.新建文件 3.注意:修改文本的编码字符集为:gb2312 4.将下面代码 复制入文件 5.保存文件名为:transmit.bat 6.双击 ...

  6. 【FICO系列】SAP FI模块-记账凭证FB01的BAPI

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FICO系列]SAP FI模块-记账凭证FB0 ...

  7. cocos2dx基础篇(18) 数据存储CCUserDefault

    在cocos2dx中提供了一个数据存储类CCUserDefault,可以作为一个轻量级的数据库来使用.它支持五种数据bool.int.float.double.string的存储. [3.x]     ...

  8. 应用安全 - 平台 | 工具 - Nexus漏洞汇总

    CVE-2019-5475 Date: 类型: RCE 影响范围: Nexus Repository Manager OSS <= Nexus Repository Manager Pro &l ...

  9. css文件引用

    #i1l{ background-color: chartreuse; height: 40px; } #i2l{ background-color: olivedrab; height: 40px; ...

  10. 【Linux开发】IO streaming DMA buffer importing

    http://linuxtv.org/downloads/v4l-dvb-apis/dmabuf.html I/O流 (DMA缓存引用) 这是一个实验性接口,将来可能发生改变 DMABUF框架提供了在 ...