资讯详情

3. JavaScript

1 JavaScript简介

  1. 简称JS，它是一种脚本语言(解释执行非编译执行)，可以嵌套在静态页面中，为静态页面增加一些动态效果。JS许多非浏览器环境也被使用，例如node平台
  2. 不同的浏览器制造商将在浏览器中内置不同的分析器进行分析JS例如，谷歌浏览器使用语法V8解析器

2 前段三层

  1. 结构层：HTML
  2. 样式层：CSS
  3. 行为层：JavaScript

3 JavaScript组成

  1. ECMAScript：定义语法规范，如使用var定义变量、function定义函数、for定义循环等。欧洲计算机协会每年6月中旬重新制定语法规范。我们目前学习的是2014年制定的规范，简称ES现在已经出来了ES6
  2. DOM(document object model)：一个代表HTML文本对象可以通过该对象访问HTML中各个标签
  3. BOM(browser object model)：代表浏览器的对象

4 JS书写格式

  1. 双闭合标签可用

5 内置功能函数

5.1 警告框

  1. 代码

    //CSS和JavaScript使用///和/和//**/注释，而html中，使用<!---->进行注释 ///单行注释 /* 多行注释 */ alert("Hello word");

5.2 提示框

  1. 代码

    prompt("小兄弟，你回家了吗？"); ///第一个参数是提示内容，第二个参数是提示框文本中的默认内容 prompt("小兄弟，你回家了吗？", 66666);

5.3 控制台打印

  1. 右键浏览器可以通过–检查–Console，进入控制台页面

  2. 代码

    console.log("我在控制台打印数据，你看不见我");

6 数据类型

6.1 基本数据类型

英文描述 中文描述 值
string 字符串 我爱你的祖国
number 数字 100、3.14、-666
boolean 布尔 true、false
undefined 为定义 undefined
null 空对象 null

6.2 引用类型

英文描述 中文描述 值
object 引用类型 函数，数组，正则，DOM、BOM

6.3 代码

<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
  </body>
</html>
<script> //字符串 console.log("我爱你JS"); console.log("最近快过年了，回家要胖五进"); //数字 console.log(100); console.log(-4.14); console.log(123456789); //布尔 console.log(true); console.log(false); //未定义 console.log(undefined); //空对象 console.log(null); //JS当中typeof关键字，可以返回数据类型 console.log(typeof 123); console.log(typeof true); console.log(typeof undefined); //注意结果为false，和java中double的计算导致数据错误原因相同 console.log(0.1+0.2==0.3); </script>

7 变量

  1. 代码

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
  </body>
</html>
<script> //1. 关键字var声明变量，变量未赋值之前，值为undefined var num; //2. 变量赋值 num = 123; //3. 使用变量 //通过访问变量名字、获取到对应存储数据 console.log(num); var b=456; var c = 789; //打印"123 456 789"这个字符串 console.log(num,b,c); </script>

8 运算符

  1. 数学运算符、比较运算符：非数字类型的值，js会自动通过Number函数，隐式将它们转为数字，再进行运算

    1. NaN：not a number，是JS语言中一个特殊的数字，一般进行数学运算符的时候，计算不出结果，返回数字NaN
    2. NaN和任何值用数学运算符进行运算，结果还是NaN
    非数字值 转换后值
    true 1
    false 0
    undefined NaN
    null 0

  2. 逻辑运算符：非布尔类型的值，js会自动通过Boolean函数，隐式将它们转为布尔类型值，再进行运算

    非布尔值 转换后值
    0 false
    NaN false
    非0非NaN的数字 true
    空字符串 false
    非空字符串 true
    undefined false
    null false

  3. 比较运算符的结果只能是false或true。例如NaN==123，结果是false，而不是NaN

  4. 代码

    //1. ==表示值是否相等
console.log(3 == "3"); //true
console.log(3 != 3); //false
//2. ===表示值和数据类型是否都相等
console.log(3 === "3"); //false
console.log(3 !== 3); //false

