javaWeb-JavaScript

qishimu

已于 2024-02-19 19:18:04 修改

阅读量793

点赞数 16

分类专栏： javaweb 文章标签： javascript 开发语言 ecmascript

于 2024-02-19 16:20:00 首次发布

本文链接：https://blog.csdn.net/weixin_45649595/article/details/135686388

版权

javaweb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

JavaScript介绍
JavaScript引入方式
JavaScript基础语法

JavaScript介绍

跨平台
面向对象
脚本语言：不需要编译，直接解释运行

控制网页的行为，使得网页可以进行交互

JavaScript和Java完全是不同的语言无论是概念还是设计，但是基础语法类似

JavaScript引入方式

在这里插入图片描述

内部脚本

<script>
</script>

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

</body>
</html>

script标签的数量和位置没有限制（遵循语法即可）
但是一般将js代码放在body下方，因为JS的加载需要时间，先加载HTML
比较合适

外部脚本
在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。

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

<script>
  // alert("hello js")
</script>

<body>

</body>
<script src="demo.js"></script>
</html>

在这里插入图片描述

JavaScript基础语法

书写语法

区分大小写
；可有可无（*）
注释和JAVA一样
{}表示代码块

输出语句

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

<script>
    window.alert("hello js");
    
    document.write("hello js2");
    
    console.log("hello js3")
</script>

<body>

</body>
<script src="demo.js"></script>
</html>

window.alert() 写入警告框

document.write()写入HTML输出
在这里插入图片描述

console.log（）写入浏览器控制台
在这里插入图片描述

变量

var是variable（变量，可变物）
JS中使用var来定义变量

JavaScript是个弱类型的语言，变量可以存放不同类型的语言
变量名需要遵循如下规则：

数字不要开头
建议使用驼峰命名法

var特点：

作用域：全局变量
变量可以重复定义
（与之区别的是let 关键字局部{}内不可重复定义但如果不在代码块和函数内 let变量定义的也将是全局变量）
（const不可修改）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    {
        var test = 20;
        var test = "好奇怪";
    }
    window.alert(test)
</script>
<body>

</body>
</html>

在这里插入图片描述

数据类型

虽然定义变量的时候不需要指定数据类型但是
JavaScript中分为：原始类型和引用类型

原始类型：

number：数字（特殊NAN not a number）
string：字符
boolean：（布尔）
null：空
undefined：未进行初始化

使用typeof运算符获取数据类型
alert（typeof age）
（alert向……报警）

引用类型：对象

运算符

在这里插入图片描述
大部分都和Java内一模一样
主要区别== 和 ===

== ：先类型转换在比较值
===：不进行类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
  var count1 = 20
  var count2 = "20"
  
  document.write(count1 == count2)
  document.write(count1 === count2)
</script>
<body>

</body>
</html>

在这里插入图片描述

类型转化：

其他类型转为number
string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN
将 string 转换为 number 有两种方式：

+号
parseInt（）推荐
boolean 转换为 number 类型：true 转为1，false转为0

其他类型转为boolean
number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
null类型转换为 boolean 类型是 false
undefined 转换为 boolean 类型是 false

流程控制语句

和Java一模一样进行演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
<script>
  var name = "Tom"
  if(name){
   document.write(name);
   document.write("<br>")
  }else
  {
    document.write("名字不规范")
  }

  let i = 1;
  var sum = 0;

  do {
    sum += i;
    i++;
  } while (i <= 100)
  document.write(sum);
</script>
</html>

在这里插入图片描述

函数（方法）

在这里插入图片描述
形式参数不需要类型应为JavaScript是个弱类型的语言
返回值也不需要定义类型直接爱内部返回

在这里插入图片描述
这也是一种定义方式（不太喜欢）
JS中函数接收的参数可以不和定义一致（但是赋值只能是规定的数目）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    function add(a,b){
      let c = a + b;
      return c
    }
    document.write(add(1, 2));
    document.write("</br>");
    document.write(add(1));
  </script>
</body>
</html>