当前位置： 首页 > news >正文

19.JS

news 2025/9/4 12:16:07

一、JS简介

JS：

1、直接嵌入HTML页面。

2、由浏览器解释执行代码，不进行预编译。

解释型语言和编译型语言

JS：解释型语言、弱类型语言

Java:编译型语言、强类型语言

int num = 100;

变量: var num = 100;

variable 用var来定义一个变量。

变量名区分大小写，允许包含字母、数字、美元符号($)和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号。

起有意义的名字，最重要一点就是“见名知意”。

JS不区分单引号和双引号。

<script type="text/javascript">var num1 = 3;var num2 = 5;var result = num1 + num2;console.log(result);//8var str = '10';console.log(num1 + str);//310//全局函数parseIntvar result2 = num1 + parseInt(str);console.log(result2);//13alert(result2);
</script>

二、JS数据类型

null、undefined区别：

var x;

var y;

没有初始化的变量自动取值为undefined。

如果这个变量值为null表示这个变量已经赋值了，这个值正好是null。

声明变量统一使用var声明，声明的时候变量是没有类型。

但是变量赋值之后就有类型，这个变量的类型就是这个变量值的类型。

<script type="text/javascript">//int num;//只是声明变量，没有赋值，现在的值是undefinedvar v;console.log(v);//undefinedconsole.log(typeof(v));//undefinedv = 3.14;console.log(v);//3.14console.log(typeof(v));//numberv = 'js';console.log(v);//jsconsole.log(typeof(v));//stringv = true;console.log(v); //trueconsole.log(typeof(v));//booleanv = null;console.log(v); //nullconsole.log(typeof(v));//object
</script>

三、关系运算符

全等：===

不全等：!==

判断值是不是相等 ，还有类型是不是相等。

