看程序学js-1_<!doctype html><html><body><script>function fn(x, -CSDN博客

本文链接：https://blog.csdn.net/tujiahao1/article/details/92419028

1、js基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  // 单行注释
  /*
进行
多行注释
*/
  document.write("Hello Javascript");
</script>
<br/>
<button onclick="document.getElementById('text').style.display='none'">隐藏文本</button>

<button onclick="document.getElementById('text').style.display='block'">显示文本</button>

<p id="text"> 这个是一段可以被javascript隐藏的文本</p><br/>
<script src="http://how2j.cn/study/hello.js"></script>
</body>

2、JS运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  var x = 10;
  document.write("变量x的值:"+x);
</script>
<br/>
<script>
  x = 10;
  document.write("没有用var声明的变量x的值:"+x);
</script>
<br/>

<script>
  var x=true;
  var y=false;
  document.write("布尔值:"+x);
  document.write("<br>");
  document.write("布尔值:"+y);
</script>

<script>
  var a=10; //十进制
  var b=012;//第一位是0，表示八进制
  var c=0xA;//0x开头表示十六进制
  var d=3.14;//有小数点表示浮点数
  var e=3.14e2;//使用e的幂表示科学计数法
  document.write("十进制 10 的值: "+a);
  document.write("<br>");
  document.write("八进制 012 的值: "+b);
  document.write("<br>");
  document.write("十六进制 0xA 的值: "+c);
  document.write("<br>");
  document.write("浮点数 3.14 的值: "+d);
  document.write("<br>");
  document.write("科学记数法 3.14e2 的值: "+e);
  document.write("<br>");
</script>

<script>
  var x='hello '; //单引号
  var y="javascript"; //双引号
  document.write("单引号的字符串:"+x);
  document.write("<br>");
  document.write("双引号的字符串:"+y);
</script>

<script>
  var x=10; //Number类型
  document.write("此时 x的值是 "+x+" 类型是数字");
  document.write("<br>");
  x = "hello javascript"; //String类型
  document.write("此时 x的值是 "+x+" 类型是字符串");
</script>

<script>
  var x;
  document.write('声明了但是未赋值的时候，类型是： '+typeof x);
  document.write("<br>");
  x=5;
  document.write('赋值为5之后，类型是： '+typeof x);
  document.write("<br>");
  x=5.1;
  document.write('赋值为5.1之后，类型是： '+typeof x);
  document.write("<br>");
  x=true;
  document.write('赋值为true之后，类型是： '+typeof x);
  document.write("<br>");
  x="hello";
  document.write('赋值为hello之后，类型是： '+typeof x);

</script>


</body>
</html>

3、JS字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  var a="hello javascript";
  document.write("变量a的类型是:"+(typeof a));
  document.write("<br>");
  document.write("变量a的长度是:"+a.length);
</script>

<script>
  var a=10;
  document.write("数字 "+a+" 转换为字符串"+a.toString());
  document.write("<br>");

  var b=true;
  document.write("布尔 "+b+" 转换为字符串"+b.toString());
  document.write("<br>");

  var c="hello javascript";
  document.write("字符串 "+c+" 转换为字符串 "+c.toString());
  document.write("<br>");

</script>

<script>
  var a=10;
  document.write('默认模式下，数字10转换为十进制的'+a.toString()); //默认模式，即十进制
  document.write("<br>");

  document.write('基模式下，数字10转换为二进制的'+a.toString(2)); //基模式，二进制
  document.write("<br>");

  document.write('基模式下，数字10转换为八进制的'+a.toString(8)); //基模式，八进制
  document.write("<br>");

  document.write('基模式下，数字10转换为十六进制的'+a.toString(16)); //基模式，十六进制
  document.write("<br>");

</script>

<script>
  document.write("字符串的\"10\"转换为数字的:"+parseInt("10")); //转换整数
  document.write("<br>");
  document.write("字符串的\"3.14\"转换为数字的:"+parseFloat("3.14"));//转换浮点数
  document.write("<br>");
  document.write("字符串的\"10abc\"转换为数字的:"+parseInt("10abc")); //判断每一位，直到发现不是数字的那一位
  document.write("<br>");

  document.write("字符串的\"hello javascript\"转换为数字的:"+parseInt("hello javascript")); //如果完全不包含数字，则返回NaN - Not a Number
  document.write("<br>");

</script>

<script>
  document.write("空字符串''转换为布尔后的值:"+Boolean(""));  //空字符串
  document.write("<br>");
  document.write("非空字符'hello javascript '串转换为布尔后的值:"+Boolean("hello javascript"));  //非空字符串
  document.write("<br>");
  document.write("数字 0 转换为布尔后的值:"+Boolean(0));  //0
  document.write("<br>");
  document.write("数字 3.14 转换为布尔后的值:"+Boolean(3.14)); //非0
  document.write("<br>");
  document.write("空对象 null 转换为布尔后的值:"+Boolean(null));  //null
  document.write("<br>");
  document.write("非空对象 new Object() 转换为布尔后的值:"+Boolean(new Object()));  //对象存在
  document.write("<br>");

</script>

<script>
  document.write("通过Number() 函数转换字符串'123' 后得到的数字："+Number("123"));   //正常的
  document.write("<br>");
  document.write("通过Number() 函数转换字符串'123abc' 后得到的数字："+Number("123abc"));   //包含非数字
  document.write("<br>");
  document.write("通过Number() 函数转换字符串'abc123' 后得到的数字："+Number("abc123"));   //包含非数字
  document.write("<br>");

  document.write("通过parseInt() 函数转换字符串'123' 后得到的数字："+parseInt("123"));   //正常的
  document.write("<br>");
  document.write("通过parseInt() 函数转换字符串'123abc' 后得到的数字："+parseInt("123abc"));   //包含非数字,返回开头的合法数字部分
  document.write("<br>");
  document.write("通过parseInt() 函数转换字符串'abc123' 后得到的数字："+parseInt("abc123"));   //包含非数字,以非数字开头，返回NaN
  document.write("<br>");

</script>

<script>
  var a = null;
  document.write('String(null) 把空对象转换为字符串：'+String(a));
  document.write("<br>");
  document.write('null.toString() 就会报错，所以后面的代码不能执行');
  document.write(a.toString());
  document.write("因为第5行报错，所以这一段文字不会显示");
</script>
</body>
</html>

4、JS自定义函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  function print(){
    document.write("这一句话是由一个自定义函数打印");
  }
  print();
</script>
<br/>

<script>
  function print(message){
    document.write(message);
  }
  print("第一句话");
  print("<br>");
  print("第二句话");
</script>
<br/>

<script>
  function print(message){
    document.write(message);
  }

  function calc(x,y){
    return x+y;
  }

  var sum = calc(500,20);
  print(sum);

</script>
</body>

5、局部变量与全局变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

  function f1(a){
    document.write('参数的作用域在函数以内，其值是 '+a);//参数a的作用范围，所以打印出来是5；
  }

  function f2(){
    document.write('在函数里不能访问其他函数的参数'+a); //不在参数a的作用范围，是一个未声明的变量，无法打印
  }

  f1(5);
  f2();
  document.write('在函数外也不能访问'+a);//也不在参数a的作用范围，是一个未声明的变量，无法打印

</script>
<br/>
<script>
  var a = 0; //定义在函数前面，即全局变量，所有函数都可以访问

  function f1(){
    document.write('通过函数f1 设置全局变量a的值 为 5');
    a = 5; //能够访问
  }

  function f2(){
    document.write('通过函数f2 访问并打印全局变量a的值 '+a); //能够访问
  }

  f1(); //通过f1，设置a的值
  document.write('<br>');
  f2(); //通过f2,  打印a的值
</script>
</body>
</html>

6、JS逻辑运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  function showHello(){
    alert("Hello JavaScript");
  }
</script>

<button onclick="showHello()">点击一下</button>
<br/>

<script>
  function p(s){
    document.write(s);
    document.write("<br>");
  }

  p("1+2="+ (1+2));
  p("5-3="+ (5-3));
  p("3*2="+ (3*2));
  p("9/3="+ (9/3));
  p("10%3="+ (10%3));

</script>
<br/>
<script>

  var a = 5;
  document.write('a++ 是先取值，再运算，所以打印出来是：'+a++); //先取值 ，即5

  document.write("<br>");
  var b = 5;
  document.write('++b 是先运算，再取值，所以打印出来是：'+ ++b); //先运算，再取值，即6

</script>
<br/>
<script>
  x = 5;
  x+= 6;
  document.write('x+=6就是 x=x+6的意思，所以最后的值就等于: '+x);
</script>
<br/>
<script>
  document.write('当+两边都是数字的时候，+就是加法运算符，所以1+2='+(1+2));
  document.write("<br>");
  document.write('当+任意一边是字符串的时候，+就是字符串连接符，所以1+\"2\"='+ (1+"2"));
</script>
<br/>
<script>
  function p(s){
    document.write(s);
    document.write("<br>");
  }

  p("1==2: "+(1==2));
  p("1!=2: "+(1!=2));
  p("1>2: "+(1>2));
  p("1<2: "+(1<2));
  p("1>=2: "+(1>=2));

</script>
<br/>
<script>
  function p(s){
    document.write(s);
    document.write("<br>");
  }

  p("1=='1': "+(1=='1'));
  p("1==='1': "+(1==='1'));

</script>
<br/>
<script>

  var age = 15;

  var movie = age<18?"卡通":"你懂的";

  document.write('使用?: 三相运算法进行判断。 <br>');
  document.write('age<18?"卡通":"你懂的" <br>表示当年纪小于18的时候，就看卡通，否则就看 你懂得<br>');

  document.write('而age变量的值是15，所以返回 '+movie);

</script>
</body>
</html>

7、JS控制结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

  var age = 15;

  if(age<18){
    document.write("如果年纪小于18，就看 卡通");
  }
</script>
<br/>
<script>

  var age = 22;

  if(age<18){
    document.write("年纪小于18就看卡通");
  }
  else{
    document.write("否则就看 你懂的");
  }
</script>
<br/>
<script>

  var age = 20;

  if(age<18){
    document.write("小于18就看 卡通");
  }
  else if(age<22){
    document.write("大于等于18，并且小于22，就看 你懂的");
  }
  else{
    document.write("大于等于22就看 新闻联播");
  }
</script>
<br/>
<script>
  var day=new Date().getDay(); //通过日期对象获取数字形式的星期几
  var today;
  switch (day)
  {
    case 0:
      today="星期天";
      break;
    case 1:
      today="星期一";
      break;
    case 2:
      today="星期二";
      break;
    case 3:
      today="星期三";
      break;
    case 4:
      today="星期四";
      break;
    case 5:
      today="星期五";
      break;
    case 6:
      today="星期六";
      break;
  }

  document.write("今天是 ： "+today);

</script>


</body>
</html>

7、JS自定义函数与异常处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  function p(s){
    document.write(s);
    document.write("<br>");
  }

  document.write("使用for循环打印 0 到 4<br>");

  for(var i=0;i<5;i++){
    p(i);
  }

</script>
<br/>
<script>
  document.write("使用while循环打印 0 到 4<br>");
  function p(s){
    document.write(s);
    document.write("<br>");
  }

  var i = 0;
  while(i<5){
    p(i);
    i++;
  }

</script>
<br/>
<script>
  function p(s){
    document.write(s);
    document.write("<br>");
  }
  document.write("使用do-while循环打印 0 到 4<br>");
  var i = 0;

  do{
    p(i);
    i++;
  } while(i<5);

</script>
<br/>
<script>
  function p(s){
    document.write(s);
    document.write("<br>");
  }

  document.write("使用for循环打印 0 到 4<br>如果发现是3，就<span style='color:red'>放弃本次循环，并且进入下一次</span>循环<br>");

  for(i=0;i<5;i++){
    if(i==3)
      continue;
    p(i);
  }

</script>
<br/>
<script>
  function p(s){
    document.write(s);
    document.write("<br>");
  }

  document.write("使用for循环打印 0 到 4<br>如果发现是3，就<span style='color:red'>终止循环，循环体结束 </span><br>");

  for(i=0;i<5;i++){
    if(i==3)
      break;
    p(i);
  }

</script>
<br/>
<script>
  document.write("试图调用不存在的函数f2()就会报错，并且导致javascript中止执行，后面的代码也不会执行了");

  function f1(){
    //函数f1是存在的
  }
  f2();  //调用不存在的函数f2();
  document.write("剩下的代码");
</script>
<br/>
<script>

  function f1(){
    //函数f1是存在的
  }
  try{
    document.write("试图调用不存在的函数f2()<br>");
    f2();  //调用不存在的函数f2();
  }
  catch(err){
    document.write("捕捉到错误产生:");
    document.write(err.message);
  }

  document.write("<p>因为错误被捕捉了，所以后续的代码能够继续执行</p>");

</script>
<br/>

</body>
</html>

8、JS数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

  var x = new Number(123);
  document.write('数字对象x的值:'+x);
  document.write("<br>");
  document.write('数字对象x的类型:'+typeof x); //通过typeof 获知这是一个object
  document.write("<br>");
  var y = 123;
  document.write('基本类型y的值:'+y);
  document.write("<br>");
  document.write('基本类型y的类型:'+typeof y); //通过typeof 获知这是一个number

</script>

<script>

  document.write('Number对象的最小值:'+Number.MIN_VALUE);

  document.write("<br>");

  document.write('Number对象的最大值:'+Number.MAX_VALUE);

</script>

<script>
  function p(s){
    document.write(s);
    document.write("<br>");
  }

  var a = new Number("123abc"); //通过非数字创建Number对象，得到的是一个NaN
  p('通过非数字字符串"123abc"创建出来的Number对象 a的值是：'+a);

  p('但是, a==Number.NaN会返回:'+(a==Number.NaN)); //即便是一个NaN 也"不等于" Number.NaN

  p('正确判断是否是NaN的方式是调用isNaN函数:'+isNaN(a)); //正确的方式是通过isNaN() 函数进行判断

</script>

<script>
  function p(s){
    document.write(s);
    document.write("<br>");
  }

  var a = new Number("123");

  p("数字对象123通过toFixed(2) 保留两位小数:"+a.toFixed(2)); //保留两位小数点

  var b = new Number("3.1415926");

  p("PI 通过toFixed(3) 保留三位小数:"+b.toFixed(3));//保留三位小数点

</script>

<script>
  function p(s){
    document.write(s);
    document.write("<br>");
  }

  var a = new Number("123");

  p("数字对象123通过toExponential 返回计数法表达 "+a.toExponential ());

  var b = new Number("3.1415926");

  p("数字对象3.1415926通过toExponential 返回计数法表达 "+b.toExponential ());

</script>

<script>
  function p(s){
    document.write(s);
    document.write("<br>");
  }

  var a = new Number("123");

  var b = a.valueOf();

  p('数字对象a的类型是: '+typeof a); //返回object
  p('通过valueOf()返回的值的类型是'+typeof b); //返回number

</script>

</body>
</html>