Web前端学习：JaveScript基础 [简介、用法、变量及数据类型、流程控制及函数] （附源代码）_web前端java script学习文档-程序员宅基地

JavaScript是运行在浏览器端的脚本语言

JavaScript 是一种轻量级的编程语言

JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

二、JavaScript用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

引入javascript的方式

行间事件（主要用于事件）

举例：<input type="button" οnclick="alert('ok')" value="点我">

代码演示：

向HTML文件中写入一个点击事件，value="点我" 中双引号内的内容和οnclick="alert('ok')"中的ok位置的内容都可以可以修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="alert('ok')" value="点我">
</body>
</html>

运行结果如下，网页中出现一个“点我”，用鼠标进行点击，页面弹出一个提醒窗口,提醒的内容：ok

页面script插入

举例：

<script type="text/javascript">
altert('OK');
</script>

代码演示：

在head标签下写script标签中的内容，当然script标签也可以写在body标签下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--通过script标签实现-->
    <script>
        alert('ok');
    </script>
</head>
<body>

</body>
</html>

运行结果

外部引入

举例： <script type="text/javascript" src="js/index.js"></script>

src是引用文件的一个路径

代码演示：

先创建一个index.js文件，并向其中写入一个点击事件

然后在html文件中通过script标签中的src引用index.js文件中的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--通过script标签中的 src引用js文件 -->
    <script type="text/javascript" src="index.js">
    </script>
</head>
<body>

</body>
</html>

运行结果，弹出一个内容为“这是一个点击事件” 的窗口

三、JavaScript变量及数据类型

1、JavaScript变量

变量是用于存储信息的"容器"。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头

变量也能以 $ 和 _ 符号开头（不过不推荐这么做）

变量名称对大小写敏感（y 和 Y 是不同的变量）

声明javascript变量

通过 var 关键词来声明 JavaScript 变量

var name;

声明之后，变量是没有值的。赋值使用等号

var name="Halen"

2、javascript数据类型

String：字符串类型,字符串带引号，单引号或双引号

Number：数字型，包含整数型和浮点数型，2,0.2 默认为0

Boolean：布尔值类型，true或false，默认为false

Null：例：var a= null；声明了变量a为空值

Undefined：var a；声明了变量a但是没有给值，a= undefined

Object：对象由花括号分隔。属性通过(name : value) 来定义。

四、JavaScript流程控制及函数

1、流程控制

if语句

var iNum01 = 3;
var iNum02 = 5;var sTr;
if(iNumO1>iNum02)
{
    sTr ='大于';
}
else
{
    sTr = 小于';
}
alert(sTr) ;

多重if--else语句

var iNow = 1;
if( iNow==1)
{
... ;
}
else if(iNow==2)
{
... ;
}
else
{
... ;
}

for-in循环

var info={name :"joke" ,age : 23,sex : "man"};
var txt=' ';
for(x in info){
txt=txt +info[x];
}
alert(txt);

while循环

var i=1;
while(i<11){
    conso1e. 71og(i);
    i++;
}

2、函数

函数定义与执行

<script type="text/javascript">
    //函数定义
    function fnAlert(){
        alert( " hello! ");
    }
    //函数执行
    fnAlert();
</ script>

return

<script type="text/javascript">
    function fnAdd( iNum01 , iNum02){
    var iRs = iNume1 + iNum02;
    return iRs;
    alert( " here ! " );
}

var iCount = fnAdd( 3,4);
alert(iCount); //弹出7
</script>

本文链接：https://blog.csdn.net/Oh_Python/article/details/123491143

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

python post json 解析失败_python - 通过requests.post+URL上传json数据报错[Errno 111] Connection refused...-程序员宅基地

