02-JavaScript

C-fovik-0611

已于 2024-04-24 14:20:38 修改

阅读量1.8k

点赞数 69

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

于 2024-04-24 14:18:25 首次发布

本文链接：https://blog.csdn.net/qq_74012324/article/details/138157360

版权

Javaweb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript

前言

本文用来记录自己的学习过程,有误地方还请多多指教

1.JavaScript介绍

html 写页面展示内容

css用来美化页面

JavaScript 用来让界面又动态效果

JavaScript是一种脚本语言，主要配合HTML完成一些页面的动态效果

脚本：解释性的，嵌套在其他东西里面的一种
作用是实现动态效果
JavaScript这个语言是弱类型

JavaScript这门技术主要包括

基础语法
DOM对象，其实就是操作HTML标签和css样式
BOM对象，其实就是操作浏览器

2 JS引入

2.1 在标签内写js

<body>
	<button onclick = alter("警告")>按钮</button>
</body>

2.2 在文件使用

css写样式，需要把style标签内写子head标签内

但是写js代码的script标签，可以写在html页面的任何位置，head标签内，body标签内都可以，但是一般建议放在后面，越晚加载越好，

<script>
	alter("JS内执行");
</script>

2.3 独立的js文件

1.创建一个后缀为.js的文件

2.文件内写js代码

3.在html文件内使用

<body>
	<!--引入js文件-->
    <script src="js.js"></script>
    <script></script>
</body>

js.js

alter("这里执行js代码");

3 JS语法

3.1 变量

变量的使用

声明，var,变量名
赋值，变量名 = 值
使用

JavaScript是一种弱类型语言，声明的时候不需要设置变量类型，赋值的时候可以赋值任何类型

<script>
  //js基本数据类型有数字，字符串，布尔值，未定义，空五种
    var a = 12;
    var b = 12.3;
    var c = "你好";
    var d = true;
    //js有一个函数，可以直接返回这个参数的类型
    console.log("a=" + a);
    console.log("b=" + b);
    console.log("c=" + c);
    console.log("d=" + d);
  </script>

在这里插入图片描述

3.2 基本数据类型

基本数据类型有数字，字符串，布尔型，未定义，空，五种

<script>
	var x = 1; //number类型
	var x2 = 1.1;	//number类型
	var y = "JavaScript";
	var z = "true";
	consloe.log(typeof x);
	consloe.log(typeof x2);
    consloe.log(typeof y);
    consloe.log(typeof z);
    consloe.log(typeof i);//未定义
</script>

在这里插入图片描述

变量有不同的类型，不同的类型使用的作业不一样

number类型，数字，那就可以做算术，逻辑运算等（后续运算时使用）
boolean类型，那就可以用于逻辑判断，分支语句，循环等（后续分支循环时使用）
string类型，那就可以使用字符串的方法，对字符串操作，和java中的string操作很像
完整的string操作，可以查看APIJavaScript 字符串方法 (w3school.com.cn)

var y = "java-script"
var j = y.charAt(0);
console.log(j);
console.log(y.indexof("a"));//找到第一个指定符号的元素下标
console.log(y.lastIndexOf("a"));//找到最后一个指定符号的下标
console.log(y.split("-"));//根据指定字符，拆分字符串，返回字符数组
console.log(y.substring(5));//根据指定截取字符串长度，知道末尾
console.log(y.substing(5,8));//根据指定下标截取字符串，[begin,end)
//length不是方法，是属性，调用时不用()
console.log(y.length)；//获取字符串长度

3.3 引用类型

其实引用类型是借鉴Java中的对象的思想

js中的引用类型其实就是json，后续学习框架，工作中json是重中之重，非常常见

今天主要学习json的语法格式，会用一个json定义一个对象

将来使用JSON在前端后端之间传输数据的

语法格式：

JSON对象内使用大括号,{}
大括号内，是键值对，键值对使用是冒号分割.{key:value}
{id:18}数字直接写
{name:“张三”}字符串需要双引号
{sex:true}布尔值直接写
{arr:[1,2,3]}数组使用[]
{obj:{}}对象使用{}

大括号内，可以同时写多个键值对，中间使用逗号隔开
{id:18,}

//json对象，引用类型
	var student = {
        id:1,
        name:"小胡",
        sex:true,
        socre:[99,98,100],
        teacher:{
            id : 2,
            name:"陈哥"
        }
    };
//取出对象的属性值
//对象，属性，其实是对象
console.log(student.id);

3.4 数组类型

数组是用来存储多个数据的

创建时可以是空数组，后面也可以继续赋值
数组没有长度限制
数组存储的类型没有限制

创建数组的语法

var 名字 = []
var 名字 = new Array()

取值赋值的语法

数组名[下标]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js数组</title>
</head>
<body>
  <!--
    数组是用来存储多个数据的集合
    数组创建的语法
    var 数组名 = []
    var 数组名 = new Array()
  -->
  <script>
    //创建数组
    var arr1 = [];  //空数组
    var arr2 = [1,3,4,5];
    console.log(arr1);
    console.log(arr2);

    //数组取值
    alert(arr2[0])
    //数组赋值
    arr2[1] = "你好";
    alert(arr2[1]);
  </script>
</body>
</html>

3.5 日期对象

创建日期对象

日期对象提供了方法可以获得，设置日期信息

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>日期类型</title>
</head>
<body>
  <script>
    //创建日期对象
    var date1 = new Date();
    //获取当前时间并显示在控制台
    console.log(date1);
    alert(date1);

    //创建时间指定毫秒值，时间从1970年1月1日开始
    var date2 = new Date(1000);
    alert(date2);

    //以指定年月日创建日期，月份特殊，一月是0，十二月是11
    var date3 = new Date(2019, 5, 6);
    alert(date3);

    //获取日期方法
    var year = date3.getFullYear();//获得年
    var month = date3.getMonth();//获得月
    var day = date3.getDate();//获得日
    console.log(year, month + 1, day);

    //设置日期
    date.setFullYear();

    //按照本地日期格式输出日期
    var dateString = date.toLocaleString();
    console.log(dateString);
  </script>
