javascript

JavaScript入门

javascript引入方式

想要在HTML中引入JavaScript，一般有三种方式。外部JavaScript内部JavaScript元素事件JavaScript实际上，JavaScript的三种引入方式，跟CSS的三种引入方式（外部样式表、内部样式表、行内样式表）是非常相似的。对比理解一下，这样更能加深记忆。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--在head中引入js-->
    <script src="../js/index.js"></script>
    <!--内部引入js-->
    <script></script>
    <!--这种内部引入方法其实等价于：-->
    <script type="text/javascript"></script>
</head>
<body>
    <!--在body中引入js-->
    <script src="../js/index.js"></script>
    <!--内部引入js-->
    <script></script>
</body>
</html>

输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        document.write("Hello, World!");
    </script>
</body>
</html>

在元素事件中编写JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="按钮" onclick="alert('>_hello world')">
</body>
</html>

在元素事件中调用函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function alertMes()
        {
            alert(">_hello world!");
        }
    </script>
</head>
<body>
    <input type="button" value="按钮" onclick="alertMes()">
</body>
</html>

document.write()：在页面输出一个内容。 (相当于print打印)
alert()：弹出一个对话框。

js能做的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            alert("欢迎光临萌萌小店！");
        }
        window.onbeforeunload = function(event){
            var e = event || window.event;
            e.returnValue = "下次记得再来哦！";
        }
    </script>
</head>
<body>
</body>
</html>

语法基础

变量的命名

变量由字母、下划线、或数字组成，并且第一个字母必须是“字母、下划线或”。变量不能是系统关键字和保留字。
此外，变量的命名一定要区分大小写，例如变量age与变量Age在JavaScript中就是两个不同的变量。
javascript和其他的前沿编程语言一样，都区分大小写；

变量的使用

所有JavaScript变量都是由var声明

var a = 10;

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a = 10;
        document.write(a);
    </script>
</head>
<body>
</body>
</html>

变量覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a = 10;
        a = 12;
        document.write(a);
    </script>
</head>
<body>
</body>
</html>

变量加减法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a = 10;
        a = a + 11;
        a = a - 10;
        document.write(a);
    </script>
</head>
<body>
</body>
</html>

常量

var DEBUG = 1;

字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str = "Hello World";
        document.write(str);
    </script>
</head>
<body>
</body>
</html>

单引号括起来的字符串中，不能含有单引号，只能含有双引号。同理，双引号括起来的字符串中，也不能含有双引号，只能含有单引号。

bool类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a = 12, b = 11;
        if(a < b){
            document.write("a < b");
        }
        else{
            document.write("a > b");
        }
    </script>
</head>
<body>
</body>
</html>

未定义值指的是如果一个变量虽然已经用var来声明了，但是并没有对这个变量进行赋值，
此时该变量的值就是“未定义值”。其中，未定义值用undefined表示

var n;
document.write(n);

这样出来的结果是undefined

空值

如果一个变量等于null，表示计算机未给这个变量分配内存空间

var n = null

运算符

在JavaScript中，运算符指的是“变量”或“值”进行运算操作的符号。
其中，常见的运算符有以下五种。
算术运算符
赋值运算符
比较运算符
逻辑运算符
条件运算符

算术运算符

+ - * / % ++ --

加法运算符

在JavaScript中，加法运算符并非想象中那么简单，我们需要注意三点。
数字+数字=数字
字符串+字符串=字符串
字符串+数字=字符串
也就是说，当一个数字加上另外一个数字时，运算规则跟数学上的相加一样，
当一个字符串加上另外一个字符串时，运算规则是将两个字符串连接起来，如下所示:
var a = "今年是" + 2022"
a的值是 "今年是2022"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a = 10 + 2;
        var b = "Web" + "前端开发";
        var c = "今年是" + 2022;
        document.write(a + "<br>" + b + "<br>" + c );
    </script>
</head>
<body>
</body>
</html>

赋值运算符

= += -= *= /=

比较运算符

> < >= <= == !=

逻辑运算符

&& || ! (与、 或、 非)

var a = 10, b = 2,c = 3;
document.write(!(a>b)||(b<a)&&(c>b));

上面的代码应该输出true

条件运算符

三目运算符
a ? b : c

这下我可算了解了为什么人们都说计算机语言都是通用的了，
从这里可以直接看出来，java、javascript、c/c++、python 基本上运算符都一模一样

类型转换

这个就简单多了，无非就是隐式转换、强制转换

"字符串" 转 "数字"

两种方式
Number(); parseInt() 和 parseFloat();

  • Number()方法可以将任何“数字型字符串”转换为数字。
  • parseInt()和parseFloat是提取“首字母为数字的任意字符串”中的数字，其中parseInt()提取的是整数部分，parseFloat()不仅会提取整数部分，还会提取小数部分。
var a = Number("2020") + 2;
document.write(a);

😍😍😍

放上老婆

Number方式

document.write(Number("123")+"<br>")
document.write(Number("3.14")+"<br>");
document.write(Number("hao123")+"<br>");
document.write(Number("100px"));

parseInt方式

document.write(parseInt("123")+"<br>")
document.write(parseInt("3.14")+"<br>");
document.write(parseInt("hao123")+"<br>");
document.write(parseInt("100px"));

parseFloat方式

document.write(parseFloat("123")+"<br>")
document.write(parseFloat("3.14")+"<br>");
document.write(parseFloat("hao123")+"<br>");
document.write(parseFloat("100px"));

数字转换为"字符串"

也是有两种方式

  • 与空字符相加：数字加字符还是字符
