JavaScript

最新推荐文章于 2024-01-11 15:11:15 发布
VIP文章 最新推荐文章于 2024-01-11 15:11:15 发布
阅读量421 收藏
点赞数
分类专栏： JavaWeb 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A_Pluto_i/article/details/123504583
版权

JavaScript

一、JavaScript基本知识

1.JavaScript介绍

  • Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码的。
  • JS是Net scape网景公司的产品，最早取名为LiveScript ;为了吸引更多java程序员。更名为JavaScript
  • JS是弱类型，Java是强类型。

特点：

  1. 交互性（信息的动态交互）
  2. 安全性（不允许直接访问本地硬盘）
  3. 跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）

2.JavaScript和HTML代码的融合

情况一：直接写

只需要在 head 标签，或者 body 标签中，使用script 标签来书写JavaScript代码

补充：

alter 是JavaScript语言提供的警告框函数。
——它可以接收任意类型的参数，这个参数就是警告框的提示信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    
    <!--位置一：-->
   <script type="text/javascript">
      // alter是JavaScript语言提供的警告框函数。
      // 它可以接收任意类型的参数，这个参数就是警告框的提示信息
      alert("hello,javascript");

   </script>
    
    
    
</head>
<body>


<!--位置二：-->
<!--<script type="text/javascript">-->
    <!--//alter是JavaScript语言提供的警告框函数。-->
    <!--//它可以接收任意类型的参数，这个参数就是警告框的提示信息-->
    <!--alert("hello,javascript");-->

<!--</script>-->



</body>
</html>

情况二 ：引入

  • 使用script入外部的js文件来执行

    • src属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径)
     <script type="text/javascript" src="one.js"></script>

  • script标签可以用来定义js代码，也可以用来引入js文件
    但是在同一个script标签中，两个功能二选―使用，不能同时使用两个功能

3.变量

①什么是变量?

变量是可以存放某些值的内存的命名。

JS中的定义变量格式：

  • var 变量名；
  • var 变量名=值；

②JavaScript的数据类型

类型
数值类型 number
字符串类型 string
对象类型 object
布尔类型 boolean
函数类型 function

③JavaScript里的特殊值

值 含义
undefined 未定义，所有的js变量未赋予初始值的时候，默认值都是undefined
null 空值
NAN 非数字，非数值

4.关系运算

  • 等于==
    • 做字面值的计较
  • 全等于===
    • 除了做字面值的计较外，还会比较两个变量的数据类型

5.逻辑运算

在Javascript语言中，所有的变量，都可以做为一个boolean类型的变量去使用。

  • 0 、null、undefined、" "(空串)都认为是 false;

    逻辑运算：

  • 且运算： &&

  • 或运算： ||

  • 取反运算： ！

6.数组的定义方式

/*格式：*/
var  数组名=[];      /*定义一个空数组*/

var  数组名=[1，2,3]； /*定义一个有长度的数组且初始化*/

7.函数的定义方式

①使用function关键字定义

// 格式如下：
function 函数名(形参列表) {
   
    函数体
}

无参函数：

function 函数名1(){
   
   alert("无参函数被调用了");
}

/*调用：*/ 
函数名1();

有参函数：

function 函数名2(a,b){
   
    alter("有参函数被调用了");
}
函数名2();

带有返回值的函数：

在JavaScript语言中，如何定义带有返回值的函数？

  • 只要在函数体内直接使用return语句返回值即可
//带有返回值的函数：
function sum(a1,a2) {
   
    var  result=a1+a2;
    return result
 }
 alert(sum(100,200));

②var方法

var 函数名=function(参数){
     
    函数体
}

8.隐型参数：arguments （类似数组）

  • arguments 隐形参数只存在在function函数中

  • 就是在 function函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。隐形参数特别像java基础的可变长参数一样。

    public void fun( object ...args );

  • 可变长参数其他是一个数组。

  • 那么js中的隐形参数也跟java的可变长参数一样。

  • 操作类似数组

例题：要求编写一个函数。用于计算所有参数相加的和并返回

