JS入门学习

JS引入方式

内部引入

内部脚本:将JS代码定义在HTML页面中

  • JavaScript代码必须位于<script></script>标签之间
  • 在HTML文档中,可以在任意地方,放置任意数量的<script>
  • 可以放在HTML文件的任意位置,一般会把脚本置于<body>元素的底部,可改善显示速度
    <!-- 内部脚本 --><script>alert('Hello JS');</script>

外部引入

外部脚本:将JS代码定义在外部JS文件中,然后引入到 HTML页面中

  • 外部JS文件中,只包含JS代码,不包含<script>标签
  • <script>标签不能自闭合
    <!-- 外部脚本 --><script src="JS/Demo.js"></script>

书写语法


  • 区分大小写:与Java 一样,变量名、函数名以及其他一切东西都是区分大小写的
  • 每行结尾的分号可有可无
  • 注释:
    • 单行注释://注释内容
    • 多行注释:/* 注释内容 */
  • 大括号表示代码块

变量

  • JavaScript 中用 var 关键字(variable 的缩写)来声明变量
  • JavaScript 是一门弱类型语言,变量可以存放不同类型的值
  • 变量名需要遵循如下规则:
    • 组成字符可以是任何字母、数字、下划线()或美元符号($)
    • 数字不能开头
    • 建议使用驼峰命名

注意事项

  • ECMAScriot6 新增了let 关键字来定义变量。它的用法类似于 var,但是所声明的变量,只在let 关键字所在的代码块内有效,且不允许重复声明。
  • ECMAScript6 新增了 cofst 关键字,用来声明一个只读的常量。一旦声明,常量的值就不能改变。

数据类型

JavaScript中分为:原始类型和引用类型。

原始类型

  • number:数字(整数、小数、NaN(Not aNumber))
  • string:字符串,单双引皆可
  • boolean:布尔。true,false
  • nul:对象为空
  • undefined:当声明的变量未初始化时,该变量的默认值是 undefined

使用 typeof运算符可以获取数据类型

运算符

运算符

  • 算术运算符:+,-,*,/,%,++,--
  • 赋值运算符:=,+=,-=,*=,/=,%=
  • 比较运算符:>,<,>=,<=,!=,==,===
  • 逻辑运算符:&&,|| ,!
  • 三元运算符:条件表达式?true_value:false_value

=与===

==会进行类型转换,===不会进行类型转换

// ==   会进行类型转换
// ===  不会进行了类型转换alert(age == _age);  //true
alert(age === _age);  //false
alert(age === $age);  //true

 类型转换

  • 字符串类型转为数字:
    • 将字符串字面值转为数字。如果字面值不是数字,则转为NaN。
  • 其他类型转为boolean:
    • Number:0和NaN为false,其他均转为true.
    • String:空字符串为false,其他均转为true。
    • Null和 undefined:均转为false。
// 类型转换
alert(parseInt("123"));  //123
alert(parseInt("12A23"));  //12
alert(parseInt("A123"));  //NaN

 函数

可以传很多参数,但是只接受需要的前几个

// 定义方法一
function add(a, b) {return a + b;
}// 定义方法二
var add = function (a, b) {return a + b;
}var res = add(10, 20);
alert(res);

对象

Array

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS对象-array</title><script>// 定义数组// var arr = new Array(1,2,3,4);// var arr = [1,2,3,4];// console.log(arr[1]);// console.log(arr[3]);// arr[10] = 100;// console.log(arr[10]);// arr[5] = "A";// console.log(arr);var arr = new Array(1, 2, 3, 4);arr[10] = 40;// 数组遍历//  for 是直接全部遍历for (let i = 0; i < arr.length; i++) {console.log(arr[i]);}// forEach遍历有值的数据// arr.forEach(function (e) {//     console.log(e);// })console.log("=====================");arr.forEach(e => {console.log(e);});// 尾插数据arr.push(7, 8, 9);console.log(arr);// 删除数据arr.splice(2, 2);console.log(arr);</script>
</head><body></body></html>

 String

 JSON

JSON-基础语法

定义

var 变量名 ='{"key1":value1,"key2":value2}';

 JSON字符串转为JS对象

var jsobiect =JSON.parse(userstr);

JS对象转为JSON字符串

var jsonstr =JSON.stringify(jsobject):

value的数据类型 :

  • 数字(整数或者是浮点数)
  • 字符串(在双引号中)
  • 逻辑值(true或false)
  • 数组(在方括号中)
  • 对象(在花括号中)
  • null

Location

介绍:地址栏对象。
获取:使用 window.location 获取,其中window.可以省略

属性:
href:设置或返回完整的URL

    alert(location.href);location.href="https://www.w3school.com.cn/";

DOM

