JavaScript - 01 基础功能

最新推荐文章于 2024-07-11 18:00:32 发布
最新推荐文章于 2024-07-11 18:00:32 发布
阅读量510 收藏
点赞数
分类专栏： javaScript 文章标签： javascript safari 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59214979/article/details/122677020
版权

本节：基础的JS功能的编写。

JACAscript

1.写一个函数，调用这个函数，函数带了2个参数。

（1）调用：account(10,20)

函数：

function account(price, number){

    var sum = price * number;

    return sum；

}

（2）

调用：hello(“张三”，10)

函数:
function hello(name,age){

document.write('你好'+name+age)}

2.使用jQuery写向后端发送数据，参数名参数值随意。

//button是id或者class

$("button").click(function(){

    $.post("发送的文件",

{

//传的参数

        name:"数值",

        url:"数值值"

    },

    function(data,status){  //成功之后传的函数名

        alert("数据: \n" + data + "\n状态: " + status);

    });

});

3.请输入数字。如果输入值不是数字，浏览器会弹出提示框

<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>

<input id="demo" type="text">

<script>

function myFunction()

{

var x=document.getElementById("demo").value;

if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){

alert("不是数字");

}

}

</script>

<button type="button" οnclick="myFunction()">点击这里</button>

4.循环输出内容：John 现在 50 岁。

<p id="demo"></p>

<script>

var person = {

    firstName : "John",

    lastName  : "Doe",

    age       : 50,

    eyeColor  : "blue"

};

document.getElementById("demo").innerHTML =

person.firstName + " 现在 " + person.age + " 岁。";

</script>

  1. 点击出现弹窗

<button οnclick="myFunction()">点我</button>

<script>

function myFunction()

{

    alert("Hello World!");

}

</script>

局部变量在函数里面定义的变量，函数执行完后局部变量会自动销毁。函数外面使用无效

<p id="demo"></p>

<script>

var carName = "Volvo";   // 全局变量

myFunction();

function myFunction()

{

    document.getElementById("demo").innerHTML =

"我可以显示 " + carName;

var carName = "Volvo";  //在函数里面是局部变量

}

6.<button οnclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

<p id="demo"></p>

7.输出的是false

<p id="demo"></p>

<script>

var x = "John";              // x 是字符串

var y = new String("John");  // y 是一个对象

document.getElementById("demo").innerHTML = x===y;

</script>

<p>=== 为绝对相等，即数据类型与值都必须相等。</p>

  1. 判断，三元运算符

<p>点击按钮检测年龄。</p>

年龄:<input id="age" value="98" />

<p>是否达到投票年龄?</p>

<button οnclick="myFunction()">点击按钮</button>

<p id="demo"></p>

<script>

function myFunction()

{

    var age,voteable;

    age=document.getElementById("age").value;

    voteable=(age<18)?"年龄太小":"年龄已达到";

    document.getElementById("demo").innerHTML=voteable;

}

</script>

9.点击下面的按钮，只要 i 小于 5 就一直循环代码块。

<button οnclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script>

function myFunction(){

    var x="",i=0;

    while (i<5){

        x=x + "该数字为 " + i + "<br>";

        i++;

    }

    document.getElementById("demo").innerHTML=x;

}

或者

function myFunction(){

var x="",i=0;

do{

x=x + "该数字为 " + i + "<br>";

    i++;

}

while (i<5)  

document.getElementById("demo").innerHTML=x;

}

</script>

10.循环输出数组

<script>

cars=["BMW","Volvo","Saab","Ford"];

var i=0;

for (;cars[i];){

    document.write(cars[i] + "<br>");

    i++;

}

</script>

  1. typeof 操作符返回变量或表达式的类型。
  2. <p id="demo"></p>

<script>

document.getElementById("demo").innerHTML =

typeof "john" + "<br>" +    //string

typeof 3.14 + "<br>" +        //number

typeof false + "<br>" +            //boolean

typeof [1,2,3,4] + "<br>" +      //object

typeof {name:'john', age:34};       //object

</script>

13.你可以设置为 null 来清空对象:

var person = null;           // 值为 null(空), 但类型为对象

,undefined 是一个没有设置值的变量。比如var person;就是有变量，但是没有值

null 和 undefined 的值相等，但类型不等：

14.在 JavaScript 中有 6 种不同的数据类型：String，number，boolean，object，function，symbol

3 种对象类型：Object，Date，Array

2 个不包含任何值的数据类型：Null，undefined

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

NaN 的数据类型是 number，数组(Array)的数据类型是 object

日期(Date)的数据类型为 object，null 的数据类型是 object

未定义变量的数据类型为 undefined，如果对象是 JavaScript Array 或 JavaScript Date ，我们就无法通过 typeof 来判断他们的类型，因为都是 返回 object。

