从零开始的Java开发2-9-1 JavaScript入门：语法JS对表单元进行设置事件与DOM

Posted karshey

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了从零开始的Java开发2-9-1 JavaScript入门：语法JS对表单元进行设置事件与DOM相关的知识，希望对你有一定的参考价值。

文章目录

页面使用JS的方法

使用<script>在html页面中插入javascript：两个<script>中的语言就是js。

<body>
    <script type="text/javascript">
        alert("hello javascript");
    </script>
</body>

或是引用外部JS文件（一般用这种）

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

第一个JS程序：

<head>
    <title>index</title>
    <script type="text/javascript">
    // 弹对话框
    alert("hello javascript");
    </script>
</head>

显示：

相关语法

变量

  • 与其他程序设计语言相同，是用来临时存储信息。
  • 变量var区分类型，但没有int之类的关键词。
  • 即：创建的时候不区分数据类型，赋值的时候区分。
  • 即：弱数据类型。

如：

// 声明一个变量 此时没有数据类型
var x;
// 现在有数据类型了
x = 123;
alert(x + 1);

显示：

若：

x = "123";

显示：1231

调试

  • alert弹窗调试
  • console.log控制台输出调试

作用：观察变量值的变化规律，是否符合程序设计的目的。

如：

console.log(x + 1);

显示：在浏览器F12.

自定义函数

JS中的函数分为：自定义函数 和 内置函数。

创建方法1：

//这种是函数声明 可以先使用后定义
function fun1()
	//代码片段
	return ***;

创建方法2：

//函数表达式 必须先定义后使用
var fun1=function(x)
	return ***;
;

如：

//创建函数
function add(n1, n2) 
    alert(n1 + n2);


//调用函数
add(1, 2);

显示弹窗：3

数据类型及类型转换

数据类型

  • number：数字类型，整型浮点型都包括
  • string：字符串类型，必须放在单引号或者双引号中
  • boolean：布尔类型，只有true和false两种值
  • undefined：未定义，一般指的是已经声明，但是没有赋值的变量（要尽量避免它的出现）
  • null：空对象类型
  • object：对象类型，在js常见的有window，document，array等
  • NaN：是Number的一种特殊类型，isNaN()，如果是数字返回false，不是数字返回true

类型转换

  • parseInt()
  • parseFloat()
  • Number()
  • Boolean

parseInt()的代码：

var str = "123";
console.log(str + 1);
console.log(str * 1 + 1); //隐式转换：自动类型转换
console.log(parseInt(str) + 1); //强制转换

在浏览器中按F12：

1231
124
124

若不能转换：

var str="abc";
console.log(parseInt(str));

控制台：NaN

所以加一个isNaN判断是否可以转换：

不能转换：

var str = "abc";
//如果可以转换
if (isNaN(str) == false) 
    console.log(parseInt(str));
 else 
    console.log("is error");

控制台：is error

可以转换：

var str = "123";
//如果可以转换
if (isNaN(str) == false) 
    console.log(parseInt(str));
 else 
    console.log("is error");

控制台：123

parseInt()、parseFloat()、Number()的代码：

var str = "0123.654";
console.log(Number(str)); //一般让它优先
console.log(parseInt(str));
console.log(parseFloat(str));

控制台：

123.654
123
123.654

剩下的这些可以自己演示：
若str是null，则Number返回0，parseInt和parseFloat返回NaN。
若str是""，则Number返回0，parseInt和parseFloat返回NaN。

Boolean()的转换：
""会转换为false；
null会转换为false；
（字符）有内容会转换为true；
（数字）0会转换为false；
（数字）非0会转换为true；

变量作用域

  • 全局变量：在函数外部创建的变量，称为全局变量，在函数之间可以共享使用。
  • 局部变量：在函数内部创建的变量，称为局部变量，其他函数不能使用。

运算符

比较运算符：

  • >：大于
  • >=：大于等于
  • !=：不等于
  • <：小于
  • <=：小于等于

运算符优先级：

逻辑运算符：

  • &&：and
  • ||：or
  • ! :非

三目运算符：

条件？值1：值2

满足条件就返回值1，否则值2.

程序控制语句

  • if else
  • switch
  • for、while、do...while

内置函数

字符函数

  • substring：截取字符串长度，substring(起始位置，结束位置)
  • substr：截取字符串长度，substr(起始位置，截取长度)
  • charAt：获取该位置的字符，charAt(idx)
  • split：按一定的规律将字符串转化为数组
  • length：求长度，str.length返回str的长度
  • indexOf：查找某个字符在字符串第一次出现的位置：str.indexOf(1)返回字符’1’在str中第一次出现的位置；str.indexOf(1,2)返回从位置2开始的字符’1’在str中第一次出现的位置；
  • concat：连接
  • replace：替换

split代码：

var str = "aa,bb,cc,dd,eee,12345,678";
//以逗号为分隔，将str这个字符串转化为数组存到arr里
var arr = str.split(",");
console.log(arr);

控制台：(7)表示有7个元素。

(7) ['aa', 'bb', 'cc', 'dd', 'eee', '12345', '678']

concat代码：添加一句

console.log(str.concat("55","77","000"));

控制台：

aa,bb,cc,dd,eee,12345,6785577000

replace代码：把第一个aa替换成bb

//把aa替换成bb
console.log(str.replace("aa","bb"));

控制台：

bb,bb,cc,dd,eee,12345,678

日期函数

  • Date：获取当前系统日期
  • getDate：获取当前是几号
  • getDay：获取当前星期几（周日是0，周一是1…以此类推）
  • getMonth：获取当前月份 （从0开始）
  • getFullYear：获取当前年份
  • getYear：获取当前年份（已经不用了）
  • getHours：获取当前小时
  • getMinutes：获取当前分钟
  • getSeconds：获取当前秒