获取元素的方法

    // 获取元素-根据ID获取var div = document.getElementById('h1');alert(div);// 获取元素-根据标签获取- divvar divs = document.getElementsByTagName('div');for (let i = 0; i < divs.length; i++) {alert(divs[i]); }// 获取元素-根据name属性获取var ins = document.getElementsByName('hobby');for (let i = 0; i < ins.length; i++) {alert(ins[i]); }// 获取元素-根据class属性获取var divs = document.getElementsByClassName('cls');for (let i = 0; i < divs.length; i++) {alert(divs[i]); }

 详细操作看文档

 Vue

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue初学习</title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
</head><body><div id="app"><input type="text" v-model="message">{{ message}}</div>
</body>
<script>new new Vue({el: "#app", //Vue接管的区域data: {message: "Hello Vue"}})
</script></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue初学习</title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
</head><body><div id="app"><a :href="URL">链接1</a><a v-bind:href="URL">链接2</a><input type="text" v-model="URL"></div>
</body>
<script>new Vue({el: "#app", //Vue接管的区域data: {URL :"http://www.baidu.com"}})
</script></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue指令学习</title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
</head><body><div id="app"><input type="button" value="button1" v-on:click="handle1()"><input type="button" value="button2" @click="handle2()"></div>
</body>
<script>new Vue({el: "#app", //Vue接管的区域data: {},methods: {handle1: function () {alert("button1");},handle2: function () {alert("button2");}},})
</script></html>

小案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue案例</title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
</head><body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><tr align="center" v-for="(user, index) in users" ><td>{{index}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td><span v-if="user.gender == 1">男</span><span v-if="user.gender == 2">女</span></td><td>{{user.score}}</td><td><span v-if="user.score >=90">优秀</span><span v-else-if="user.score>=60 ">及格</span><span style="color: red;" v-else>不及格</span></td></tr></table></div>
</body><script>new Vue({el: "#app", //Vue接管的区域data: {users:[{name:"Tom",age:20,gender:1,score:78},{name:"Rose",age:20,gender:2,score:68},{name:"Jerry",age:20,gender:1,score:90},{name:"Der",age:20,gender:1,score:50}]}})
</script></html>

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

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

相关文章

红酒与节日装饰:打造节日氛围的需备品

随着节日的脚步渐渐临近&#xff0c;节日的氛围也愈发浓厚。在这个特殊的时刻&#xff0c;红酒与节日装饰无疑成为了营造节日氛围的需备品。洒派红酒&#xff08;Bold & Generous&#xff09;作为定制红酒的品牌&#xff0c;其不同的韵味与节日装饰的精致整合&#xff0c;共…

通过域名和HTTPS上线MSF

使用受信任证书的Meterpreter载荷 现在大多数安全解决方案还会通过分析进出目标机器的流量来进行网络入侵检测。在这种情况下&#xff0c;很可能即使使用编码器绕过了防病毒软件&#xff0c;但有效载荷也会在尝试连接到我们的侦听器时被捕获和拦截。 # 准备工作 首先需要准备…

SpringBoot + Hadoop + HDFS + Vue 实现一个简单的文件管理系统

1. 安装前的准备工作 1.1 更新系统并安装必要的工具 在终端中运行以下命令&#xff1a; sudo apt-get update sudo apt-get install -y ssh rsync curl1.2 安装 Java 如果系统中没有安装 Java&#xff0c;可以通过以下命令安装 OpenJDK&#xff1a; sudo apt-get install …

基于ESP32的智能门锁系统测试

项目介绍 基于ESP32的智能门锁系统。可以运用在商务办公、家用住宅、酒店以及公租房短租公寓等领域。基于esp32的智能门锁系统是生物识别技术和嵌入式系统技术的完美结合&#xff0c;基于ESP32系统进行开发&#xff0c;同时在云端服务器搭建了MQTT服务器并连接开源的家庭自动化…

工商业和户用光伏区别及怎样运维

工商业光伏系统和户用光伏系统在设计、安装和运维方面存在一些显著的区别。首先&#xff0c;工商业光伏系统通常安装在工厂、办公楼、商场等大型建筑物的屋顶或空地上&#xff0c;而户用光伏系统则主要安装在居民住宅的屋顶上。工商业光伏系统的规模一般较大&#xff0c;发电量…

Unity | AmplifyShaderEditor插件基础(第二集:模版说明)

目录 一、前言 二、核心模版和URP模版 1.区别介绍 2.自己的模版 三、输出节点 1.界面 2.打开OutPut 3.ShderType 4.ShaderName 5.Shader大块内容 6.修改内容 四、预告 一、前言 内容全部基于以下链接基础以上讲的。 Unity | Shader基础知识&#xff08;什么是shader…

Android 实现动态换行显示的 TextView 列表

在开发 Android 应用程序时&#xff0c;我们经常需要在标题栏中显示多个 TextView&#xff0c;而这些 TextView 的内容长度可能不一致。如果一行内容过长&#xff0c;我们希望它们能自动换行&#xff1b;如果一行占不满屏幕宽度&#xff0c;则保持在一行内。本文将带我们一步步…

仅12%程序员担心被AI取代 62%开发者在使用AI工具

**根据Stack Overflow近日发布的2024年开发者调查报告&#xff0c;只有12%的开发者认为AI威胁到了他们当前的工作&#xff0c;而高达70%的受访者已经将AI工具整合到了自己的工作流程中。**该调查共有超过6.5万名开发者参与&#xff0c;结果显示&#xff0c;使用AI工具的开发者比…

Java知识点一——列表、表格与媒体元素

显示表格边框&#xff1a;<table border"1"></table> 因为初始的表格是没有边框的 collapse相邻的单元格共用同一条边框&#xff08;采用 collapsed-border 表格渲染模型&#xff09;。 separate默认值。每个单元格拥有独立的边框&#xff08;采用 sep…

什么是实时数据仓库? 优势与最佳实践

在当今数据驱动的世界中&#xff0c;许多企业使用实时数据仓库来满足其分析和商业智能 (BI) 需求。这使他们能够做出更好的决策、推动增长并为客户提供价值。 数据仓库是一种数据存储和管理系统&#xff0c;其设计目标只有一个&#xff1a;管理和分析数据&#xff0c;以实现商…

掌握Jenkins自动化部署:从代码提交到自动上线的全流程揭秘

Jenkins自动化部署是现代软件开发中不可或缺的一部分&#xff0c;它不仅简化了代码的发布过程&#xff0c;还为整个团队带来了无与伦比的效率和协作力。想象一下&#xff0c;开发者们可以专注于编写高质量的代码&#xff0c;而不是为繁琐的手动部署所烦恼&#xff1b;测试人员能…

Python进阶之3D图形

Python进阶之3D图形 在数据可视化中&#xff0c;2D图形通常可以满足大多数需求。然而&#xff0c;对于一些复杂的数据或分析&#xff0c;3D图形可以提供更多的视角和洞察。在Python中&#xff0c;使用 Matplotlib 和 Plotly 等库可以轻松创建各种3D图形。本文将介绍如何使用这…

C++_2_ inline内联函数 宏函数(2/3)

C推出了inline关键字&#xff0c;其目的是为了替代C语言中的宏函数。 我们先来回顾宏函数&#xff1a; 宏函数 现有个需求&#xff1a;要求你写一个Add(x,y)的宏函数。 正确的写法有一种&#xff0c;错误的写法倒是五花八门&#xff0c;我们先来“见不贤而自省也。” // …

SpringCloud的能源管理系统-能源管理平台源码

介绍 基于SpringCloud的能源管理系统-能源管理平台源码-能源在线监测平台-双碳平台源码-SpringCloud全家桶-能管管理系统源码 软件架构

提升体验:UI设计的可用性原则

在中国&#xff0c;每年都有数十万设计专业毕业生涌入市场&#xff0c;但只有少数能够进入顶尖企业。尽管如此&#xff0c;所有设计师都怀揣着成长和提升的愿望。在评价产品的用户体验时&#xff0c;我们可能会依赖直觉来决定设计方案&#xff0c;或者在寻找改善产品体验的切入…

【STM32F4】——DMA初始化结构体详解

一.DMA_InitTypeDef 初始化结构体 typedef struct {uint32_t DMA_Channel; //通道选择 uint32_t DMA_PeripheralBaseAddr;//外设地址uint32_t DMA_Memory0BaseAddr; //存储器 0 地址uint32_t DMA_DIR; //传输方向 uint32_t DMA_BufferSize; /…

opencascade Adaptor3d_CurveOnSurface源码学习

opencascade Adaptor3d_CurveOnSurface 前言 用于连接由Geom包中表面上的曲线提供的服务&#xff0c;以及使用这条曲线的算法所要求的服务。该曲线被定义为一个二维曲线&#xff0c;来自Geom2d包&#xff0c;位于表面的参数空间中 方法 1 默认构造函数 Standard_EXPORT Ada…

Windows设置定时任务进行oracle数据库备份

先找到“定时任务计划” 方法1.开始->所有程序->附件->系统工具->定时任务计划 方法2:控制面板->输入计划 进行查询操作 名称随便定&#xff0c;点击下一步 下一步 设置每天的定时执行时间&#xff0c;点下一步 点下一步选择启动程序&#xff0c;点下一步 点…

Lesson 64 Don‘t ... You mustn‘t ...

Lesson 64 Don’t … You mustn’t … 词汇 play n. 戏剧&#xff08;真人演的&#xff0c;话剧&#xff09;v. 玩耍 搭配&#xff1a;play with 物体 / 人    玩…… / 和……一起玩 例句&#xff1a;我正在和Leo玩。    I am playing with Leo.演奏&#xff08;乐器…

ddos造成服务器瘫痪后怎么办

在服务器遭受DDoS攻击后&#xff0c;应立即采取相应措施&#xff0c;包括加强服务器安全、使用CDN和DDoS防御服务来减轻攻击的影响。rak小编为您整理发布ddos造成服务器瘫痪后怎么办。 当DDoS攻击发生时&#xff0c;首先要做的是清理恶意流量。可以通过云服务提供商提供的防护措…