基本数据类型

js中基本数据类型有number、string、boolean、null、undefined

数值类型：number

js中数值类型只有浮点型，js会自动进行数据类型的转换。

  1. 2.4+3.6=6;
  3. Infinity ： 正无穷大
  5. -Infinity ： 负无穷大
  7. NaN : Not a Number 非数字， 和任何值都不相等，包括它本身

字符串类型：String

js中字符串类型为基本类型，与java中不同，js中字符串使用单引号或双引号括起来。

  1. var str1 = "Hello…";
  3. var str2 = 'CGB2103…';;
  5. alert(str1);//弹出框

布尔类型：boolean

js中的boolean类型与java相同值只能为true和false

  1. var s1 = false;
  3. console.log(s1)

未定义：undefined

值只有一个就是undefined。表示变量没有初始化值。

  1. a) var num; alert(num);//声明了变量但是没有为变量赋值，该变量的值就是undefined。
  3. b) 或者访问一个对象上不存在的属性时，也是undefined。
  5. c) 或者访问数组中一个没有的元素的位置时，该位置处的值也是undefined.

空值：null

值也只有一个，就是null。表示空值或者不存在的对象。

变量的声明

js中的变量与java不同，不是通过引用类型或基本类型定义，只需要使用一个关键字var来进行定义。

  1. var a=1; alert(a);
  3. var x=true; alert(x);
  5. var y=10.8; alert(y);
  7. var a = 1;
  8. a=true;
  9. a=100;
  10. alert(a);//100
  12. function x(){
  13.     var m = 10;
  14.     alert("局部变量:"+m);
  15.     alert("全局变量:"+a);
  16. }
  17. alert("局部变量2:"+m);//局部变量失效,报错

运算符

js具有java中的基本运算符，以及===、!==、!(not)

  1. var a = 3;
  2. var b = 1;
  3. console.log(a+b);//4
  4. a+=4;
  5. console.log(a+b);//8
  6. //a+=4;
  7. console.log(a==b); //true
  8. console.log(a==="3"); //false  如果两边比较的值不是同一种数据类型，===直接返回false，如果是同一种数据类型，==和===没有区别！
  9. console.log("1"=="1"); //true   //由于JS中字符串是基本数据类型，比较字符串相等通过 == 进行！
  10. var a = 1;
  11. alert(a++);//1
  12. alert(++a);//3
  13. alert(++a+a+++a);//4+4+5
  14. alert(a>3?10:8);
  15. var b = 10;
  16. alert(a>b?a:b);//求两个数里的大数
  17. var c = 8;
  18. var d = a>b?(a>c?a:c):(b>c?b:c);
  19. alert(d);//三个数里的大值

typeof运算符：用于返回变量或表达式的类型

  1. var i = 3;
  2. console.log(typeof i);//number
  3. i=true;
  4. console.log(typeof i);//boolean
  5. i="hello";
  6. console.log(typeof i);//string
  7. console.log(typeof 123+"abc");//numberabc
  8. console.log(typeof (123+"abc"));//string

数组

js数组中可以存放任意的数据类型

js中的数组长度可以被改变

数组声明方式

  1.   var arr1 = new Array();
  2.         var arr2 = [];
  3.         var arr3 = new Array("数组", 123, 1.5, true);
  4.         arr2 = ["数组", 123, 1.5, true];
  5.         arr1 = ["数组", 123, 1.5, true];
  6.         console.log(arr3)
  7.         console.log(arr2)
  8.         console.log(arr1)

遍历方式

  1. for (var i = 0; i < arr2.length; i++) {
  2.             console.log(arr2[i])
  3.         }
  5.         for (var i in arr3) {
  6.             console.log(arr3[i])
  7.         }

函数

创建函数使用关键字function

