JavaScript 菜鸡入门笔记

最新推荐文章于 2024-04-20 02:09:14 发布

沣爸爸

最新推荐文章于 2024-04-20 02:09:14 发布

阅读量64

点赞数

分类专栏：编程语言文章标签： web

本文链接：https://blog.csdn.net/helloworldsyf/article/details/115052728

版权

编程语言专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JavaScript 的介绍

用来做表单校验(减轻服务器的压力)，网页特效

JavaScript 与其他语言的对比

语言	区别
php	javascript是工作在浏览器端的脚本语言，php是工作在服务器端的脚本浏览器是客户端，服务器是服务端

Html/JavaScript/Php/DB三者关系

JavaScript 语法结构

基本语法

注释
```
// 
/* */
```

创建变量

/* var可以表示任何类型的变量 */
var x=5;  // int型
var pi=3.14; // 浮点型
var person="John Doe"; //""与''都可以表示字符串
var answer='Yes I am!';
var z=x+y;

在html嵌入

//内嵌式js
<script> alert("我的第一个 JavaScript"); </script>

//外部js文件
<script src="myScript.js"></script>

基本类

创建函数

函数可以在声明之前调用

/* 基本的创建函数 */
function myFunction(){
    var x=5;  // 局部变量
    return x; // 返回值
}

/* 带表达式创建函数 */
var x = function (a, b) { 	// 这个是一个匿名函数
    return a * b			// 相当于把函数的名称放到了前面
};

/* 自调用函数 */
(function () { 				// 函数在定义后立即被执行
    alert('watch out!'); 	// 自调用函数没有函数名
}());

自调用函数

创建类

function Cat() {
　　this.name = "大毛";
}

基本类型

对象类型
```
// 对象类型有点像c语言的结构体
var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};
```
window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。

JavaScript常用函数

显示函数

弹框显示

/* window 上弹出的对话框中显示的纯文本 */
alert("I am an alert box!!")

alert参考

监听函数 DOM

监听单个元素触发单个事件

document.getElementById("btn").onclick = method1;

监听单个元素触发多个事件

// 执行顺序为method1->method2->method3 
var btn1Obj = document.getElementById("btn1"); 
btn1Obj.addEventListener("click",method1,false); 
btn1Obj.addEventListener("click",method2,false); 
btn1Obj.addEventListener("click",method3,false);

调试函数

// 用于在开发软件中调试
console.log()

用浏览器作为开发软件

JavaScript与各语言联调

JavaScript 联调

JavaScript端

<!-- 只要在html中把两个js都包含就可以相互调用 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> </title>
</head>
<script src="1.js"></script>
<script src="2.js"></script>
<body>

</body>
</html>

参考网站

html 联调

通过 DOM 中查找 HTML 元素

JavaScript端

/* 通过 id 查找 HTML 元素 */
var x=document.getElementById("intro");

/* 重写HTML元素 */
document.getElementById("p1").innerHTML="新文本!"; //改变文本
document.getElementById("image").src="landscape.jpg"; //改变属性

/* 用于向指定元素添加事件句柄 */
document.getElementById("myBtn").addEventListener("click", function(){
    xxx
});

php联调

php端

/* 用isset函数得到 JavaScript的变量。 */
<?php
    $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
    $url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
	// 传回去的data是包括所有的echo
    echo '网站名: ' . $name;
    echo "\n";
    echo 'URL 地址: ' .$url;
?>

JavaScript端

运用jQuery框架

向php发数据

/* jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。 */
document.getElementById("button").addEventListener("click", function() {
	$.post("https://www.gzsyf.xyz/test/check.php",{		//这里指定了目标php
         url: image,		 	// Imagine就是要向php传递的参数
    },
    function(data,status){ //data是传回来的数据，status是传递的结果
        alert("数据: \n" + data + "\n状态: " + status); // 得到的数据是PHP echo的值
    });
});

向php得到数据

$("button").click(function(){
  $.get("demo_test.php",function(data,status){   //这里指定了目标php
    alert("数据: " + data + "\n状态: " + status); //传回来的数据
  });
});

参考网站

沣爸爸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 菜鸡入门笔记

JavaScript 的介绍用来做表单校验(减轻服务器的压力)，网页特效JavaScript 与其他语言的对比语言区别phpjavascript是工作在浏览器端的脚本语言，php是工作在服务器端的脚本浏览器是客户端，服务器是服务端Html/JavaScript/Php/DB三者关系JavaScript 语法结构基本语法注释// /* */创建变量/* var可以表示任何类型的变量 */var x=5; // int型var
复制链接

扫一扫