var a = 2022 + " ";
var b = a + 1000;
document.write(b);
  • toString()
var a = 2022;
var b = a.toString() + 1000;
document.write(b);

a.toString()表示将a转换为字符串，也就是2017转换为"2017"，因此最终b的值为"20171000"

转义字符

\' 单引号 \" 双引号 \n 换行符
如果是在document.write()中换行，则应该用
。如果是在alert()中换行，则应该用\n。
alert("hello, \nworld");

注释

// 单行注释 /*多行注释*/

流程控制

对于任意一种语言来说，所谓流程控制无非也就是一下三种

  • 顺序结构
  • 选择结构
  • 循环结构

顺序结构

最简单的结构，按照从上到下的顺序运行

var a=1;
a=2;
a=3;
document.write(a);

选择结构

选择结构也就是那几种
if...else if...else if...else switch...case...default

if...else

var sorce = 60;
if(sorce >= 60){
 document.write("yes!");
}
else{
  document.write("no!");
}

if..else 也可以嵌套实现

switch()

var sorce = 2;
switch(sorce)
  {
    case 1:
      document.write("A");
      break;
    case 2:
      document.write("B");
      break;
    case 3:
      document.write("C");
      break;
    case 5:
      document.write("D");
      break;
    default:
      document.write("你的数字不在1～5范围内！");
  }

switch中不仅可以是数字，也可以是字符串

循环结构

循环结果也就那几种
for() while() do...while()

for()

for(var i=0; i<5; ++i)
  {
    document.write(i + "</br>");
  }

while()

var sum = 0;
var n = 1;
while(n<=100)
  {
    sum += n;
    n++;
  }
document.write(sum);

do...while()

var sum = 0;
var n = 1;
do
  {
    sum += n;
    n++;
  }while(n<=100);
document.write(sum);

实例——判断数字为整数还是小数

可以通过使用 toString() 方法将数字变为字符串类型
灾通过 parseInt()和parseFloat() 函数实现

var number = 3.14;
if( parseInt( number.toString() ) == parseFloat( number.toString() ) )
   {
     document.write(number + "是整数");
   }
else
  {
    document.write(number + "是小数");
  }

函数

对于函数来说，分为有返回值的函数和无返回值的函数

在javascript中，函数是由函数名和语句块构成的，语句块是指函数名后面的{}内的所有语句；

和变量一样，变量要有名字，函数同样也要有名字；

函数的参数，函数可以有0个到多个参数；

函数通过function来定义

函数的使用非常简单，就是定义函数，然后调用函数

无返回值的函数

function check(number)
{
  if( parseInt( number.toString() ) == parseFloat( number.toString() ) )
     {
       document.write(number + "是整数" + "</br>");
     }
  else
    {
      document.write(number + "是小数" + "</br>");
    }
}
check(5);
check(3.14);
check(60);

有返回值的函数

function add(a, b)
{
  return a + b;
}
document.write( add(10,10) );

这里add(a, b)中的a, b称为形参
add(10, 10)中的10, 10称为实参；

全局变量和局部变量

全局变量声明在函数外部，存在于程序的整个生命周期
而局部变量声明在函数内部，与函数同生共死

函数的调用

我们知道，如果一个函数仅仅是被定义而并不被调用，函数本身是不会执行的；
javascript对于函数的调用有很多种，常见的有以下四种

  • 直接调用
  • 在表达式中调用
  • 在超链接中调用
  • 在事件中调用

直接调用和表达式中调用前面已经操作过，不再赘述

在超链接中调用

function expressLove()
{
  alert("I love you!");
}

<a href="javascript:expressLove()">表白</a>

在事件中调用

function expressLove()
{
  alert("I love you!");
}

<input type="button" onclick="expressLove()" value="表白">

嵌套函数

嵌套函数，顾名思义就是在一个函数内部定义另一个函数
不过嵌套的函数只能在函数内部中调用，在外部调用就会出错

嵌套函数实现平方数的阶乘

function func(a)
{
  function muti(x)
  {
    return x*x;
  }
  var m = 1;
  for(var i=1; i<=muti(a); ++i)
    {
      m *= i;
    }
  return m;
}
document.write(func(2)+func(3));

内置函数

在javascript中，有些函数是内置函数，有些是自定义函数。

函数 说明
parseInt() 提取字符串首部的数字，只能提取整数
parseFloat() 提取字符串首部的数字，可以提取小数
isFinite() 判断是否是一个有限数值
isNaN() 判断一个数是否是NaN
escape() 对字符串进行编码
unescape() 对字符串进行解码
eval() 将字符串当作一个表达式去执行

实例

  1. 判断一年是否为闰年

对于世纪年，能被400整除的为闰年
对于普通年，能被4整除但不能被100整除的为闰年；

function judge(year)
{
  if(year%400 == 0 || year%4 ==0 && year%100 != 0)
    {
      document.write("该年为闰年。" + "</br>")
    }
  else
    {
      document.write("该年不是闰年。" + "</br>")
    }
}
judge(2022);
  1. 找出5个数中的最大值
function numberMax(a,b,c,d,e)
{
    var maxnum;
	maxnum = a>b ? a : b;
	maxnum = maxnum > c ? maxnum : c;
	maxnum = maxnum > d ? maxnum : d;
	maxnum = maxnum > e ? maxnum : e;
	return maxnum;
}
document.write( numberMax(3,1,4,2,5) );

字符串对象

posted @   Tqqj  阅读(78)  评论(0)  编辑  收藏  举报
相关博文：
· web note
· Markdown语法
· Javascript基础入门
· javascript入门
· JS-基础
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示