//3. 注意null需要特殊记忆，虽然null被转为0，但null==0、null>0、null<0，返回都是false，有点像数据库中对null的处理
console.log(null==0);
console.log(null>0);
console.log(undefined);

8.1布尔

  1. 代码

    //我们也可以通过手动调用Number函数，查看布尔类型，最后转为什么数字
console.log(Number(true));//1
console.log(Number(false));//0
console.log(true + 99);//100
console.log(false * 100);//0

8.2 undefined

  1. 代码

    //NaN和任何值发生计算，结果都是NaN
console.log(0 / 0);
console.log(typeof NaN);
console.log(NaN + 33);
console.log(NaN * 33);
console.log(NaN + NaN);
console.log(undefined + 33);
console.log(undefined / 33);

8.3 空对象

  1. 代码

    console.log(Number(null));
console.log(null * 99);
console.log(0 + NaN);
console.log(null + NaN);

8.4 字符串

8.4.1 字符串与数学运算符

  1. 如果非"+"连接，那么会将字符串先转为对应的数字，如果该字符串无法转为数字，会转为NaN，之后再进行计算

  2. 如果为"+“连接，”+"会被当作字符串连接符，将数据从左到右拼接为字符串，不再表示加法

  3. 代码

    console.log("12" + 44);
console.log("张三喜欢李四" + 666);
console.log("12" - 44);
console.log("12" * 44);
console.log("12" / 44);
console.log("12" % 44);
console.log("张三" + 66);
console.log("张三" + "李四");
console.log("小明" / 66);
console.log("小红红" * "小兰兰");
8.4.2 字符串与比较运算符

  1. 如果是字符串与数字比较，会将字符串隐式转换为数字后再进行比较

  2. 如果是字符串与字符串比较，从左到右，一个一个比较字符的ASCII值，直到某一个字符不相等，比较结束

  3. 代码

    //字符串和数字比较
console.log("66" > 99); //false
console.log("33" > 12); //true
console.log("33" == 33); //true 
console.log("33" === 33); //false

//字符串和字符串比较
console.log("a2" > "A2"); //true
console.log("b2a" > "ABC"); //true
console.log("李四" == "李四");//true

9 前端自学网站

  1. https://www.w3school.com.cn/
  2. php：https://www.runoob.com/php/php-ref-array.html
  3. vue：https://cn.vuejs.org/
  4. react：https://reactjs.org/docs/hello-world.html
  5. jquery：http://jquery.cuishifeng.cn/
  6. node平台：http://nodejs.cn/
  7. canvas：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial
  8. echarts：https://www.echartsjs.com/examples/zh/index.html

10 条件语句

  1. 代码

    //用户输入分数
var score = prompt("请你输入一个分数");
if (score < 60) { 
          
  //条件：分数小于60
  alert("兄弟不好意思,来年补考");
} else if (score < 70) { 
          
  //出现else:暗含条件分数一定是大于等于60
  //完整条件大于等于60 且小于70
  alert("兄弟恭喜你及格");
} else if (score < 80) { 
          
  //暗含条件：分数大于等于70
  //完整条件：大于等于70 且小于80
  alert("良好");
} else { 
          
  //暗含条件：分数大于等于80
  alert("优秀");
}

11 循环语句

  1. for

    //for循环
for (var i = 0; i < 10; i++) { 
          
  console.log(i);
  //打印在网页上
  document.write("<h1>我爱你祖国</h1>");
}

  2. while

    var i = 10;
var sum = 0;
do { 
          
  sum += i;
  console.log(i);
} while (i--);
console.log(sum);

  3. break、continue：与java用法一样

    //可以给循环起名字，叫waiceng，可以指定跳出某层循环，java实际上也可以这样用
waiceng: for (var i = 1; i < 10; i++) { 
          
  if (i % 3 == 0) break waiceng;
  console.log(i)
}

12 函数

12.1 关键字函数使用

  1. 根据声明方式不同，分为关键字function声明函数，和表达式声明函数

  2. 关键字function声明函数

    //1. 声明
//形参无需类型修饰，默认var修饰
function sum(a, b) { 
          
  console.log(a + b);
}
//2. 调用
sum(100, 200);
sum("张三", "李四");