15.<p> String() 方法可以将数字转换为字符串。</p>

<p id="demo"></p>

<script>

var x = 123;

document.getElementById("demo").innerHTML =

    String(x) + "<br>" +

    String(123) + "<br>" +

    String(100 + 23);

</script>

  1. 无论前面是什么函数，最后都会执行finally函数

  finally {

    document.getElementById("demo").value = "";

  }

17.请输出一个 5 到 10 之间的数字

<input id="demo" type="text">

<button type="button" οnclick="myFunction()">测试输入</button>

<p id="message"></p>

<script>

function myFunction() {

    var message, x;

    message = document.getElementById("message");

    message.innerHTML = "";

    x = document.getElementById("demo").value;

    try {

        if(x == "")  throw "值为空";

        if(isNaN(x)) throw "不是数字";

        x = Number(x);

        if(x < 5)    throw "太小";

        if(x > 10)   throw "太大";

    }

    catch(err) {

        message.innerHTML = "错误: " + err;

    }

}

debugger 关键字用于停止执行 JavaScript，并调用调试函数

禁止this关键字指向全局对象。

function f(){

    return !this;} // 返回false，因为"this"指向全局对象，"!this"就是false

function f(){ 

    "use strict";

    return !this;} // 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。

因此，使用构造函数时，如果忘了加new，this不再指向全局对象，而是报错。

function f(){

    "use strict";

    this.a = 1;};

f();// 报错，this未定义

18.HTML 表单自动验证

HTML 表单验证也可以通过浏览器来自动完成。

如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：

点击提交按钮，如果输入框是空的，浏览器会提示错误信息。

.<form action="demo_form.php" method="post">

  <input type="text" name="fname" required="required">

  <input type="submit" value="提交">

</form>

19.下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

<script>

function validateForm(){

var x=document.forms["myForm"]["fname"].value;

if (x==null || x==""){

  alert("姓必须填写");

  return false;

  }

}

</script>

</head

<body>

<form name="myForm" action="demo-form.php" οnsubmit="return validateForm()" method="post">

姓: <input type="text" name="fname">

<input type="submit" value="提交">

</form>

20.下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

<script>

function validateForm(){

var x=document.forms["myForm"]["email"].value;

var atpos=x.indexOf("@");

var dotpos=x.lastIndexOf(".");

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){

alert("不是一个有效的 e-mail 地址");

   return false;

}

}

</script>

</head>

<body>

<form name="myForm" action="demo-form.php" οnsubmit="return validateForm();" method="post">

Email: <input type="text" name="email">

<input type="submit" value="提交">

</form>

21.输入数字并点击验证按钮:如果输入的数字小于 100 或大于300，会提示错误信息。

<input id="id1" type="number" min="100" max="300" required>

<button οnclick="myFunction()">验证</button>

<p id="demo"></p>

<script>

function myFunction() {

    var inpObj = document.getElementById("id1");

    if (inpObj.checkValidity() == false) {

        document.getElementById("demo").innerHTML = inpObj.validationMessage;

    } else {

        document.getElementById("demo").innerHTML = "输入正确";

    }

}

Property Description

checkValidity() 如果 input 元素中的数据是合法的返回 true，否则返回 false

setCustomValidity()

设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。

使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity 总是会返回false。如果要重新判断需要取消自定义提示，方式如下：

setCustomValidity('')

setCustomValidity(null)

setCustomValidity(undefined)

  1. 输入数字并点击验证按钮,如果输入的数字大于 100 ( input 的 max 属性), 会显示错误信息。

<input id="id1" type="number" max="100">

<button οnclick="myFunction()">验证</button>

<p id="demo"></p>

<script>

function myFunction() {

    var txt = "";

    if (document.getElementById("id1").validity.rangeOverflow) {

        txt = "输入的值太大了";

    } else {

        txt = "输入正确";

    }

    document.getElementById("demo").innerHTML = txt;

}

</script>

//rangeOverflow 设置为 true, 如果元素的值大于设置的最大值。

function myFunction() {

    var txt = "";

var inpObj = document.getElementById("id1");

if(!isNumeric(inpObj.value)) {

txt = "你输入的不是数字";

} else if (inpObj.validity.rangeUnderflow) {

        txt = "输入的值太小了";

    } else {

        txt = "输入正确";

    }

    document.getElementById("demo").innerHTML = txt;

}

// 判断输入是否为数字

function isNumeric(n) {

    return !isNaN(parseFloat(n)) && isFinite(n);

}

23.ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

在 ES6 之前，JavaScript 只有两种作用域： 全局变量 与 函数内的局部变量。

let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

