PHP学习之实现PHP与JavaScript的交互（二）

Blessings_14

已于 2023-04-04 21:12:49 修改

阅读量2.1k

点赞数

文章标签： javascript php 交互前端 html

于 2023-03-31 17:15:44 首次发布

本文链接：https://blog.csdn.net/m0_74421158/article/details/129844606

版权

了解JavaScript

什么是JavaScript

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

JavaScript的功能

嵌入动态文本于HTML页面。
对浏览器事件做出响应。
读写HTML元素。
在数据被提交到服务器之前验证数据。
检测访客的浏览器信息。
控制cookies，包括创建和修改等。
基于Node.js技术进行服务器端编程。

JavaScript语言基础

JavaScript脚本语言与其他语言一样，有其自身的基本数据类型、表达式、运算符以及程序的基本框架结构。

JavaScript数据类型

字符串型

"php"     'i like study php'      'for in love'

数值型

-185     12.9      7.24e8

布尔型

event.return Value = true     elements[i].checked = false

对象型

如网页表单元素
用于指定JavaScript程序中用到的对象

Null值

a = null
可以通过给一个变量赋值null值来清除变量的内容

Undefined

var a
表示该变量尚未被赋值

JavaScript变量

变量是指程序中一个已经命名的存储单元，它的主要作用是为数据操作提供存放信息的容器。
注意事项：在使用变量前，必须明确变量的命名规则、变量的声明方法及变量的作用域。

变量的命名规则

必须以字母或下划线开头，中间可以是数字、字母或下划线。
不能包含空格或加号、减号等符号。
严格区分大小写。例如：User 和 user代表两个不同的变量。
不能使用JavaScript中的关键字。

变量的声明与赋值

可以使用关键字var同时声明多个变量。
可以在声明变量的同时对其赋值，即进行变量初始化。
如果只声明了变量，并未对其赋值，则其默认值为underfined。

var i,j; //定义变量i为数值型
var str="好好学习，天天向上";content=true;  //定义变量str为字符串型，变量content为布尔型

JavaScript注释

单行注释

//单行注释

多行注释

/*
多行注释
*/

另外，JavaScript还能识别HTML注释的开始部分“<!- -”。

在JavaScript中，如果第一行以“<!- -”开始，最后一行以“- ->”结束，那么其间的程序就包含在一个完整的HTML注释中，会被不支持JavaScript的浏览器忽略掉，不能被显示。
在JavaScript中，如果第一行以“<!- -”开始，最后一行以“//- ->”结束,JavaScript会将两行都忽略掉，而不忽略这两行之间的部分。用这种方式可以针对那些无法理解JavaScript的浏览器而隐藏代码，而对那些可以理解JavaScript的浏览器不必隐藏。

自定义函数

自定义函数就是由用户自己命名并编写的能实现特定功能的程序单元。用户使用的自定义函数必须事先声明，不能直接使用没有声明过的函数。

自定义函数语法格式如下：

function 函数名([参数]){
      return var;
}

自定义函数的调用方法是：

函数名();

示例：自定义calculate()函数，实现两个数的乘积，然后在函数体外调用calculate()并传递两个参数，最后应用document.write()对象输出结果

<script language="javascript">
    function calculate(a,b){
        return a*b;
        }
        document.write(calculate(15,15));
</script>      
结果为：225

JavaScript流程控制语句

条件语句

if条件语句
switch分支语句

循环语句

while循环语句
for循环语句

跳转语句

break语句
continue语句

JavaScript事件

JavaScript是基于对象的语言，最基本的就是采用事件驱动机制。事件是某些动作发生时产生的信号，这些事情随时都可能发生。引起事件发生的动作称为触发事件，例如：当鼠标指针经过某个按钮、用户单击了解某个链接、用户选中某个复选框、用户在文本框中输入某些信息等，都会触发相应的事件。
在这里插入图片描述

应用JavaScript事件调用自定义函数

在Web程序开发过程中，经常需要在表单元素相应的事件下调用自定义函数。
示例1：
在按钮的单击事件下调用自定义函数check()来验证表单元素是否为空

<input type ="submit" name="Submit" value="检测" onliCck ="check();">

然后在该表单的当前页中编写一个check()自定义函数即可。

示例2：
使用if条件语句判断指定的年份是否为闰年
创建一个表单元素，添加一个下拉列表框，命名为year，在input标记的属性中添加onClick事件，调用自定义函数check()

<form name="form1" method="post" action="">
  <span class="style2">检测闰年: </span>
  <select name="year">
  <option value="2005">2005年</option>
  <option value="2005">2006年</option>
  <option value="2005">2007年</option>
  <option value="2005" selected>2008年</option>
  </select>
  <input type="submit" name="submit" value="检测" onclick="check();">
</from>

在body标记外，添加JavaScript脚本自定义的函数check()

<script type="text/javascript">
function check(){ 
var year1=form1.year.value;
	if((year1%4)==0 && (year1%100)!=0){
		alert(year1+"年是闰年！");			
	}else{
	    alert(year1+"年不是闰年！");
	}
}
</script>

JavaScript脚本嵌入方式

在HTML中嵌入JavaScript脚本

JavaScript脚本通常写在head…/head标记和body…/body标记之间。
写在head标记中间的一般是函数和事件处理函数；
写在body标记中间的一般网页内容或调用函数的程序块。

示例1（函数和事件处理函数）
head标记中间

<head>
<script type="text/javascript">
function check(){ 
var year1=form1.year.value;
	if((year1%4)==0 && (year1%100)!=0){
		alert(year1+"年是闰年！");			
	}else{
	    alert(year1+"年不是闰年！");
	}
}
</script>
</head>

示例2：
body标记中间（网页内容或调用函数的程序块）

<body>
<form name="form1" method="post" action="">
  <span class="style2">检测闰年: </span>
  <select name="year">
  <option value="2005">2005年</option>
  <option value="2005">2006年</option>
  <option value="2005">2007年</option>
  <option value="2005" selected>2008年</option>
  </select>
  <input type="submit" name="submit" value="检测" onclick="check();">
</from> 
</body>

在PHP动态网页中引用JavaScript文件

JavaScript脚本不仅可以与HTML结合使用，同时也可以与PHP动态网页相结合，其引用的方法是通过script标记中的src属性指定外部的JavaScript文件（即JS文件，以.js为扩展名）的路径，从而引用对应的JS文件。

语法格式如下：

<script src=url></script>

其中，url是JS文件的路径

示例：
在网页中通过script标记的src属性引用外部JS文件，用于弹出一个提示对话框
index.php文件中的代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>document</title>
</head>
<script src="script.js" charset="utf-8"></script>
<body>
</body>
</html>

script.js文件中的代码如下：

alert("恭喜您，成功调用了script.js外部文件!");

在网页中引用JS文件需要注意如下事项：

在JS文件中，只能包含JavaScript脚本代码，不能包含script标记和HTML代码。
在引用JS文件的script与/script标记之间不应该存在其他的JavaScript代码。

Blessings_14

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
PHP学习之实现PHP与JavaScript的交互（二）

自定义函数就是由用户自己命名并编写的能实现特定功能的程序单元。用户使用的自定义函数必须事先声明，不能直接使用没有声明过的函数。function 函数名([ 参数 ]) {return var;函数名();示例：自定义calculate()函数，实现两个数的乘积，然后在函数体外调用calculate()并传递两个参数，最后应用document.write()对象输出结果< / script > 结果为： 225在Web程序开发过程中，经常需要在表单元素相应的事件下调用自定义函数。
复制链接

扫一扫