基本数据类型

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

数值类型:number

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

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

字符串类型:String

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

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

布尔类型:boolean

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

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

未定义:undefined

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

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

空值:null

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

变量的声明

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

  1. var a=1; alert(a);
  2. var x=true; alert(x);
  3. var y=10.8; alert(y);
  4. var a = 1;
  5. a=true;
  6. a=100;
  7. alert(a);//100
  8. function x(){
  9. var m = 10;
  10. alert("局部变量:"+m);
  11. alert("全局变量:"+a);
  12. }
  13. 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. }
  4. for (var i in arr3) {
  5. console.log(arr3[i])
  6. }

函数

创建函数使用关键字function

创建方式

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

对象

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

内置对象

  1. /*
  2. 在浏览器加载完整个html后立即执行!
  3. window.onload()
  4. */
  5. window.onload = function () {
  6. console.log("我是猪猪侠")
  7. }
  8. // 提示信息会话框
  9. window.alert("马钊")
  10. // 确认会话框
  11. window.confirm("马钊")
  12. // 键盘输入会话框
  13. var a = window.prompt("马钊")
  14. console.log(typeof a)
  15. var b = parseInt(a)
  16. console.log(typeof b)
  17. //事件对象
  18. window.event
  19. /*
  20. 文档对象:window.document返回document
  21. 代表整个HTML文档,用于访问页面中的所有元素
  22. document.write() 动态向页面写入内容
  23. document.getElementById(id) 获得指定id值的元素
  24. document.getElementsByName(name) 获得指定Name值的元素,返回多个元素,用数组
  25. document.getElementsByTagName 获得指定标签名的元素,返回多个元素,用数组
  26. document.getElementsByClassName 获得指定class属性的元素
  27. */
  28. 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();
  11. var p2 = {
  12. "name" : "余来",
  13. "age" : "123",
  14. 'food' : "马钊",
  15. "out" : function(){
  16. console.log(this.name + "年龄:" + this.age)
  17. },
  18. "eat" : function(){
  19. console.log(this.name + "爱吃" + this.food)
  20. }
  21. }
  22. console.log(p2.name)//调用属性
  23. console.log(p2)
  24. p2.out()
  25. 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. }
  9. //使用class属性名获取元素
  10. function f1() {
  11. var c = document.getElementsByClassName("b");
  12. console.log(c)
  13. c[2].innerHTML = "我是老马钊"
  14. }
  15. //使用name属性获取元素
  16. function f2() {
  17. let name = document.getElementsByName("c");
  18. console.log(name)
  19. }
  20. //使用标签名获取元素
  21. function f3(){
  22. for (var tag of document.getElementsByTagName("p")) {
  23. console.log(tag)
  24. }
  25. console.log(document.getElementsByTagName("p"))
  26. }