百度360必应搜狗淘宝本站头条
docker systemdzabbix微信报警脚本loadjsqt5.5pagination.js
当前位置：网站首页 > 技术教程 > 正文

javaScript-第一章 javascriptja

suiw9 2024-11-09 14:50 20 浏览 0 评论

一、javaScript介绍

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言

(客户端语言)

JavaScript特点

向HTML页面中添加交互行为

脚本语言，语法和Java类似

解释性语言，边解释边执行


JavaScript组成：ECMAScript 、DOM、BOM

基本结构：

<script type="text/javascript">

<!—

JavaScript 语句;

—>

</script >

示例：

……

<title>初学JavaScript</title>

</head>

<body>

<script type="text/javascript">

document.write("初学JavaScript");

document.write("<h1>Hello，JavaScript</h1>");

</script>

</body>

</html>

注：<script>…</script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可

执行原理：


外部JS文件：

<script src="export.js" type="text/javascript"></script>

直接在HTML标签中使用：

<input name="btn" type="button" value="弹出消息框"

onclick="javascript:alert('欢迎你');"/>


二、基本常见语法：

1、核心语法：同时声明和赋值变量

var catName= "皮皮";

2、数据类型：

undefined:var width;

变量width没有初始值，将被赋予值undefined;

null:表示一个空值，与undefined值相等；

number：var iNum=23; //整数

var iNum=23.0; //浮点数

boolean:true 和false;

string:一组被引号（单引号或双引号）括起来的文本

var string1="This is a string";

3、typeof运算符：

typeof检测变量的返回值

typeof运算符返回值如下函数

undefined：变量被声明后，但未被赋值

string：用单引号或双引号来声明的字符串

boolean：true或false

number：整数或浮点数

object：javascript中的对象、数组和nul

4、String对象：


5、数组：


数组的常用属性和方法

类别 名称 描述

属性 length 设置或返回数组中元素的数目

方法 join( ) 把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔

sort() 对数组排序

push() 向数组末尾添加一个或更多 元素，并返回新的长度


6、逻辑控制语句：

if(条件)

{

//JavaScript代码;

}

else

{

//JavaScript代码;

}

switch (表达式)

{ case 常量1 :

JavaScript语句1;

break;

case 常量2 :

JavaScript语句2;

break;

...

default :

JavaScript语句3;

}

for(初始化; 条件; 增量)

{

JavaScript代码; }


while(条件)

{

JavaScript代码;

}

break ，continue 用法示例：

<script type="text/javascript">

var i=0;

for(i=0;i<=5;i++){

if(i==3){

continue;

}

document.write("这个数字是："+i+"<br/>");

}

</script>

7、常用的输入/输出

alert("提示信息");


prompt("提示信息", "输入框的默认信息");

prompt("请输入你喜欢的颜色","红色");

prompt("请输入你喜欢的颜色","");


三、常用系统函数

parseInt ("字符串")

将字符串转换为整型数字

如: parseInt ("86")将字符串“86“转换为整型值86

parseFloat("字符串")

将字符串转换为浮点型数字

如: parseFloat("34.45")将字符串“34.45“转换为浮点值34.45

isNaN()

用于检查其参数是否是非数字


定义函数：

function 函数名( ){

//JavaScript语句

[return 返回值]

}

调用无参函数

<input name="btn" type="button"

value="显示5次欢迎学习JavaScript" onclick="study( )" />


function study( ){

for(var i=0;i<5;i++){

document.write("<h4>欢迎学习JavaScript</h4>");

}

}

事件：

名称说明

onload一个页面或一幅图像完成加载

onclick鼠标单击某个对象

onmouseover鼠标指导移到某元素上

onkeydown某个键盘按键被按下

onchange域的内容被改变


四、代码示例：

九九乘法表编写：

<html>

<head>

<title>九九乘法表</title>

</head>

<script src="../js/multiplication.js"></script>

<body>

<form action="#">

<input type="button" value="点击观看九九乘法表" onclick="table()">

</form>

</body>

</html>


// 九九乘法表方法

function table(){

for(var i=1;i<=9;i++){

for(var j=1;j<=i;j++){

document.write(i+"*"+j+"="+j*i+"&nbsp;&nbsp;&nbsp;&nbsp;");

}

document.write("<br/>");

}

}

示例2：统计科目成绩总和

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>科目总成绩</title>

<script src="js/subject.js"></script>

</head>

<!-- 页面加载时间onlioad（页面加载完后显示的资源） -->

<body onload="course();">

<form action="#">

<input type="button" value="点击计算科目成绩总和" onclick="course()">

</form>

</body>

</html>

// 第一种做法：

// function course() {

// var java = parseInt(prompt('请输入JAVA科目成绩：'));

// var html = parseInt(prompt('请输入html科目成绩：'));

// var css = parseInt(prompt('请输入css科目成绩：'));

// var js = parseInt(prompt('请输入js科目成绩：'));

// sum = java + html + css + js;

// // 第一种做法

// if( 0<java&&java<=100 && 0<html&&html<=100 && 0<css&&css<=100 && 0<js&&js<=100){

// document.write("四门课的成绩总成绩为："+sum);

// }else{

// document.write("您输入的数字不符合规范")

// }


// // 第二种做法

// // if (isNaN(java) || isNaN(html) || isNaN(css) || isNaN(js)) {

// // document.write("您输入的数字不符合规范");