function sum(a1,a2) {
   
    var result=0;
    for( var i=0;i<arguments.length;i++){
   
        if(typeof (arguments[i]=="number")){
   
             result+=arguments[i];
        }
    }
    return(result);
}
alert(sum(1,2,4,"AA",3));

9.Object自定义

  • 对象的定义：
    • var 变量名=new Object(); //对象实例（空对象）
    • 变量名.属性=值； //定义一个属性
    • 变量名.函数名=function(){} //定义一个函数
  • 对象的访问：
    • 变量名.属性/函数名();

举例：

var 变量名=new Object();
变量名.name="霸王花";
变量名.age=18;
变量名.fun=new function(){
   
 alter("姓名"+this.name+"age"+this.age); 
}

/*调用*/
变量名.fun();

10. { }花括号形式的自定义对象

// 对象的定义：
 var 变量名={
   
   /*注意，这里后面用逗号，最后一个可以不用 */
   属性名:值, 
   属性名:值,
   函数名:function () {
   }
       
   };

   
// 对象的访问：
变量名.函数名();
变量名.属性名();

举例：

// 对象的定义：
 var Person={
   
   name:"霸王花",
   age:21,
   study:function () {
   
       alert("每天进步一点点");
   }
   };

// 对象的访问：
alert(Person.name);
alert(Person.age);
alert(Person.study());

二、JavaScript事件介绍

1.事件

什么是事件

事件是电脑输入设备与网页进行交互的响应，我们称之为事件。

常用的事件
事件 作用
onload加载完成事件 页面加载完成之后，常用做页面JS的初始化操作
onclick单击事件 常用于按钮的点击响应操作
onblur失去焦点事件 常用于输入框失去焦点后验证其输入内容是否合法
onchange内容发生改变事件 常用于下拉列表和输入框内容发生改变后操作
onsubmit表单提交事件 用于表单提交前，验证所有表单项是否合法

2.事件的注册

①什么是事件的注册

什么是事件的注册（绑定)?

  • 其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
②事件的注册的分类

事件的注册又分为 静态注册 和 动态注册 两种:

  • 静态注册事件
    • 通过html标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
  • 动态注册事件
    • 是指先通过 js代码得到标签的dom对象,然后再通过dom对象.事件名=function()这种形式赋于事件响应后的代码，叫动态注册。
③动态注册基本步骤:

动态事件注册、固定写法:

  1. 获取标签对象，给标签对象设置id
  2. 标签对象(window).事件(onload)=function(){}
  3. document.getElementById通过ID获取对象标签
  4. 标签对象.事件=function(){ }

3.onload注册 事件

onload事件是浏览器解析完页面之后就会自动触发的事件

页面加载完成之后，常用做页面JS的初始化操作

静态注册
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script type="text/javascript">
       
     function onloadFun() {
    
         alert("这是静态注册onload事件")
     }
   </script>

</head>
<!--静态注册onload事件：-->
<body onload="onloadFun();">

</body>
</html>
动态注册（固定写法）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script type="text/javascript">
       
     // 动态注册的onload事件：固定写法
     window.onload=function () {
     
         alert("动态注册的onload事件")
     }
   </script>

</head>
<body >
</body>
</html>

4.onclick单击事件

常用于按钮的点击响应操作

静态注册
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <script type="text/javascript">
        <!--静态onclick事件注册-->
        function onclickFun() {
    
            alert("静态onclick事件按钮1");
        }

    </script>

</head>
<body>

<button onclick="onclickFun();"> 按钮1</button>

