网页制作12-html,css,javascript初认识のJavascipt脚本基础

 一、JavaScript的三种基本使用方法:body|head|外部

网页效果:

运行代码:

.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title><script>
function n1(){document.getElementById("ama01").innerHTML="NO.3这是head中的 JavaScript 函数";
}
</script>
</head><body><script>document.write("NO.1 HELLO WORLD")//Document要小写</script><p>NO.2  这是body中的JavaScript函数</p><button onclick="myFunction()">NO.2 Click me</button><p id="ama"></p>
<script>
function myFunction(){var x="";var time=new Date().getHours();if (time<20){x="Good day";}document.getElementById("ama").innerHTML=x;
}</script><p id="ama01"></p><button type="button" onclick="n1()">NO.3 Click me</button><p>NO.4 n4保存在名为"n4.js"的外部文件中</p><p id="ama04"></p><button type="button" onclick="n4()"> NO.4 Click me</button><script src="n4Script.js"></script>
</body>
</html>

.n4Script.js

// JavaScript Document
function n4()
{document.getElementById("ama04").innerHTML="NO.4 this is my 外部JavaScript";
}

二、 JavaScript的基本语法

1、写法

1)代码

document.getElementById("ama01").innerHTML=" The first one"; document.getElementById("ama02").innerHTML=" The second one";

2)代码块

function myFunction()
{
    document.getElementById("ama01").innerHTML="  The first one";
    document.getElementById("ama02").innerHTML=" The second one";
}

3)多余的空格会忽略 

4)反斜杠对代码行进行换行

5)//单行注释,/*多行注释*/

6)赋值:文本类型用双引号,数字类型不加双引号

2、输出显示语句

1)window.alert() 弹出警告框。
<body><h1>window.alert() 弹出警告框</h1>
<script>
window.alert("window.alert()");
</script>
</body>

2)document.write() 将内容写到 HTML 文档中。

3)innerHTML 写入到 HTML 元素。

上文代码已展示,此处略过……

4)console.log() 写入到浏览器的控制台。

</script>
<script>
a = 1;
b = 1;
c = a + b;
console.log(c);
</script>

1、数据类型(用typeof,可以判断数据类型)

1)值类型(基本类型)

a.字符串(String):用在单引号或者双引号

b.数字(Number):数字number:整数,小数,科学计数(123e5)

c.布尔(Boolean):两种状态true or false

d.空(Null)

e.未定义(Undefined)

f.Symbol:是 ES6 引入了一种新的原始数据类型,表示独一无二的值。

2)引用数据类型(对象类型)

对象(Object):定义一个对象{a:"a1",b:"b1",c:300}

数组(Array):定义一个数组[1,2,3,9]

函数(Function):定义一个函数,前面已举例,略过

正则(RegExp):正则表达式通常用于检查和替代 : search() 和 replace();

日期(Date):当前日期时间

<script>var a="hellow world";//字符串var b=1;//数字var c=true;//布尔型let d=null;//空值var e;//未定义var f=Symbol('unique');var alph=new Array("a","b","c");//创建数组;var g={a:"a1",b:"b1", c:5566};//创建对象;var h=Date();var str="OH,happy new year";var j=str.search(/happy/i);//正则表达式搜索a1=typeof a;b1=typeof b;c1=typeof c;d1=Object.is(d,null);e1=typeof e;f1=typeof f;document.write(a1+"</br>",b1+"<br>",c1+"<br>",d1+"<br>",e1+"<br>",f1+"<br>",alph+"<br>",g.c+"<br>",h+"<br>",j+"<br>");</script>

2、常量

  1. )整型常量:可以使用16进制八进制和十进制表示其值

  2. )实型常量:由整数部分加小数部分表示

  3. )布尔值:

  4. )字符型常量:用单引号或者双引号或起来的一个或几个字符

  5. )空值:null

3、变量:它主要作为数据的存储容器,最好对其进行声明