创建方式

  1. function f(){
  2.             console.log("CGB2106")
  3.         }
  4.         f();
  6.         var f1 = function(){
  7.             console.log("CGB2106")
  8.         }
  9.         f1();
  11.         function f2(a , b){
  12.             return a + b;
  13.         }
  14.         console.log(f2(1,2))
  15.         console.log(f2("CGB2106",666))
  17.         var f3 = function(c){
  18.             return "Hello CGB" + c
  19.         }
  20.         console.log(f3(123))
  22.         var f4 = function(d){
  23.             console.log(123+d)
  24.         }
  25.         f4(123)

对象

js中对象分为内置对象以及自定义对象

内置对象

  1. /*
  2.         在浏览器加载完整个html后立即执行!
  3.         window.onload()
  4.         */
  5.         window.onload = function () {
  6.             console.log("我是猪猪侠")
  7.         }
  9.         // 提示信息会话框
  10.         window.alert("马钊")
  12.         // 确认会话框
  13.         window.confirm("马钊")
  15.         // 键盘输入会话框
  16.         var a = window.prompt("马钊")
  17.         console.log(typeof a)
  18.         var b = parseInt(a)
  19.         console.log(typeof b)
  21.         //事件对象
  22.         window.event
  24.         /*
  25.         文档对象:window.document返回document
  26.         代表整个HTML文档，用于访问页面中的所有元素
  27.         document.write()                       动态向页面写入内容
  28.         document.getElementById(id)          获得指定id值的元素
  29.         document.getElementsByName(name)    获得指定Name值的元素，返回多个元素，用数组
  30.         document.getElementsByTagName       获得指定标签名的元素，返回多个元素，用数组
  31.         document.getElementsByClassName     获得指定class属性的元素
  32.         */
  33.         document.write("我是马钊！")

自定义对象

  1. function Person() {} //定义对象
  2. var p1 = new Person(); //创建对象
  3. //定义属性
  4. p1.name = "马钊";
  5. p1.age = -1238;
  6. //定义函数
  7. p1.run = function(){
  8.     console.log(this.name + "年龄:" + this.age)
  9. }
  10. p1.run();
  12. var p2 = {
  13.     "name" : "余来",
  14.     "age" : "123",
  15.     'food' : "马钊",
  16.     "out" : function(){
  17.         console.log(this.name + "年龄：" + this.age)
  18.     },
  20.     "eat" : function(){
  21.         console.log(this.name + "爱吃" + this.food)
  22.     }
  23. }
  24. console.log(p2.name)//调用属性
  25. console.log(p2)
  26. p2.out()
  27. p2.eat()

Document对象

getElementById("元素的id的属性的值")—返回1个元素
getElementsByName("元素的name属性的值")—返回多个元素(用数组)
getElementsByClassName("元素的class属性的值")—返回多个元素(用数组)
getElementsByTagName("元素的标签名的值")—返回多个元素(用数组)
write()—向文档写 HTML 表达式 或 JavaScript 代码
title—返回网页的标题
id—设置或返回元素的id
innerHTML—设置或返回元素的内容

  1.  //使用id选择器获取元素
  2.         function fun() {
  3.             var x = document.getElementById("a");
  4.             console.log(x)
  5.             var x1 = document.getElementById("a").innerHTML;
  6.             console.log(x1)
  7.             var x2 = document.getElementById("a").innerHTML = "我是马钊";
  8.         }
  10.         //使用class属性名获取元素
  11.         function f1() {
  12.             var c = document.getElementsByClassName("b");
  13.             console.log(c)
  14.             c[2].innerHTML = "我是老马钊"
  15.         }
  17.         //使用name属性获取元素
  18.         function f2() {
  19.             let name = document.getElementsByName("c");
  20.             console.log(name)
  21.         }
  23.         //使用标签名获取元素
  24.         function f3(){
  25.             for (var tag of document.getElementsByTagName("p")) {
  26.                 console.log(tag)
  27.             }
  28.             console.log(document.getElementsByTagName("p"))
  29.         }