</body>
</html>

3.6 运算符

算术运算

关系运算

逻辑运算

三目运算

以上这些操作，和Java中的基本操作一样

算术运算

  <script>
    //=======算术运算==========
    // 1. 算术运算符
    console.log(10 + 2);
    console.log(10 - 2);
    console.log(10 * 2);
    console.log(10 / 2);
    console.log(10 % 2);
    console.log(10 ** 2);
  </script>

在这里插入图片描述

关系运算

  <script>
    // ================关系运算=================
    // > < >= <= == != ===
    // 关系运算的结果是布尔值: true / false
    console.log(1 > 0);//true
    console.log(1 < 0);//false
    console.log(1 <= 0);//false
    console.log(1 >= 0);//true
    // == 判断[值]是否相等
    console.log("1 == 1   " + (1 == 1));//true
    console.log("1 == '1'  " + (1 == "1"));//true

    // === 判断[值]和[类型]是否都相等
    console.log("1 === '1'  " + (1 === "1"));//false
    console.log("1 === 1  " + (1 === 1));//true
  </script>

逻辑运算

 <script>     
      // &&  || !
      // && 一错就错,全对才对,也有短路效果
      console.log(1 > 0 && 1 > 0);
      var a = 1;
      console.log(1 < 0 && a++ > 1);
      console.log("a = " + a);

      // || 一对就对,全错才错,也有短路效果
      console.log(1 < 0 || 1 > 0);
      var b = 1;
      console.log(1 > 0 || b++ > 0);
      console.log(b);

      // !取反
      console.log(!true);
    </script>

在这里插入图片描述

三目运算

	<script>      
		console.log("================三目运算=================");
      // 前面的表达式如果为true,就执行冒号左边
      // 如果前面的表达式为false,就执行冒号后边
      console.log(1 > 0 ? "111" : "000");
    </script>

3.7 分支

if

if else

if else elseif

switch

    <script>
      var a = 1;
      if (a > 0) {
        console.log("a  >  0");
      }

      if (a < 0) {
        console.log("a < 0");
      } else {
        console.log("a > 0");
      }

      if (a > 0) {
        console.log("a > 0");
      } else if (a < 0) {
        console.log("a < 0");
      } else {
        console.log("a == 0");
      }

      // switchcase也一样...
    </script>

3.8 循环

while

dowhile

for

这些循环和Java中的循环都是一样的使用方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>循环</title>
</head>
<body>
  <script>
    //循环
    //for循环
    var i = 1;
    while (i <= 10) {
      console.log(i);
      i++;
    }

    //do while循环
    var j = 100;
    do{
      console.log(j);
      j -= 10;
    }while(j < 0);

    //for循环
    var sum ;
    for(var k = 1;k <= 10;k++){
      sum += k;
    }
    alert(sum);
  </script>
</body>
</html>

3.9 函数

函数就是Java中方法的概念，用来完成某些功能的

定义函数的语法

function 函数名(参数1，参数2，....){
	//执行代码
}
/*
1,function是固定的，每一个方法都需要设置
2，没有定义返回值类型，也没有返回值void
3.函数名，见名知意
4.参数直接写参数名，没有数据类型，也米有var
5.如果要返回数据，通过return值。返回
*/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>函数</title>
</head>
<body>
  <script>
    //无参数 无返回值函数
    function fun1(){
      //没有参数，没有返回值
      console.log("没有参数，没有返回值的函数");
    }

    //有参数没有返回值的函数
    function fun2(a){
      console.log(a);
      console("有参数，没有返回值的函数");
    }

    //有参数也有返回值的函数
    function fun3(a,b){
      return 100;
    }

    //调用函数
    var a = fun3(10,30);
    alert(a);
  </script>
</body>
</html>

4 常见的弹窗函数

4.1 警告框

<script>
	function fun1(){
        alert("没有权限!");
    }
    
    fun1();
</script>

4.2 确定框

<script>
	function fun2(){
        //该函数有返回值，是true，false
        //点击确定，返回true，点击取消返回false
        if(confirm("还是做不到吗")){
            alert("删除成功!");
        }else{
            alert("删除失败");
        }
    }
    fun2();
</script>

4.3 输入框

<script>
    //弹出会话框，输入值后点击确定返回输入框的值
    //点击取消返回的就是null
    function fun3(){
      var result = prompt('请输入内容');
      console.log(result);
    }
    fun3();
  </script>

rt(“没有权限!”);
}

fun1();

```

4.2 确定框

<script>
	function fun2(){
        //该函数有返回值，是true，false
        //点击确定，返回true，点击取消返回false
        if(confirm("还是做不到吗")){
            alert("删除成功!");
        }else{
            alert("删除失败");
        }
    }
    fun2();
</script>

4.3 输入框

<script>
    //弹出会话框，输入值后点击确定返回输入框的值
    //点击取消返回的就是null
    function fun3(){
      var result = prompt('请输入内容');
      console.log(result);
    }
    fun3();
  </script>

C-fovik-0611

关注

69
点赞
踩
18

收藏

觉得还不错? 一键收藏
2
评论
02-JavaScript

本文用来记录自己的学习过程,有误地方还请多多指教html 写页面展示内容css用来美化页面JavaScript 用来让界面又动态效果JavaScript是一种脚本语言，主要配合HTML完成一些页面的动态效果JavaScript这门技术主要包括。
复制链接

扫一扫