24.重新定义变量

使用 var 关键字重新声明变量可能会带来问题。

在块中重新声明变量也会重新声明块外的变量：var x = 10; // 这里输出 x 为 10 { var x = 2; // 这里输出 x 为 2 } // 这里输出 x 为 2

let 关键字就可以解决这个问题，因为它只在 let 命令所在的代码块 {} 内有效：var x = 10; // 这里输出 x 为 10 { let x = 2; // 这里输出 x 为 2 } // 这里输出 x 为 10

  1.  JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。
    文本可以被任何编程语言读取及作为数据格式传递。

"sites":[ {"name":"Runoob", "url":"www.runoob.com"}, {"name":"Google", "url":"www.google.com"}, {"name":"Taobao", "url":"www.taobao.com"} ]

JSON 字符串转换为 JavaScript 对象

通常我们从服务器中读取 JSON 数据，并在网页中显示数据。

简单起见，我们网页中直接设置 JSON 字符串 (你还可以阅读我们的 JSON 教程):

首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：

var text = '{ "sites" : [' +

'{ "name":"Runoob" , "url":"www.runoob.com" },' +

'{ "name":"Google" , "url":"www.google.com" },' +

'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

<h2>为 JSON 字符串创建对象</h2>

<p id="demo"></p>

<script>

var text = '{ "sites" : [' +

'{ "name":"Runoob" , "url":"www.runoob.com" },' +

'{ "name":"Google" , "url":"www.google.com" },' +

'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

obj = JSON.parse(text);

document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

</script>

26.javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

语法格式如下：

void func()

javascript:void func()

  <a href="javascript:void(0)">单击此处什么也不会发生</a>

27.

回调函数

回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了，他自己会善始善终。

<p>回调函数等待 3 秒后执行。</p>

<p id="demo"></p>

<script>

function print() {

    document.getElementById("demo").innerHTML="RUNOOB!";

}

setTimeout(print, 3000);

</script>