// // } else {

// // document.write("四门课的成绩总成绩为：" + sum);

// // }

// }


// // 第二种做法：

// function course() {

// var java = +prompt('请输入JAVA科目成绩：');

// var html = +prompt('请输入html科目成绩：');

// var css = +prompt('请输入css科目成绩：');

// var js = +prompt('请输入js科目成绩：');

// sum = java + html + css + js;

// if( 0<java&&java<=100 && 0<html&&html<=100 && 0<css&&css<=100 && 0<js&&js<=100){

// document.write("四门课的成绩总成绩为："+sum);

// }else{

// document.write("您输入的数字不符合规范")

// }




// }




// 统计考试科目成绩

function course() {

var num = parseInt(prompt("请输入有几门考试科目："));

if (!notZeroNotNegative(num)) {

return;

}

let count = 0;

for (let i = 0; i < num; i++) {

let score = parseInt(prompt("请输入第" + (i + 1) + "门课的成绩：", ""));

if (!notNegative(score)) {

return;

}

count += score;

}

alert(num + "门科目的总成绩是：" + count);

}


//判断接受是否是非零、非负数

function notZeroNotNegative(num) {

if (isNaN(num)) {

alert("输入的必须是数字！");

return false;

}

return true;

}



// 判断科目成绩是否是非零、非负数

function notNegative(score) {

if (isNaN(score)) {

alert("输入的必须是数字！");

return false;

}

if (score < 0) {

alert("输入的必须是非负数");

return false;

}

return true;

}

相关推荐

5款Syslog集中系统日志常用工具对比推荐

一、为何要集中管理Syslog？Syslog由Linux/Unix系统及其他网络设备生成，广泛分布于整个网络。因其包含关键信息，可用于识别网络中的恶意活动，所以必须对其进行持续监控。将Sys...

跨平台、多数据库支持的开源数据库管理工具——DBeaver

简介今天给大家推荐一个开源的数据库管理工具——DBeaver。它支持多种数据库系统，包括Mysql、Oracle、PostgreSQL、SLQLite、SQLServer等。DBeaver的界面友好...

强烈推荐!数据库管理工具:Navicat Premium 16.3.2 (64位)

NavicatPremium，一款集数据迁移、数据库管理、SQL/查询编辑、智能设计、高效协作于一体的全能数据库开发工具。无论你是MySQL、MariaDB、MongoDB、SQLServer、O...

3 年 Java 程序员还玩不转 MongoDB，网友:失望

一、什么场景使用MongoDB？...

拯救MongoDB管理员的GUI工具大赏:从菜鸟到极客的生存指南

作为一名在NoSQL丛林中披荆斩棘的数据猎人，没有比GUI工具更称手的瑞士军刀了。本文将带你围观五款主流MongoDB管理神器的特性与暗坑，附赠精准到扎心的吐槽指南一、MongoDBCompass：...

mongodb/redis/neo4j 如何自己打造一个 web 数据库可视化客户端?

前言最近在做neo4j相关的同步处理，因为产线的可视化工具短暂不可用，发现写起来各种脚本非常麻烦。...

solidworks使用心得，纯干货!建议大家收藏

SolidWorks常见问题...

统一规约-关乎数字化的真正实现（规范统一性）

尽管数字化转型的浪潮如此深入人心，但是，对于OPCUA和TSN的了解却又甚少，这难免让人质疑其可实现性，因为，如果缺乏统一的语义互操作规范，以及更为具有广泛适用的网络与通信，则数字化实际上几乎难以具...

Elasticsearch节点角色配置详解(Node)

本篇文章将介绍如下内容：节点角色简介...

产前母婴用品分享 篇一:我的母婴购物清单及单品推荐

作者：DaisyH8746在张大妈上已经混迹很久了，有事没事看看“什么值得买”已渐渐成了一种生活习惯，然而却从来没有想过自己要写篇文章发布上来，直到由于我产前功课做得“太过认真”（认真到都有点过了，...

比任何人都光彩照人的假期!水润、紧致的肌肤护理程序

图片来源：谜尚愉快的假期临近了。身心振奋的休假季节。但是不能因为这种心情而失去珍贵的东西，那就是皮肤健康。炙热的阳光和强烈的紫外线是使我们皮肤老化的主犯。因此，如果怀着快乐的心情对皮肤置之不理，就会使...

Arm发布Armv9边缘AI计算平台，支持运行超10亿参数端侧AI模型

中关村在线2月27日消息，Arm正式发布Armv9边缘人工智能（AI）计算平台。据悉，该平台以全新的ArmCortex-A320CPU和领先的边缘AI加速器ArmEthos-U85NPU为核心...

柔性——面向大规模定制生产的数字化实现的基本特征

大规模定制生产模式的核心是柔性，尤其是体现在其对定制的要求方面。既然是定制，并且是大规模的定制，对于制造系统的柔性以及借助于数字化手段实现的柔性，就提出了更高的要求。面向大规模定制生产的数字化业务管控...

创建PLC内部标准——企业前进的道路

作者：FrankBurger...

标准化编程之 ----------- 西门子LPMLV30测试总结

PackML乃是由OMAC开发且被ISA所采用的自动化标准TR88.00.02，能够更为便捷地传输与检索一致的机器数据。PackML的主要宗旨在于于整个工厂车间倡导通用的“外观和感觉”，...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.