<script type="text/javascript">var m = '3';var n = 3;if (m == n) {//值相等就可以console.log('m==n')}if (m === n) {//值相等，类型也要相等console.log('m===n')}
</script>

四、String

创建String对象有两种方式

  1. var str1 = 'hello js!';
  2. var str2 = new String('hello js!');

String属性：length

str1.length; // 9

String常用的方法：

1、大小写转换

str.toLowerCase();

str.toUpperCase();

var str = 'Hello jS!';

console.log(str.toLowerCase());//hello js!

console.log(str.toUpperCase());//HELLO JS！

2、获取指定字符：

str.charAt(index) 返回指定位置的字符

index：字符位置

console.log(str.charAt(6));//j

3、查询指定字符串出现索引

str.indexOf(findstr, [index]);

str.indexOf(findstr);

str.indexOf(findstr,index);

str.indexOf(findstr,[index])

str.lastIndexOf(findstr, [index]);

使用说明：

findstr:查找的字符串

index:开始查找的位置索引，可以省略

返回findstr在x中出现的首字符位置索引，如果没有找到则返回-1

lastIndexOf:从后面找起

4、split() 方法用于把一个字符串分割成字符串数组。

x.split(separator,howmany)

separator : 字符串或正则表达式，从该参数指定的地方分割 stringObject

howmany:指定返回数组的最大长度，可以省略

返回分割后的字符串数组

<script type="text/javascript">var str1 = 'Hello JS and Java';console.log(str1.indexOf('J'));//6console.log(str1.indexOf('JS'));//6console.log(str1.indexOf('JS', 9));//-1var str2 = 'how are you doing today';var array = str2.split(' ');console.log(array);console.log(array[0]);console.log('1:2:3:4'.split(':'));
</script>

五、Boolean

Java中条件表达式必须返回布尔类型 if() while()

2

JS中表达式可以是任意表达式

1不是0，就是非空值，表示true

NaN=Not a number

在JS里面一切表示空的值都是false，非空的值都是true。

<script type="text/javascript">console.log('-----------------')if (true) {console.log('true');}if (0) {//falseconsole.log('0');}if (!0) {//trueconsole.log('!0');}if ('') {//falseconsole.log('空字符串');}if ('abc') {//trueconsole.log('abc');}
</script>

六、Array

创建数组对象

int[] array = new int[3];

String[] array = new String[3];

var array1 = new Array();//创建一个空的数组

var array2 = new Array(7);//创建长度是7的数组

var array3 = new Array(100, 'a', true);

var array4 = [100, 200, 300];

获取数组元素的个数：length属性

<script type="text/javascript">var array1 = new Array(7);console.log(array1.length);var array2 = new Array(100, 'abc', true);console.log(array2.length);//创建一个空数组var array = new Array();array[0] = '234';console.log(array);//['234']console.log(array.length);//1array[1] = false;console.log(array);//['234', false]console.log(array.length);//2//对JS里面的数组可以不使用下标，使用push和pop向数组里面放数据和拿数据var arr = new Array();arr.push('zhangsan');console.log(arr);//['zhangsan']console.log(arr.length);//1arr.push(false);console.log(arr);//['zhangsan', false]console.log(arr.length);//2arr.push(45);console.log(arr);//['zhangsan', false, 45]console.log(arr.length);//3console.log(arr.pop());//45console.log(arr.pop());//falseconsole.log(arr.pop());//zhangsan
</script>

七、Math

parseInt()

Math.PI Math.round(3.14)

八、eval

eval('2+3') //5

eval('var x=10;var y=20;console.log(x*y);'); //200

九、JS对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>var student = {name: 'zhansgan',age: 23,study: function() {console.log(this.name + '的年龄是' + this.age + '岁');}};console.log(student.name);student.study();</script>
</head>
<body>
</body>
</html>

十、DOM

dom：document object model文档对象模型

dom技术的作用：JS语言和Html标签之间沟通的一个桥梁。

为了方便JavaScript语言通过DOM操作Html比较方便，

把Html标签的内容划分为各种节点：

  1. 文档节点(document)
  2. 元素节点 也叫标签 getElementsByTagName
  3. 文本节点
  4. 属性节点 type=”text” name=”username”
  5. 注释节点

dom就是学习利用JS如何实现对Html标签增删改查。

documnet：是页面中的内置对象，内置对象简单理解就是已经new好的一个对象，对象的名字就叫document。

元素节点的获取：

document.getElementById( id属性值);

document.getElementsByTagName("标签名")；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><input type="text" id="inputId" value="Hello"> <br><input type="button" value="点我" onclick="clickMe()"><script>function clickMe() {//console.log('clickMe');var array = document.getElementsByTagName('input');console.log(array);console.log(array[0]);console.log(array[0].value);//var inputObj = document.getElementById('inputId');//console.log(inputObj.value);}</script>
</body>
</html>

练习：

写一个5行4列的table。

inputObj.value = 23;

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title></head>
<body>
<table><tr><td><img src=""/></td><td colSpan="3">购物简易计算器</td></tr><tr><td>第一个数</td><td colSpan="3"><input type="text" id="num1Id"/></td></tr><tr><td>第二个数</td><td colSpan="3"><input type="text" id="num2Id"/></td></tr><tr><td><input type="button" value=" + " onclick="cal('+')"/></td><td><input type="button" value=" - " onclick="cal('-')"/></td><td><input type="button" value=" * " onclick="cal('*')"/></td><td><input type="button" value=" / " onclick="cal('/')"/></td></tr><tr><td>计算结果</td><td colSpan="3"><input type="text" id="resultId"/></td></tr>
</table><script type="text/javascript">function cal(type) {var num1 = document.getElementById('num1Id').value;var num2 = document.getElementById('num2Id').value;// '2+3'  '2-3'var result = eval(parseInt(num1) + type + parseInt(num2));var resultObj = document.getElementById('resultId');resultObj.value = result;}function cal1(type) {var num1 = document.getElementById('num1Id').value;var num2 = document.getElementById('num2Id').value;var result = 0;switch (type) {case '+':result = parseInt(num1) + parseInt(num2);break;case '-':result = parseInt(num1) - parseInt(num2);break;case '*':result = parseInt(num1) * parseInt(num2);break;case '/':result = parseInt(num1) / parseInt(num2);break;}var resultObj = document.getElementById('resultId');resultObj.value = result;}function add() {var num1 = document.getElementById('num1Id').value;var num2 = document.getElementById('num2Id').value;var result = parseInt(num1) + parseInt(num2);var resultObj = document.getElementById('resultId');resultObj.value = result;}function sub() {var num1 = document.getElementById('num1Id').value;var num2 = document.getElementById('num2Id').value;var result = parseInt(num1) - parseInt(num2);var resultObj = document.getElementById('resultId');resultObj.value = result;}function mul() {var num1 = document.getElementById('num1Id').value;var num2 = document.getElementById('num2Id').value;var result = parseInt(num1) * parseInt(num2);var resultObj = document.getElementById('resultId');resultObj.value = result;}function div() {var num1 = document.getElementById('num1Id').value;var num2 = document.getElementById('num2Id').value;var result = parseInt(num1) / parseInt(num2);var resultObj = document.getElementById('resultId');resultObj.value = result;}
</script>
</body>
</html>

十一、innerText、innerHtml

innerText 直接当成一个字符串展示

innerHtml 将内容当成html来解析

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><span id="spanId">Hello Span</span><br/><button onclick="clickMe()">点击</button><script type="text/javascript">function clickMe() {var spanObj = document.getElementById('spanId');//spanObj.innerText = '<h1 style="color: red;">innerText</h1>';spanObj.innerHTML = '<h1 style="color: red;">innerText</h1>';}</script></body>
</html>

http://www.dtcms.com/a/365812.html

相关文章：

  • Jmeter怎么实现接口关联？
  • 算法题（198）：数字三角形
  • 使用 Terraform、AWS 和 Python 构建无服务器实时数据管道
  • 学习React-9-useSyncExternalStore
  • Ubuntu下把 SD 卡格式化为 FAT32
  • 【工具变量】“国家级大数据综合试验区”试点城市DID（2000-2024年）
  • ArkTS状态管理V1
  • Llama v3 中的低秩自适应 (LoRA)
  • 头歌实训作业答案C++ 01
  • Proteus8 + STM32CubeMX 实现 STM32F103R6 串口通信教程
  • JMeter下载安装及使用入门
  • 常用符号 Emoji 对照表——Unicode UTF-8
  • SQLSERVER临时表
  • 关于专业化与多元化该怎么选？
  • 解决MQ访问不了或者登录不成功问题
  • 卷积神经网络CNN-part2-简单的CNN
  • TypeScript与JavaScript：从动态少年到稳重青年的成长之路
  • RabbitMQ相关知识
  • HTML第七课：发展史
  • Unity：XML笔记(二)——Xml序列化、反序列化、IXmlSerializable接口
  • 裸机程序（1）
  • 【ARM嵌入式汇编基础】-数据处理指令（三）
  • 低成本低功耗认证芯片推荐——LCS4110R
  • 【Luogu】P2398 GCD SUM (容斥原理求gcd为k的数对个数)
  • 鸿蒙NEXT开发实战：图片显示、几何图形与自定义绘制详解
  • GPT4o 提示词 结合 NanoBanbana 会摩擦出什么火花呢？
  • FPGA笔试面试常考问题及答案汇总
  • 入行FPGA选择国企、私企还是外企？
  • 案例演示 切片器悬浮永驻 Power BI VS QuickBI ，不得不说，两个极端了
  • 华勤内推码