一个日期的例子：

var d1 = new Date();
var d2 = new Date("2022-9-1 10:01:23");
console.log(d2.getDate()); //获取当前是几号
console.log(d2.getMonth()); //获取当前月份
console.log(d2.getFullYear()); //获取当前年份
console.log(d2.getHours()); 
console.log(d2.getMinutes()); 
console.log(d2.getSeconds());

控制台：

1
8//如果想要显示当前的月份，可以+1
2022
10
1
23

计算相差的日期——计算2022-9-1到2023年的天数：

var d1 = new Date("2022-9-1");
var d2 = new Date("2023-1-1");
var n = d2.getTime() - d1.getTime(); //获得的是毫秒
console.log(parseInt(n / (1000) / (3600) / 24));

控制台：

122

日期格式化：把日期处理为xxxx-xx-xx hh:mm:ss的形式

//自定义一个格式化日期的函数
function fun_FmtDate() 
    var d1 = new Date();
    var year, mon, day, hh, mm, ss;
    var time;
    year = d1.getFullYear();
    mon = d1.getMonth() + 1;
    day = d1.getDate();
    hh = d1.getHours();
    mm = d1.getMinutes();
    ss = d1.getSeconds();
    time = year + "-" + mon + "-" + day + " " + hh + ":" + mm + ":" + ss;
    return time;


console.log(fun_FmtDate());

控制台：

2022-8-29 19:42:19

数学函数

  • Math.round：四舍五入取整
  • max：返回一组数最大值
  • min：返回一组数最小值
  • abs：返回绝对值
  • toFixed(x)：保留x位小数

数组

  • 声明或创建一个不指定长度的数组，又称实例化创建
var arrayObj = new Array();
  • 声明或创建一个数组并指定长度的数组
var arrayObj = new Array(5);//长度为5
  • 声明或创建一个带有默认值的数组
var arrayObj = new Array(2,1,2,3,4,5);
//参数就是数组的内容，数组长度是参数个数
  • 创建一个数组并赋值 的简写，又称为隐式创建数组
var arrayObj = [1,2,3,4,5];
  • 数组赋值，字符下标，数组遍历
var arrayObj = new Array(2, 3, 4, 5, 6, 7);
//输出数组中某个元素
console.log(arrayObj[0]);
//下标出界会输出undefined

//遍历数组
for (var i in arrayObj) 
    console.log(arrayObj[i]);

控制台：

2
2
3
4
5
6
7

JS对表单元进行设置

表单
表单的主要作用是在客户端接收用户的信息，然后将数据递交给后台的程序来操纵这些数据。

JS做什么：设置或获取各种表单元素的值。

单击与刷新

需求：点击按钮后有弹窗。

html：

<body>
    <form>
        <label>用户名</label>
        <input type="text" name="userName" id="userName" value="123" />
        <!-- onclick 单击事件 -->
        <input type="button" id="button" onclick="show1()" value="button" />
    </form>
</body>

js：

//单击事件后的显示
function show1() 
    alert("单击成功！");

需求：点击按钮后使文本框内的123变成999：

function show1() 
    // alert("单击成功！");
    document.getElementById("userName").value = "999";

点击刷新（onload）后出现在页面里的称为初始化。
需求：初始化后文本框里为123456。

html：

<body onload="show1()">
    <form>
        <label>用户名</label>
        <input type="text" name="userName" id="userName" />
        <!-- onclick 单击事件 -->
        <input type="button" id="button" value="button" />
    </form>
</body>

js：

//单击事件后的显示
function show1() 
    // alert("单击成功！");
    document.getElementById("userName").value = "123456";

单选按钮

单选按钮：radio

需求：单选性别男/女，点击按钮后对话框把选中的显示出来。

html：

<body>
    <form>
        <!-- 单选按钮 -->
        <input type="radio" name="xb" value="男" checked="checked">男<br>
        <input type="radio" name="xb" value="女">女<br>
        <input type="button" id="button" value="button" onclick="show1()" />
    </form>
</body>

js：

function show1() 
    var xb = document.getElementsByName("xb");

    //checked表示判断是否被选中
    if (xb[0].checked) 
        alert(xb[0].value);
     else 
        alert(xb[1].value);

列表框

一般id给js用，name给后台用。

需求：用js自动生成年、月、日的列表框。

年：html：

<body onload="ymd()">
    <form>
        <!-- 列表框 -->
        <select name="yyyy" id="yyyy">
        </select>
    </form>
</body>

js：

function ymd() 
    //获取id=yyyy的控件
    var yyyy = document.getElementById("yyyy");
    for (var i = 1999; i <= 2022; i++) 
        //option是条目
        //i i 第一个参数是显示的名字 第二个参数是value
        yyyy.options.add(new Option(i, i));


年月日：
html：

<body onload="ymd()">
    <form>
        <!-- 列表框 -->
        <select name="yyyy" id="yyyy">
        </select>年
        <select name="mm" id="mm">
        </select>月
        <select name="dd" id="dd">
        </select>日
    </form>
</body>

js：

function ymd() 
    //获取id=yyyy的控件
    var yyyy = document.getElementById("yyyy"以上是关于从零开始的Java开发2-9-1 JavaScript入门：语法JS对表单元进行设置事件与DOM的主要内容，如果未能解决你的问题，请参考以下文章
 

 Java开发从零开始！java游戏服务器开发教程


 Java从零开始学习——Java基础


 Java从零开始学习——Java基础


 从零开始的Java开发1-2-4 Java方法


 Java开发从零开始！腾讯T3团队整理


 从零开始的Java开发1-4-1 Java继承：Object类final关键字注解