</body>
</html>
动态注册（固定写法）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title
最低0.47元/天 解锁文章
大器晚成i
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript书写语法
weixin_58526727的博客
06-23 486
JavaScript 书写语法 JavaScript 的书写位置 写在行内 <input type="button" value="按钮" onclick="alert('你好')"> 写在 html 中的 <script> 标签中(type内容可以省略) <script type="text/javascript"> alert("你好"); </script> 可以写在html任意位置 写在外部 js 文件中，在页面引入 <s
javascript
02-10
javascript官方文档，web前端师的权威文档，web前端的
JavaScript中alter、confrim、prompt的区别及使用
最新发布
m0_71002854的博客
01-11 1218
在JavaScript中，alert是一个内置函数，用于显示一个警告框，向用户显示一条消息。confirm弹出确认框，有两个按钮：确定和取消，分别返回true和false弹出提示框，确定，取消，输入框，确定返回输入框的值alter警告框confrim确认框prompt提示框alter弹出警告框，只有一个确定按钮。confirm弹出确认框，有两个按钮：确定和取消，分别返回true和false。prompt弹出提示框，确定，取消，输入框，确定返回输入框的值（不输入为空""），取消返回Null。
Alter的用法
liyuuhuvnjjv的博客
12-29 1060
1.增加列 ALTER TABLE [表名] ADD [列名] [类型] alter table table add name varchar(10) not Null; 2.删除列 ALTER TABLE [表名] DROP [列名] 3.对列重命名 ALTER TABLE [表名] CHANGE [列名][新名] 4.修改表字段 alter table 表名 change 旧字段名 新字段名 字段类型 [是否允许非空]; 5.创建索引 ALTER TABLE tbl_name ADD INDE
JavaScrip基础知识
rqt1013_的博客
05-06 2063
一、什么是JavaScript?
js:三种弹出框（alter警告，confirm确认，prompt提示）
qq_52824207的博客
04-10 1万+
三种弹出框都属于window对象，完整写作window.alter，三种弹出框都可省略window. alter弹出警告框，只有一个确定按钮 alert("这是一个警告框"); confirm弹出确认框，有两个按钮：确定和取消，分别返回true和false confirm("这是一个确认框，确定返回true，取消返回false"); prompt弹出提示框，确定，取消，输入框，确定返回输入框的值（不输入为空""），取消返回Null prompt("这是一个提示框，确定返回输入值，取消返回N
01JavaScript基础
m0_70083523的博客
08-22 504
掌握JavaScript的组成 掌握JavaScript的基本语法 会定义和使用函数 会使用工具进行代码调试
JS中alert的三种使用方式
热门推荐
qq_45240701的博客
06-14 10万+
JS中的alert，作用是在浏览器中弹出一个警告框。 而使用alert，有三种方式，不同的方式，所呈现的效果也不相同。 第一种方式：直接写在script标签中 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> &l...
JS中alert和alter
weixin_46059890的博客
03-03 1665
JS中没有alter，只用alert，alert表示输出后面的语句
javaScript
03-09
Java脚本
Javascript
03-22
javascript-examples JavaScript网页程式设计
JavaScript入门
03-04
JavaScript入门
JAVASCRIPT HashTable
10-31
JAVASCRIPT HashTable
Javascript项目
02-13
Javascript项目
JS课堂笔记（七）
weixin_73656077的博客
09-27 391
height窗口高度width窗口宽度top窗口距离屏幕上方的像素值left窗口距离屏幕左侧的像素值toolbar是否显示工具栏，yes 或1为显示menubar是否显示菜单栏，yes或1为显示scrollbars是否显示滚动条，yes或1为显示resizable是否允许改变窗口大小，yes或1为允许location是否显示地址栏，yes或1为显示status是否显示状态栏内的信息，yes 或1为显示fullscreen是否显示为全屏，yes或1为显示。
【JavaScript】alert的使用方法 | 超详细
2301_78131481的博客
11-26 5988
alert（）方法用于显示带有一条指定消息和一个确认的按钮的警告框。
JS alter网页输出乱码
WaterArticle
05-28 221
JS alter网页输出乱码
JS学习笔记
12-11 117
一、js如何运行二、输出 document.write(); alter(); 三、如何在HTML中是用JS 1.使用<script></script>将JS语法嵌入到HTML中，可以使用多个，每一个之间都是有关联的； 2.href = "javascript:代码"; 3.各种响应事件中 4.写到外部文件中（.js）<script src = "相对路径"...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值