V_zcm
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript表单验证
阳光下的冷静的博客
01-06 3082
JavaScript表单验证： JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 JavaScript验证内容： 验证表单数据是否为空？ 验证输入是否是一个正确的email地址？ 验证日期是否输入正确？ 验证表单输入内容是否是为数字型？ 逐个分析JavaScript表单验证内容： 必填(或必选)项目 该验证用来检查用户是否已填写表单...
JavaScript基础01
vGuYi的博客
05-21 291
JavaScript是什么？ JavaScript 是一种运行在客户端（浏览器）的编程语言 JavaScript组成是什么？ ECMAScript( 基础语法 )、web APIs （DOM、BOM） JavaScript入门 JavaScript 书写位置 内部 JavaScript 直接写在html文件里，用script标签包住 规范：script标签写在</body>上面 外部 JavaScript 代码写在以.js结尾的文件里.
JavaScript—比较和逻辑运算符
ly_twt的博客
08-19 221
比较运算符1.比较运算符在逻辑语句中使用，以测定变量或值是否相等。 （==、===、！=、！==、>、<、>=、<=）逻辑运算符1.逻辑运算符用于测定变量或值之间的逻辑。 （&&、||、！）——与、或、非条件运算符1. 如果变量 age 中的值小于 18，则向变量 voteable 赋值 “年龄太小”，否则赋值 “年龄已达到”。voteable=(age<18)?"年龄太小":"年龄已达到";
js基础功能
Champions_Zane
08-31 288
一、js的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ========================     //弹出对话框并输出一段提示信息     function ale() {         //弹出一个对话框         alert("提示信息！");     }     //弹出一个询问框
js基础
weixin_30929195的博客
07-24 85
--引入 JS特点 　　轻量级脚本语言 　　区分大小写 　　语句使用分号';'分隔,但使用分号并不是必须的，也可以不用。 　　数字，字符串类似于Python，布尔值为true、false，数组==Python中的list 　　===为绝对相等，即类型、数值相等。而==则表示数值相等。‘3’==3 是对的 　　使用函数，以花括号{}分隔，函数可以有多个参数，可以有返回值 　　变量可以...
js菜鸟教程
qq_33205354的博客
05-24 2687
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt;&lt;body&gt;&lt;p&gt;点击按钮检测年龄。&lt;/p&a
JavaScript-0基础入门
weixin_46726946的博客
05-07 1490
1 计算机编程基础 1.1 编程语言 1.1.1 编程 编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。 计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。 注意：上面所定义的计算机指的是任何能够执行代码的设备，可能是智能手机、ATM机、黑莓PI、服务器等等。 1.1.2 计算机语言 计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传.
01-JavaScript-基础1
08-03
JavaScript 是一种广泛用于客户端Web开发的脚本语言，由Netscape公司开发，它是一种基于对象和事件驱动的编程语言。JavaScript的出现极大地...学习和掌握JavaScript的基础知识，对于任何Web开发者来说都是至关重要的。
photoshop-cc-javascript-ref-2019.pdf
06-06
5. **脚本编写基础**：文档会涵盖基本的JavaScript语法，如变量声明、数据类型、流程控制（条件语句、循环）、函数定义等，以及如何在Photoshop环境中使用这些概念。 6. **示例脚本和模板**：书中可能包含多个示例...
JavaScript-Advanced:JavaScript-高级JavaScript-基础知识
03-08
在JavaScript的基础知识中，首先我们需要了解它的基本语法。JavaScript是基于ECMAScript规范的，它支持变量（var, let, const）、数据类型（如字符串、数字、布尔值、null、undefined、对象和数组）、操作符（包括...
JavaScript-Fundamentals:JavaScript基础知识。功能编程
03-20
通过深入学习这些JavaScript基础和功能编程概念，开发者可以构建出高效、可维护的代码，更好地适应不断发展的Web开发环境。这个“JavaScript-Fundamentals”课程或资源应包含实践练习和示例，帮助初学者和有经验的...
javascript-calendar:日历显示周
06-24
当我们谈论“javascript-calendar:日历显示周”时，我们关注的是如何使用JavaScript来创建一个功能丰富的日历组件，这个组件能够清晰地展示一周的日期。下面我们将深入探讨这个主题，包括JavaScript日历的基本原理、...
vue.js中created()、activated()、deactivated()理解
qq_29207823的博客
07-23 7782
created()：在创建vue对象时，当html渲染之前触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次； activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据、keepalive缓存组件后，可执行方法； deactivated()：离开组件时执行； 注意：activated()和deactivated()只有在<keep-alive></ke
JS基础知识（5）-逻辑、比较、条件
望望byte的博客
07-20 411
文章目录JS逻辑Boolean()函数比较和条件所有具有“真实”值的即为true所有不具有“真实”值的即为false布尔可以是对象：JS比较比较运算符逻辑运算符条件（三元）运算符比较不同类型JS条件if 语句else 语句else if 语句switch语句break 关键词常见代码块：swiching的细节严格比较 JS逻辑 JavaScript 布尔（逻辑）代表两个值之一：true 或 false。 Boolean()函数 **用途：**确定表达式（或变量）是否为真： Boolean(10 > 9
判断用户的输入是否为数字。若不为数字，则提示用户输入数字。c程序。
lemmon_tree的博客
01-10 2079
/* 该程序判断用户输入的内容是否为数字， 若不为数字，则打印出用户的输入，并提示用户输入数字， 若为数字，则打印出该数字 */ #include <stdio.h> long get_long(void); int main(void) { long num; num = get_long(); printf("num=%ld", num); return 0; } long get_long(void) { long input; char ch; printf("Plea
JavaScript基础-知识点总结
qq_16657805的博客
10-18 404
1. JavaScript简介 1. 什么是JavaScript？ JavaScript 是⼀种客户端脚本语⾔（脚本语⾔是⼀种轻量级的编程语⾔）。 JavaScript 通常被直接嵌⼊ HTML ⻚⾯，由浏览器解释执⾏ JavaScript 是⼀种解释性语⾔（就是说，代码执⾏不进⾏预编译）。 特点：弱类型和基于对象。(因为⾯向对象需要具有封装、继承、多态的特征) JavaScript语⾔中包含三个核⼼：ECMAScript基本语法、DOM(Document object model)文档对象模型、BOM
【JavaScript 】比较 和 逻辑运算符
Homer
11-28 346
JavaScript 比较 和 逻辑运算符 比较和逻辑运算符用于测试 true 或者 false。 比较运算符 比较运算符在逻辑语句中使用，以测定变量或值是否相等。 x=5，下面的表格解释了比较运算符： 运算符 描述 比较 返回值 实例 == 等于 x==8 false 实例 »
javascript简单介绍总结（二）
weixin_30628077的博客
11-02 67
JavaScript 函数函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。JavaScript 函数语法函数就是包裹在花括号中的代码块，前面使用了关键词 function：function functionname(){执行代码}当调用该函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。调用带参数的函...
vue2 实现原生 WebSocket
最新发布
weixin_38797742的博客
07-11 385
原生WebSocket： new WebSocket。
五、JavaScript-jQuery
08-04
掌握JavaScript-JQuery的基础知识和实际应用方法，能够使网页开发者更好地实现网页的交互效果和动态功能，并且能够为网页增加更多的魅力和实用性。因此，对JavaScript-JQuery的学习和运用是非常有必要的。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值