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

server/2025/3/16 11:28:58/

 一、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">// 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):当前日期时间

javascript"><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.ppmy.cn/server/175410.html

相关文章

Vue3中 ref 与 reactive区别

ref 用途: ref 通常用于创建一个响应式的基本类型数据&#xff08;如 string、number、boolean 等&#xff09;&#xff0c;但它也可以用于对象或数组 返回值: ref 返回一个带有 .value 属性的对象&#xff0c;访问或修改数据需要通过 .value 进行 使用场景: …

让 Deepseek 写一个计算器(网页)

完整代码 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>简单计算器</title><style&…

全概公式和贝叶斯公式

条件概率的概念 引例 如果同时掷两枚质地均匀的硬币&#xff0c;共有四种可能的情况&#xff0c;于是我们可得 Ω{&#xff08;正&#xff0c;正&#xff09;​&#xff0c;​&#xff08;正&#xff0c;反&#xff09;​&#xff0c;​&#xff08;反&#xff0c;正&#x…

【商城实战(33)】解锁版本迭代与更新策略

【商城实战】专栏重磅来袭&#xff01;这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建&#xff0c;运用 uniapp、Element Plus、SpringBoot 搭建商城框架&#xff0c;到用户、商品、订单等核心模块开发&#xff0c;再到性能优化、安全加固、多端适配&#xf…

Unity AssetBundles资源加载管理器

Unity AssetBundles资源加载管理器 实现了AB包管理器 目的: 让外部更方便地进行资源加载(同步加载/异步加载) 技术包含&#xff1a; AB包相关API单例模式委托(Lambda)表达式协程字典 AssetBundles工具下载地址 using System.Collections; using System.Collections.Generic;…

如何用C#编写一个可以验证登录信息的简单登录页面?

要用C#编写一个简单的登录页面&#xff0c;可以按照以下步骤进行&#xff1a; 创建一个新的C#控制台应用程序项目。 创建一个名为Login.cs的类&#xff0c;该类包含用户名和密码作为属性。 class Login {public string Username { get; set; }public string Password { get;…

【Java基础】java中的lambda表达式

Java Lambda表达式深度解析&#xff1a;语法、简化规则与实战 前言 Java 8的Lambda表达式通过简化匿名内部类和引入函数式编程&#xff0c;极大提升了代码的简洁性和可读性。 一、Lambda表达式的核心语法 Lambda表达式由参数列表、->符号和表达式主体组成&#xff0c;其基…

基于YOLOv8深度学习的PCB缺陷检测识别系统【python源码+GUI界面+数据集+训练代码】

目录 一、界面功能展示 二、前言摘要 三、GUI界面演示 &#xff08;一&#xff09;用户加载自定义模型 &#xff08;二&#xff09;单张图像检测 &#xff08;三&#xff09;检测图像文件夹 &#xff08;四&#xff09;检测视频 &#xff08;五&#xff09;保存 四、模…