命名所注意的点:

  1. )只能由字母数字和下划线组成, Besides不能有空格或其他符号

  2. )不能使用JavaScript中的关键字

    NUM.grammer DESCRIPTION
    1boolean布尔值
    2break退出当前循环或标签语句
    3byte字节
    4case在switch语句中定义一个分支。
    5catch定义在try语句块执行时,一旦发生错误,就执行的代码块。
    6char字符类型
    7class
    8const声明一个只读的常量。
    9continue跳过当前循环的剩余部分,立即进行下一次循环。
    10debugger设置断点,方便调试代码
    11default在switch语句中定义默认分支。当条件不存在时使用该项
    12delete删除了一个属性
    13do与while一起使用,创建一个至少执行一次的循环。
    14double双精度浮点型
    15else与if语句一起使用,定义一个条件为假时执行的代码块。
    16enum枚举
    17export可以输出一个模块可以是变量或者方法
    18extends用来创建一个普通类或者内建对象的子类
    19final修饰用的关键词
    20finallytry-catch-finally 语句是一种用于处理异常的结构,finally 关键字可以用于 finally 块中,用于定义一些必须执行的代码
    21float解析一个字符串并返回一个浮点值
    22for创建一个循环,包含初始化表达式、条件表达式和增量表达式。
    23function函数
    24goto无条件转移语句
    25if根据指定的条件执行代码块
    26implements实现相应接口的方法
    27import导入另一个模块
    28in判断某个属性是否属于某个对象。
    29instanceof判断一个对象是否是某个类的实例。
    30int整型
    31interface将一个数值向下取整
    32let声明一个块作用域的局部变量。
    33long长整形数据
    34nativeNative关键字用于声明一个方法是由本地代码(通常是C或C++)实现的
    35new创建一个新对象
    36null空值
    37package属性是Java解释器所知道的所有包的根
    38private@ Private标签标记标识符为私有
    39protected创建使用程序函数
    40public全局变量
    41ractReact 是一个用于构建用户界面的 JAVASCRIPT 库。 React 主要用于构建 UI,很多人认为 React 是 MVC 中的 V(视图)
    42return从函数返回一个值。
    43short短整型
    44static静态变量和类变量
    45super终于调用父类
    46switch根据不同的条件执行不同的代码块。
    47synchronized实例对象锁
    48this 指向调用该方法的对象。
    49throw抛出一个异常。
    50throws将异常抛给调用者可以使程序能够继续执行下去
    51transient一种持久化对象实例的机制
    52try定义一个测试块,以测试代码块的错误
    53typeof检测变量的数据类型。
    54var赋值一个变量
    55void执行一个表达式并返回undefined。空 / 声明没有返回值
    56volatile作为指令关键字确保本条指令不会因编译器的优化而,且要求每次直接读值
    57while当循环
    58with设置代码在特定对象中的作用域
    59FALSE不符合
    60TRUE符合
  3. )最好把变量意义与其代表意思对应

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

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

相关文章

全面对比分析:HDMI、DP、DVI、VGA、Type-C、SDI视频接口特点详解

在当今的多媒体时代&#xff0c;视频接口的选择对于设备连接和显示效果至关重要。不同的视频接口在传输质量、兼容性、带宽等方面各有优劣。本文将全面对比分析常用的视频接口HDMI、DP、DVI、VGA、Type-C、SDI&#xff0c;帮助读者更好地理解它们的特点和适用场景。 一、HDMI&…

麒麟服务器操作系统PostgreSQL环境部署手册

软件简介 PostgreSQL 是一个免费的对象-关系数据库服务器(ORDBMS),在灵活的BSD许可证下发行。 ORDBMS(对象关系数据库系统)是面向对象技术与传统的关系数据库相结合的产物,查询处理是 ORDBMS 的重要组成部分,它的性能优劣将直接影响到DBMS 的性能。 软件环境 操作系统…

【蓝桥杯速成】| 4.递归

递归 题目一&#xff1a;最大公约数 问题描述 1979. 找出数组的最大公约数 - 力扣&#xff08;LeetCode&#xff09; 给你一个整数数组 nums &#xff0c;返回数组中最大数和最小数的 最大公约数 。 两个数的 最大公约数 是能够被两个数整除的最大正整数。 解题步骤 需要…

当大模型训练遇上“双向飙车”:DeepSeek开源周 DualPipe解析指南

前言 在大模型训练中&#xff0c;传统流水线并行因单向数据流和通信延迟的限制&#xff0c;导致GPU利用率不足60%&#xff0c;成为算力瓶颈。DeepSeek团队提出的DualPipe双向流水线架构&#xff0c;通过双向计算流与计算-通信重叠的创新设计&#xff0c;将前向与反向传播拆解为…

蓝桥杯好题推荐---前缀和

&#x1f308;个人主页&#xff1a; 羽晨同学-CSDN博客 &#x1f4ab;个人格言:“成为自己未来的主人~” 题目链接 【模板】前缀和https://ac.nowcoder.com/acm/problem/226282 解题思路 这种题目是要求我们找到一个数组中从l到r的元素的和&#xff0c;查询Q次&#xff0c;…

Nginx快速上手

什么是nginx Nginx 是一款开源的高性能 HTTP 和反向代理服务器&#xff0c;同时也提供了 IMAP/POP3/SMTP 代理功能。它由俄罗斯程序员 Igor Sysoev 于2004年首次发布&#xff0c;最初设计目的是为了解决 C10k 问题&#xff0c;即如何让单台服务器同时处理1万个并发连接的问题。…

【C++】:STL详解 —— 布隆过滤器

目录 布隆过滤器的概念 布隆过滤器的优点 布隆过滤器的缺点 布隆过滤器使用场景 布隆过滤器的实现 布隆过滤器的概念 布隆过滤器&#xff08;Bloom Filter&#xff09; 是一种空间效率极高的概率型数据结构&#xff0c;用于快速判断一个元素是否属于某个集合。其核心特点…

从Instagram到画廊:社交平台如何改变艺术家的展示方式

