JavaScript(1)

news2024/11/24 9:51:27

JavaScript简介

JavaScript是一门跨平台、面向对象的脚本语言,用来控制网页行为的,它能使网页可以交互。

JavaScript引入方式

1、内部脚本

将js代码定义在HTML页面中,在HTML中,JavaScript代码必须位于<script>与</script>标签之间

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

提示:

  • 在HTML文档中可以在任意位置放置任意数量的<script>标签
  • 一般把脚本置于<body>元素底部,可以改善显示速度,因为脚本执行会拖慢显示

2、外部脚本

将js代码定义在外部js文件中,然后引入到HTML页面中

  • 外部文件demo.js
alert("Hello JS~");
  • 引入外部js文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/demo.js"></script>
</head>
<body>
    
</body>
</html>

注意:
1、对于一个<script>,不能同时引入JS文件和在内部书写JS代码
2、外部脚本JS文件中不能包含<script>标签

书写语法

  1. 区分大小写:与Java一样,变量名、函数名以及其他一切东西都是区分大小写的
  2. 每行结尾的分号可有可无
  3. 注释:单行注释(//)、多行注释(/* */)
  4. 大括号表示代码块

输出语句

  • 使用window.alert()写出警告框
  • 使用document.write()写入HTML输出
  • 使用console.log()写入浏览器控制台
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        window.alert("hello JS~");//弹出警告框
        document.write("hello JS~");//写入HTML(网页显示)
        console.log("hello JS~");//写入控制台(开发者模式)
    </script>
</body>
</html>

JavaScript基本语法

一、变量

JS本身是一门弱类型语言,只需要使用var关键字即可,不需要指定数据类型。
语法:var 变量名; 或者var 变量名1,变量名2; 或者var 变量名=值;
在这里插入图片描述

二、数据类型

分为两类:基本数据类型和引用数据类型
在这里插入图片描述

引用数据类型:通常叫做类(class),JS会将之转换成对象来处理

使用typeof运算符可以获取数据类型

alert(typeof age);

三、运算符

算数运算符:+ - * / % ++ –

赋值运算符:= += -= *= /= %=

关系运算符: === ,>, >=, <, <=, ==, !=

逻辑运算符:&& || !

条件运算符:条件表达式 ? true_value : false_value

注意:
在这里插入图片描述
类型转换:
在这里插入图片描述
在这里插入图片描述

四、流程控制语句

分支结构:单分支:if(){}、双分支:if(){}else{}、多分支:if(){}else if(){}else{}、等值多分支:switch(){case :……break;default:……}

循环结构:JS中while循环,do while循环,for循环跟Java基本一致。增强型for循环略有差别。

 //增强型for循环
 //java:for(数据类型 变量:数组名){}
 for(var i in array) {
 	console.log(i)//打印的还是索引
    console.log(array[i]);
 }

五、日期对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期对象</title>
</head>
<body>
    <script>
        var now = new Date;
        console.log(now);//Thu Mar 02 2023 19:48:29 GMT+0800 (GMT+08:00)
        //日期格式转换
        console.log(now.toLocaleDateString());//2023/3/2
        console.log(now.toLocaleString());//2023/3/2 19:52:14
        console.log(now.toLocaleTimeString());//19:52:14

        var year = now.getFullYear();
        var month = now.getMonth()+1;
        var date = now.getDate();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        var week = now.getDay();
        var time = year+"年"+month+"月"+date+"日 星期"+week+" "+hour+":"+minute+":"+second;
        console.log(time);//2023年3月2日 星期4 19:55:40
    </script>
</body>
</html>

六、函数对象

JavaScript函数通过function关键字进行定义

语法为:

<script>
  function functionName(参数1,参数2...){
        要执行的代码
    }
</script>

注意:
1、形参不需要类型,应为JS是弱类型语言
2、返回值也不需要定义类型,可以在函数内部直接使用return返回即可

function sum(){
    var a = 4,b = 7;
    var res = a + b;
    return res;
}

调用:函数名称(实际参数列表);

七、数组对象

Array对象用于定义数组:
在这里插入图片描述
在这里插入图片描述

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //1)创建空数组
        var array1 = new Array();

        //2)创建有长度的数组
        var array2 = new Array(5);

        //3)创建有初始值的数组
        var array3 = [2,1.23,true,"abc"];

        //获取数组的长度
        //console.log(array3.length);

        //遍历数组数据
        for (var i = 0;i < array3.length;i ++) {
            //console.log(array3[i]);
        }

        //console.log(array3[8]);

        //array3[8] = "陈微";
        //alert(array3);

        //增强型for循环
        //java:for(数据类型 变量:数组名){}
        for(var i in array3) {
            console.log(array3[i]);
        }
    </script>
</head>
<body>
    
</body>
</html>

八、数学对象

1、创建:Math对象不用创建直接使用。使用时直接调用方法,如:Math.方法名();

2、常用方法:

(1)random():返回 0 ~ 1 之间的随机数

(2)max(x,y):返回 x 和 y 中的最大值

(3)min(x,y):返回 x 和 y 中的最低值

(4)ceil(x):对数进行向上取整

(5)floor(x):对数进行向下取整

(6)round(x):把数四舍五入为最接近的整数

(7)abs(x):返回数的绝对值

3、属性:PI,圆周率

九、字符串对象

1、创建:
在这里插入图片描述
2、属性:
在这里插入图片描述

3、常用方法:
(1)是否以某个字符开头 startsWith()

(2)是否以某个字符结尾 endsWith()

(3)截取字符串

 a、substring(起始下标,结束角标)

 b、substr(起始下标,截取长度)

(4)根据某个字符拆分字符串 返回数组 split()

(5)返回指定位置的字符 charAt()

(6)检索字符串 indexOf()

十、自定义对象

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/384050.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

用C语言写一个自己的shell-Part Ⅱ--execute commands

Part Ⅱ–execute commands Exec This brings us to the exec family of functions. Namely, it has the following functions: execlexecvexecleexecveexeclpexecvp For our needs,we will use execvp whose signature looks like this int execvp(const char *file, cha…

【数据库专题】数据库Mongodb之深入认知云计算三种服务方式、mongodb特点、mongodb重要进程 mongod、mongo、其他进程区别

文章目录一、什么是云计算1. IaaS:基础设施即服务2. SaaS:软件即服务3. PaaS:平台即服务二、大数据与云计算关系三、什么是MongoDB四、大数据与MongoDB五、MongoDB特点六、安装MongoDB七、重要进程介绍7.1 mongod进程7.2 mongo进程7.3 其他进程7.3.1 mongodump重建数据库7.3.2 …

解决封号 Walmart最全申诉步骤

最近龙哥听说不少平台的账号都被封掉&#xff0c;登不上去了。所以龙哥赶紧就把这篇Walmart申诉教程提上日程&#xff0c;以防这个不时之需哈。当时Walmart的这个封号申诉规则和社交平台的还是有很大区别的&#xff0c;今天龙哥就从封号原因和申诉流程两方面展开&#xff0c;让…

210 裸机程序烧录

一、驱动安装 1.1 dnw驱动安装 禁用win10驱动程序强制签名 设置 -> 更新和安全 -> 恢复 -> 立即重启 -> 疑难解答 -> 高级选项 -> 启动设置 -> 重启 -> 按提示输入“F7”硬件设备正常上电工作&#xff0c;插入USB线连接电脑&#xff0c;设备管理器识…

源表测试软件下载安装教程

软件&#xff1a;源表测试软件NS-SourceMeter 语言&#xff1a;简体中文 环境&#xff1a;NI-VISA 安装环境&#xff1a;Win10以上版本&#xff08;特殊需求请后台私信联系客服&#xff09; 硬件要求&#xff1a;CPU2GHz 内存4G(或更高&#xff09;硬盘500G(或更高&#xf…

BGP之BGP联邦综合实验

目录 BGP联邦综合实验 实验图 网段划分 基础配置 路由配置 启动AS2中的ospf--- IGP协议 检测IGP 启动AS之间的BGP 测试 发布R1路由 修改&#xff1a;下一跳解决上述问题 解决水平分割 发布R8路由 测试 AS2内部环回路由信息互相访问 配置空接口 发布静态路由 测试…

经典蓝牙Sniff Mode

文章目录IntroductionApplicationSniff Sub-ratingReferenceIntroduction Sniff mode为两个已连接的经典蓝牙设备提供了有效的降低功耗的方法。我们知道&#xff0c;当没有数据需要传输的时候&#xff0c;两个已连接的蓝牙设备之间也需要每两个slots完成一次POLL packet - NUL…

系列九、视图/存储过程/存储函数/触发器

一、视图 1.1、概述 视图&#xff08;View&#xff09;是一种虚拟存在的表。视图中的数据并不在数据库中实际存在&#xff0c;行和列数据来自定义视图的查询中使用的表&#xff0c;并且是在使用视图时动态生成的。 通俗的讲&#xff0c;视图只保存了查询的SQL逻辑&#xff0c;…

pb插入ole控件点击insert+control时自动关闭解决办法

pb插入ole控件点击insert control时pb应用程序自动关闭解决思路 {F2F7F2A6-E582-11D1-89AC-00C04FCAF6E3} {F515306D-0156-11d2-81EA-0000F87557DB} 1、问题现象:当在powerbuilder中插入OLE控件点击insert control时,应用程序自动关闭,如图 在网上查询时有人说是其他…

深度剖析:伊朗钢铁厂入侵路径推测及对钢企数字化安全转型启示

2022年6月27日&#xff0c;名为Gonjeshke Darande的黑客组织声称对隶属于伊朗革命卫队&#xff08;IRGC&#xff09;和伊朗巴斯杰民兵组织&#xff08;Basij&#xff09;的Khouzestan、Mobarakeh、Hormozgan三家钢铁公司开展了网络攻击&#xff0c;致使Khouzestan钢铁厂一台重型…

【论文阅读】Attributed Graph Clustering with Dual Redundancy Reduction(AGC-DRR)

【论文阅读】Attributed Graph Clustering with Dual Redundancy Reduction&#xff08;AGC-DRR&#xff09; 文章目录【论文阅读】Attributed Graph Clustering with Dual Redundancy Reduction&#xff08;AGC-DRR&#xff09;1. 来源2. 动机3. 模型框架4. 方法介绍4.1 基本符…

Linux端口开通

Linux端口开开启有两种方式 firewall方式&#xff08;centos7.*&#xff09;修改iptables&#xff08;centos6.*&#xff09; 一、firewall方式 查看防火墙状态firewall-cmd --state如果返回的是 “not running”&#xff0c;那么需要先开启防火墙&#xff1b; 开启防火墙sy…

Java02 变量和运算符

Java02 变量和运算符 2.1 Java代码的基本格式 //类的定义 修饰符 class 类名{public static void main(String[] args){// 代码System.out.println("Hello World&#xff01;");} }现阶段&#xff0c;可以将一个类理解成Java程序&#xff08;.java文件&#xff09;…

html部分codewhy网课学习笔记

day1 网页显示的过程和服务器 浏览器内核,也称为渲染引擎 head标签描述网页的原数据&#xff0c;如title shifttab是向前缩进 div>ul>li可以快速生成 <div> <ul> <li></li> </ul> </div> 在早期,单标签如<input>也可写为&l…

字节前端架构组工程化代码片段

如何使用交互式的命令行工具下载项目模板 这部分代码实现了一个用户交互的 GitHub 模板下载工具。首先你需要在github上创建一个项目&#xff0c;然后使用下面介绍的代码就可以用命令行拉取到本地&#xff0c;并解压了。 它使用 enquirer 库提示用户输入仓库的创建者、名称、…

npm版本过低造成的各种问题汇总及升级方法

npm does not support Node.js 这个是因为npm和Node.js的版本不合适&#xff0c;版本对照表在这里&#xff1a;https://nodejs.org/zh-cn/download/releases/ 查看node和npm的版本&#xff1a; node -v npm -v试图装一个npm&#xff0c;结果报错&#xff1a;TypeError: Canno…

C++面向对象之多态性

文章目录C面向对象之多态性1.静态多态2.动态多态3.多态的好处3.1使用方法4.纯虚函数5.虚析构与纯虚析构5.1问题5.2解决6.其他知识点7.代码8.测试结果8.1父类中无虚函数&#xff0c;父类的指针指向子类对象&#xff0c;将调用父类中的函数&#xff0c;无法调用子类中的重写函数&…

Qt入门基础

目录 一 学习Qt的动机 二 创建第一个Qt程序 关于main.cpp QApplication Widget 关于对象树 关于Widget常用的API return a.exec() 一 学习Qt的动机 我在学习了C之后&#xff0c;想做图形化界面。实现前后端的交互。这时候就可以利用Qt进行编程。 二 创建第一个Qt程序 Qt…

【RocketMQ】消息的存储

Broker对消息的处理 BrokerController初始化的过程中&#xff0c;调用registerProcessor方法注册了处理器&#xff0c;在注册处理器的代码中可以看到创建了处理消息发送的处理器对象SendMessageProcessor&#xff0c;然后将其注册到远程服务中&#xff1a; public class Brok…

哨声吹响,与世界杯相关的欺诈也在激增

2022 年世界杯已经开始&#xff0c;通过虚假流媒体网站与彩票针对足球迷的诈骗激增。近日&#xff0c;Zscaler 发现与世界杯相关的新注册域名有所增加&#xff0c;尽管并非都是恶意的&#xff0c;也是值得警惕的。 流量趋势 随着世界杯的开赛&#xff0c;从 11 月 21 日流媒体…