javaweb入门4之javascript入门一

简介: javascript入门一简介用法输出语法变量和数据类型 数据类型var和let的区别循环和条件语句

javascript入门一


简介


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


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


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


JavaScript 很容易学习。


js是弱类型语言。


这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。


用法


1.HTML 中的脚本必须位于 <script> 与 </script>标签之间。脚本可被放置在 HTML 页面的 和 部分中。


2.<script> 标签

如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签


<script> 标签用于定义客户端脚本,比如 JavaScript。
script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。


实列


<script type="text/javascript">
alert("Hello World!")
</script>


ffbf2c0e4ec64604a88c8e94ce9fb2d4.png


输出


JavaScript 可以通过不同的方式来输出数据:

使用 window.alert() 弹出警告框。其中windows可以省略.

acb0bf56e2d4488293a29e4c85b6cd02.png


使用 document.write() 方法将内容写到 HTML 文档中


使用 innerHTML 写入到 HTML 元素


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">//设置编码。防止乱码
    <title></title>
  </head>
<body>
  <h1>我的第一个 Web 页面</h1>
  <p id="d1">你好,世界</p>
  <script>//这个标签可以写在body也可以写在head
  //document.getElementById("d1").innerHTML = "我是笑霸final。";
  //这里是一个注释
  </script>
</body>
</html>


6d91fd526a854936b277d38fa2803647.png


我们打开注释后:


74c673d8f78544ac8859641a8177e555.png



使用 console.log() 写入到浏览器的控制台


c78a2a30ad854dcb9b9b2488d560986b.png

语法


JavaScript 字母大小写


JavaScript 对大小写是敏感的。


当编写 JavaScript 语句时,请留意是否关闭大小写切换键。


函数 getElementById 与 getElementbyID 是不同的。


同样,变量 myVariable 与 MyVariable 也是不同的。


浅识关键字

09564bf6611d4d25bd15fc62cb72c63e.png


1.数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。


2.字符串(String)字面量 可以使用单引号或双引号:


3.数组(Array)字面量 定义一个数组:


函数:用function来定义


function myFunction(a, b) {
    return a + b;                      
}


注意:JavaScript 中,常见的是驼峰法的命名规则,如myFunction (而不是lmyfunction)。


变量和数据类型 数据类型


1.大小写敏感


2.变量必须以字母开头


3.变量也能以 $ 和 _ 符号开头(不推荐)


3.JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型



值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。


引用数据类型:对象(Object)、数组(Array)、函数(Function)。


声明变量使用var和let


var me = '笑霸final';//这里me就是字符串型
var me = 1;//这里me就是number

var和let的区别


1.全局作用域:但是,被let声明的变量不会作为全局对象window的属性,而被var声明的变量却可以。


2.函数作用域


var 和 let 在函数作用域中声明一个变量,两个变量的意义是相同的。


3.块作用域:在块作用域中两者的区别较为明显, let只在for()循环中可用,而 var是对于包围for循环的整个函数可用


function  aFun1(){
    // i 对于for循环外的范围是不可见的(i is not defined)
    for(let i = 1; i<5; i++){
        //  i只有在这里是可见的
    }
    // i 对于for循环外的范围是不可见的(i is not defined)
}
function aFun2(){
    // i 对于for循环外的范围是可见的
    for(var i = 1;i<5; i++){
        // i 在for 在整个函数体内都是可见的
    }
    // i 对于for循环外的范围是可见的
}


4.let 和var 重新声明:var允许在同一作用域中声明同名的变量,而let不可以


循环和条件语句


条件语句:用法和java c一样!!!!!


if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码


if…else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码


if…else if…else 语句- 使用该语句来选择多个代码块之一来执行


switch 语句 - 使用该语句来选择多个代码块之一来执行


循环:


类型


1.for - 循环代码块一定的次数


2.for/in - 循环遍历对象的属性


3.while - 当指定的条件为 true 时循环指定的代码块


4.do/while - 同样当指定的条件为 true 时循环指定的代码块


var person={属性1:"笑霸fianl",属性2:"hahaha",属性3:100}; 
    for (x in person)  // x 为属性名
    {
       alert(x+person[x]);
    }


浏览器就会循环弹出属性

aab23a9ef2bd4281bd0330531cc34ae3.png3f08853935b94551a5c1a16bcca94a65.png0874f358f29948809c04bb42903e1913.png

目录
相关文章
|
1月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
255 2
|
13天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
13天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
20 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
21天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
56 10
|
19天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
2月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
1月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
1月前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
22 1
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
435 1
|
1月前
|
Web App开发 JavaScript 前端开发
JavaWeb 22.Node.js_简介和安装
JavaWeb 22.Node.js_简介和安装