从Instagram到画廊&#xff1a;社交平台如何改变艺术家的展示方式 在数字时代&#xff0c;艺术家的展示方式正在经历一场革命。社交平台&#xff0c;尤其是Instagram&#xff0c;已经成为艺术家展示作品、与观众互动和建立品牌的重要渠道。本文将探讨社交平台如何改变艺术家的…

MySQL(事物上)

目录 示例&#xff1a; 一 引入事物 1. 概念 2. 事物的4大特性 3. 为什么要有事物&#xff1f; 二 事物操作 1. 查看存储引擎支持的事物 2. 事物的提交方式 2.1 查看事物的默认提交方式 2.2 设置事物的默认提交方式 2.3 查看事物的全局隔离级别 2.4 验证事物的回滚…

Spring Boot 实现多数据源配置

一、配置流程 在 Spring Boot 中实现多数据源配置通常用于需要连接多个数据库的场景。主要有以下几个步骤&#xff1a; 配置多个数据源的连接信息。定义多个数据源的 Bean。为每个数据源配置MyBatis的SqlSessionFactory和事务管理器。为每个数据源定义Mapper接口和Mapper XML…

p5.js:绘制各种内置的几何体,能旋转

向 豆包 提问&#xff1a;请编写 p5.js 示例&#xff0c; 绘制各种内置的几何体&#xff0c;能让这些几何体缓慢旋转。 cd p5-demo copy .\node_modules\p5\lib\p5.min.js . 此代码创建了一个包含多个内置几何体的 3D 场景&#xff0c;每个几何体都有不同的颜色和位置。运行代…

结构体定义与应用

引言 到今天为止,c语言的基础操作和基础数据类型,就都已经结束了,大家都知道,如果要实现复杂的功能,大家都可以通过函数封装调用,那么如果要实现基础数据类型的封装,该怎么办呢?答案就是结构体。 在C语言编程中,结构体(struct)是非常重要的一个概念,它为程序员提供…

MindGYM:一个用于增强视觉-语言模型推理能力的合成数据集框架,通过生成自挑战问题来提升模型的多跳推理能力。

2025-03-13&#xff0c;由中山大学和阿里巴巴集团的研究团队提出了MindGYM框架&#xff0c;通过合成自挑战问题来增强视觉-语言模型&#xff08;VLMs&#xff09;的推理能力。MindGYM框架通过生成多跳推理问题和结构化课程训练&#xff0c;显著提升了模型在推理深度和广度上的表…

R语言零基础系列教程-01-R语言初识与学习路线

代码、讲义、软件回复【R语言01】获取。 R语言初识 R是一个开放的统计编程环境&#xff0c;是一门用于统计计算和作图的语言。“一切皆是对象”&#xff0c;数据、函数、运算符、环境等等都是对象。易学&#xff0c;代码像伪代码一样简洁&#xff0c;可读性高强大的统计和可视…

PythonWeb开发框架—Flask-APScheduler超详细使用讲解

1.定时任务的两种实现方式 1.1 用scheduler.task装饰任务 安装插件&#xff1a; pip install Flask-APScheduler pip install apscheduler 脚本实现&#xff1a; ###app.py##导入依赖库 from flask import Flask import datetime import config from flask_apscheduler i…

python_巨潮年报pdf下载

目录 前置&#xff1a; 步骤&#xff1a; step one: pip安装必要包&#xff0c;获取年报url列表 step two: 将查看url列表转换为pdf url step three: 多进程下载pdf 前置&#xff1a; 1 了解一些股票的基本面需要看历年年报&#xff0c;在巨潮一个个下载比较费时间&…

从0到1构建AI深度学习视频分析系统--基于YOLO 目标检测的动作序列检查系统:(2)消息队列与消息中间件

文章大纲 原始视频队列Python 内存视频缓存优化方案(4GB 以内)一、核心参数设计二、内存管理实现三、性能优化策略四、内存占用验证五、高级优化技巧六、部署建议检测结果队列YOLO检测结果队列技术方案一、技术选型矩阵二、核心实现代码三、性能优化策略四、可视化方案对比五…

React Native 如何使用 Expo 快速开发?

React Native是当下热门的跨平台移动开发框架&#xff0c;而Expo则是它的重要开发工具之一。Expo提供了一套完整的开发环境&#xff0c;使开发者无需安装Android Studio或Xcode也能快速运行React Native项目。它包含了众多内置API&#xff0c;如相机、地理位置、推送通知等&…

中考英语之09从句

1 宾语从句 定义 在主从复合句中充当宾语&#xff0c;位于及物动词、介词或复合谓语之后的从句。 引导词 综述&#xff1a; that&#xff08;可省略&#xff09;、if/whether、连接代词&#xff08;what、which、who、whom、whose 等&#xff09;和连接副词&#xff08;when、…

平方矩阵问题

Ⅰ 回字形二维数组 #include <iostream> #include <iomanip> using namespace std; int main(){int n;while(cin>>n,n){for(int i0; i<n;i){for(int j0; j<n; j){int upi, downn-i1, leftj, rightn-j1;cout<<min(min(up,down),min(left,right)…