12.2 全局变量和局部变量

  1. javascript中，形参和函数体内声明的变量为局部变量，其他所有变量全部是全局变量

  2. 代码

    //1. i不在方法体内，也不是形参，所以是全局变量
for (var i = 0; i < 10; i++) { 
          
  console.log(i);
}
console.log("循环语句结束" + i);

//2. str：全局变量
if (true) { 
          
  var str = "我是全局还是局部呀";
}
console.log(str);
//3. a：全局变量
var a = 100;

//4. haha、hehe、num都是局部变量
function fun(haha, hehe) { 
          
  console.log(haha, hehe);
  //判断这个变量是全局还是局部
  for (var num = 1; num < 5; num++) { 
          
    console.log(num);
  }
}
fun(1, 2);

12.3 JS中对重名函数的处理

  1. 永远是后者覆盖前者，没有重载

  2. 代码

    function fun(a) { 
          
  console.log("我是第一个");
}
function fun(a, b) { 
          
  console.log("我是第二个");
}
function fun(a, b, c) { 
          
  console.log("我是第三个");
}
fun("我爱你祖国");

12.4 return关键字

  1. return后不接内容，默认返回undefined

13 canvas标签

  1. canvas是html5中新增的一个双闭合标签，浏览器默认他是一张图片

  2. canvas标签默认宽300，高150

  3. canvas标签的宽、高，只能通过属性进行设置，不能通过写样式设置，否则js画出的图像不正确

  4. canvas标签文本、儿子标签都没有任何意义，显示不出来

  5. canvas相当于一个画布，我们可以通过JS在行为层中操作画布，从而实现绘制简单图形、裁切图片、简单2D动画、显示视频等功能。可以简单理解为，img标签是一个固定的图片，canvas标签是一个可以自己做画的图片

  6. 代码

    <!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style> * { 
            margin: 0; padding: 0; } canvas { 
            border: 1px solid black; } </style>
  </head>

  <body>
    <!--1. 修改canvas的宽和高，但不需要写px，因为宽高是作为属性存在的-->
    <canvas width="600" height="400"></canvas>
  </body>

</html>
<script> //2. 获取canvas标签 var canvas = document.querySelector("canvas"); //3. 画布当中任何操作必须通过2D上下文进行操作，下方方法用于获取2D上下文，2d上下文相当于笔，canvas为画布，需要用笔在画布上画画 var ctx = canvas.getContext("2d"); //4. 画布当中任何操作都是通过ctx属性、方法进行的 //5. 设置矩形填充颜色 ctx.fillStyle = "cyan"; //6. fillRect方法用于绘制一个矩形，参数分别为矩形距cavas左侧的距离、距cavas上方的距离、矩形的宽、高 ctx.fillRect(100, 100, 100, 100); //绘制圆 //通过绘制路径形式绘制圆 ctx.beginPath(); //用户在描述绘制图形，参数分别为圆心距canvas左侧距离、圆心距canvas上方的距离，半径长度，起始弧度0，结束弧度2pai，false表示顺时针画 ctx.arc(200, 200, 50, 0, Math.PI * 2, false); //设置填充颜色 ctx.fillStyle = "red"; //开始填充 ctx.fill(); //边框设置，边框宽度为20，外边框颜色为pink ctx.lineWidth = 20; ctx.strokeStyle = "pink"; //开始绘制 ctx.stroke(); </script>

14 数组

14.1 基本使用

  1. 代码

    //1. JS中数组使用[]进行表示
console.log([]);
//2. JS当中数组是引用类型数据，打印object
console.log(typeof []);
console.log([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
//3. 存储数据
var arr = ["我爱你祖国", 12306, true, NaN, [2, 3, 4]];
//4. 访问数组中元素
console.log(arr[0]);
console.log(arr[3]);
console.log(arr[4]);
//5. 修改数据中元素
arr[0] = "我爱你母亲";
arr[1] = 
    
        标签： ha重载矩形连接器
     
    锐单商城拥有海量元器件数据手册、
          IC替代型号，打造
          电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台