文章浏览阅读1k次。问题写了一个脚本，抓取Linux服务器信息，然后上传给Django的一个接口，脚本没有错误。print能输出正确信息，接口测试正常，Linux虚拟机操作，Django在pycharm上。脚本片段：hostinfo = {'hostname':hostname,'ip': ip,'osversion': osversion,'memory': memory,'disk': disk,'cpu_co..._pytyon post connection refused

简单记录下支付宝异步回调 notify_url 没有被调用，自己的解决方法步骤_请先配置正确的异步回调url-程序员宅基地

文章浏览阅读1.5w次，点赞2次，收藏8次。1、检查下相关配置信息是否写对，特别是异步回调地址、以及支付宝公钥（不是生成的商户应用公钥）；2、在支付成功跳转，但异步回调仍然没有被调用，没有接收到数据情况下登录蚂蚁金服开发平台查看联调日志排查https://openmonitor.alipay.com/acceptance/cloudparse.htm3、查询没看出什么问题的话就找技术客服支持帮忙查询发现是回调地址 ..._请先配置正确的异步回调url

react Cannot read properties of undefined (reading ‘forEach‘)_在react6版本中如何引入etherscannot read properties of unde-程序员宅基地

文章浏览阅读530次。。安装完开发者工具ReactDeveloperTools再运行reac项目报错。下载地址https//www.crx4chrome.com/crx/3068/只需要下载这个ReactDeveloperTools，把之前的停用就好了。项目就可以跑起来了~~_在react6版本中如何引入etherscannot read properties of undefined (reading 'fo

Android 动画 Animator 家族使用指南-程序员宅基地

文章浏览阅读1.3k次。零、前言：本文知识点ValueAnimator的认识与使用估值器TypeEvaluator的自定义与使用插值器TimeInterpolator的自定义与使用Path与Animator的结合使用ObjectAnimator的自定义与使用TimeAnimator的使用AnimatorSet动画集合的使用Animator家族的监听器介绍与使用Animator家族在xml中的使用..._animatorupdatelistener invalidate

eNSP综合实验合集（eNSP综合大作业合集）_可先收藏_ensp的无线网络技术大作业3000字-程序员宅基地

文章浏览阅读10w+次，点赞123次，收藏1.1k次。该文章对eNSP的综合实验做了一个归纳和总结，文章中包含了多个综合实验，可以自由的切换到相应的文章中进行查看_ensp的无线网络技术大作业3000字

【爬虫实战】python文本分析库——Gensim-程序员宅基地

文章浏览阅读2.1k次，点赞25次，收藏37次。Gensim 允许你使用 TF-IDF 权重和其他算法来提取文档中的关键词。当我学到一定基础，有自己的理解能力的时候，会去阅读一些前辈整理的书籍或者手写的笔记资料，这些笔记详细记载了他们对一些技术点的理解，这些理解是比较独到，可以学到不一样的思路。Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照下面的知识点去找对应的学习资源，保证自己学得较为全面。观看全面零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。_gensim

随便推点

从头开始编译安装Audacious1.32-程序员宅基地

文章浏览阅读103次。本人特好DIY，这月起开始学习Ubuntu（上个月研究了一下FC6，之所以换用Ubuntu主要问题各位使用过FC的朋友应该都知道。最主要原因是本人家里不能上网。~_~）今天我们谈谈audacious的编译安装，虽然源里面有现成的deb包，但是版本很低，用起始终感觉不爽，也许是心里作用。下面就把编译过程记录一下，以便以后参考。编译audacious可把我搞得够呛，不...

Cheat Engine 修改汇编指令_ce用空指令替换原指令-程序员宅基地

文章浏览阅读6.6k次，点赞2次，收藏9次。打开游戏扫描阳光扫描过程就不讲了找到阳光的地址显示反汇编找到使阳光减少的反汇编代码空指令替换将阳光减少汇编指令，用空指令替换，这样阳光就不再减少了 ..._ce用空指令替换原指令

9.10 中国电信it研发中心笔试编程题_中国电信计算机类试卷有编程吗-程序员宅基地

文章浏览阅读1.3w次，点赞6次，收藏37次。A 题意: 假设字符串中出现次数最少的字母是x, 出现次数为y, 删除所有出现次数为y的字符思路: 统计一下字符的出现次数, 然后照着做就行#include &amp;lt;iostream&amp;gt;#include &amp;lt;algorithm&amp;gt;#include &amp;lt;string&amp;gt;#include &amp;lt;cmath_中国电信计算机类试卷有编程吗

数据库的分类_relative database relation database-程序员宅基地

文章浏览阅读88次。关系型数据库（RDBMS：relative database manager system）特点：（1）表与表之间有关系（2）有行有列（和excel类似）（3）是通过SQL语句去操作数据库。比较有名代表：Mysql：免费，开源。Oracle：甲骨文，收费，大型公司，一年费用9位数SQL Server:微软公司，可以安装WindowsDB2非关系型数据库（no-sql）特点：（1）表与表之间没有关系（2）通过API（Java、PHP、Python代码）去操作（3）充分使_relative database relation database

RxJAVA-Single_rxjava single-程序员宅基地

文章浏览阅读960次。interface SingleObserver<T> { void onSubscribe(Disposable d); void onSuccess(T value); void onError(Throwable error);}订阅者一共三个方法可以处理。给出示例package com.netty.demo.vertx;import io.reactivex.*;import io.reactivex.disposables.Disposab._rxjava single

CSR8675的DSP学习笔记——离线调试与仿真_csr adk4.2-程序员宅基地

文章浏览阅读1.2w次，点赞2次，收藏22次。写在最前面：很多读者反馈希望可以有硬件平台配合学习。现与思度科技联合推出CSR867x学习板【淘宝链接：思度科技CSR867x学习板】，进QQ群获取激活码购买学习板享受如下优惠： 1. 价格优惠 2. 免费提供开发教程和项目源码 3. 免费提供入门级技术支持QQ群号：743434463—————————–正文分割线———————————1. 引言CSR8675的DSP..._csr adk4.2