用javascript 的平台 javascript用什么软件编写

转载

mob64ca14040d22 2024-07-12 16:57:57

文章标签 用javascript 的平台 html HTML 变量名 文章分类 JavaScript 前端开发

JavaScript

JavaScript是一门跨平台，面向对象的脚本语言，来控制网页行为的，它能够使网页可交互。
基础语法与java类似
JavaScript（简称：JS）在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。
ECMAScript 6 (ES6) 是最新的 JavaScript 版本（发布于 2015 年)。

JavaScript引入方式

内部方式

在html文件中，使用<script>标签来编写js代码。
建议编

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
<!-- 内部引入-->
<script>
    alert("京阿");
</script>

外部方式

将js代码编写为一个后缀名为js的文件中。
在html文件中通过<script scr="js路径"></script>引入文件

<script src="../js/alert.js"></script>

alert("真菜");

书写语法

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无、建议写上
注释

单行注释：// 注释的内容
多行注释：/* 注释的内容 */

一对大括号标识代码块

输出语句

使用window.alert()写入警告框
使用document.write()写入 HTML 输出
使用console.log()写入浏览器控制台

<script>
    //定义全局变量
    var num=10010;
    window.alert(num);
    var num="王五";
    alert(num);
    //定义局部变量
    {
        let num2=10086;
        //let num2 = 50;
        document.write(num2);
    }
    //定义常量
    const num3=10000;
    console.log(num3);
   // num3=50;
</script>

变量介绍

variable的缩写var是JavaScript声明变量的方式。

var定义的变量是全局变量，可在var所在代码块的外部访问,但是var在方法中定义就是局部变量了

function a1() {
        var a=1;
    }
    /*{
        var a=1;
    }*/
    alert(a);

可以重复定义覆盖旧值

var a=20;
var a=30;

JavasScript是一门，弱类型语言可以存放不同类型的变量
组成字母，数字，下划线_,英文$符号，数字不能开头，建议使驼峰命名。
ECMAScript 6新增了let关键字来定义变量，类似于var,但是let只在自己的代码块中有效，且与java一样不允许重复声明。
ECMAScript 6新增const关键字，用来声明一个只读的常量。一旦声明不能改值。

注意事项(let报错)

如果let变量报错、需要修改idea中js的版本。
在File->Settings->Languages & FrameWorks->JavaScript，将版本改为 ECMAScript 6

数据类型

原始类型和引用类型
typeof（）获取数据类型
原始类型分类：

number：数字（整数、小数、NaN(Not a Number)）
string：字符、字符串，单双引皆可
boolean：布尔。true，false
null：对象为空，对于null使用typeof()方法会返回object，null被认为是对象占位符
undefined：当声明的变量未初始化时，该变量的默认值是 undefined

运算符

运算符分类（类似于Java）

一元运算符：++，--
算术运算符：+，-，*，/，%
赋值运算符：=，+=，-=…
关系运算符：>，<，>=，<=，!=，==，===
逻辑运算符：&&，||，!
三元运算符：条件表达式 ? 表达式1 : 表达式2;

类型转换

其他类型转化为bumber

1 string:按照字符转的子面值，转为数字，如果字面值不是数字，转化为NAN

var str=+"adc";+号代表正数 parseInt()

2 boolean true 转换为1 false 转换为0

其他类型转换为boolean（用于简化健壮性判断）

1 number 0和NAN转换为0，其他数字为true

2 string 空字符串为false

3 null 为false

4 undefined为false0

类型转换细节

== 和 ===

== 会进行类型转换、转换后再比较数据值。
=== 不会进行类型转换、类型不一致直接返回false。

其他类型转为数字

string:将字符串字面值转为数字。如果字面值不是数字，则转为NaN。一般使用parseInt方法进行转换。
boolean: true 转为1，false 转为0。

其他类型转为 boolean

number：0和NaN转为false，其他的数字转为true。
string：空字符串转为false，其他字符串转为true。
null: 转为false。
undefined：转为false。

流程控制语句

if
switch
for
while
do…while

函数

1.函数介绍

js中的函数类似java中的方法。
将共性功能抽取到方法中、提高代码的复用性。
将不同的功能在不同的方法中实现、提高代码的阅读性。
使用function关键字定义函数

2.函数格式

格式一：

形式参数不需要类型。因为JavaScript是弱类型语言。
返回值也不需要定义类型，可以在函数内部直接使用return返回即可。

因为var的性质使得javaScript有以上特点

// 书写格式
function 函数名(参数1,参数2,...){
    方法体;
    return 结果;
}

// 调用格式
var 变量名 = 函数名(实际参数);   // 有返回值方法
函数名(实际参数);                 // 无返回值方法

.//定义
function add(a,b){
return a+b;
}
//调用
var result=add(1,2);

格式二

// 书写格式
var 函数名 = function(参数1,参数2,...){
    方法体;
    return 结果;
}

// 调用格式
var 变量名 = 函数名(实际参数);   // 有返回值方法
函数名(实际参数);                 // 无返回值方法
 // 格式二
    var add = function (a,b){
        return a + b;
    }
    var result = add(1,2);
    alert(result);

函数调用可以传递任意个参数，但没有什么意义

var result1=add(1,2,3)//3实际上没什么用处，但是可以传递
var result2=add(1) 第二个参数被NAN代替，结果NAN

JavaScript对象

Array

格式一

var 变量名 = new Array(元素列表);

格式二

var 变量名 = [元素列表];

<script>
    var arry=new Array();
    arry.push(1,2,30);
    alert(arry[1]);
    var arry1=[1,2,"王宝强",4,5,"杨幂"];
    arr1[10]="少年Π"
    alert(arry1)
</script>

JavaScript 数组参考手册 (w3school.com.cn)

String对象

格式一

var 变量名 = new String(s);

格式二

var 变量名 = s;   // 单引、双引都可以

JavaScript String 参考手册 (w3school.com.cn)

trim() 去除字符串两端，空格问题

自定义对象

{}代表对象 : 连接属性值或者方法体 ,号连接属性和方法

var 对象名称 = {
属性名称1:属性值1,
属性名称2:属性值2,
...
函数名称:function (形参列表){}
...
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义对象</title>
</head>
<body>

</body>
</html>

<script>
    var name="王宝强"；
    var person = {
        name : "百丽",
        age : 26,
        eat:function () {
            alert(this.name+"上班干活...");//this.name 百丽干活 name 王宝强干活
        }
    };

    alert(person.name);
    alert(person.age);
    person.age = 38;
    alert(person.age);
    person.eat();
</script>

Window对象

Window 对象 (w3school.com.cn)

BOM介绍

Browser Object Model 浏览器对象模型
JavaScript 将浏览器的各个组成部分封装为对象

Window：浏览器窗口对象
Navigator：浏览器对象 (了解)
Screen：屏幕对象 (了解)
History：历史记录对象
Location：地址栏对象

Window窗口对象

获取：直接使用 window，其中window. 可以省略
属性：获取其他 BOM对象

用javascript 的平台 javascript用什么软件编写_html

方法

用javascript 的平台 javascript用什么软件编写_html_02

<script>
    window.setInterval(function () {
        var b = window.confirm();
        if (b){window.alert("杨幂");} else {window.alert("王宝强");}
    },300)

</script>

History历史记录对象

获取：window.history.函数() (window.可以省略)
函数

back() 上一个url (类似浏览器中的<-后退按钮)
forward() 下一个url (类似浏览器中的->前进按钮)

Location地址栏对象

获取：window.location.属性 (window.可以省略)
属性

href 设置跳转的url

DOM介绍

Document Object Model 文档对象模型
Dom w3c的标准，定义了xml和html（将html标签封装为元素对象如<img> Image <input type="button"> Button）的访问标准
将标记语言的各个组成部分封装为对象

Document 整个文档对象
Element 元素对象
Text 文本对象
Attribute 属性对象
Comment 注释对象

JavaScript 通过 DOM，就能够对 HTML进行操作了

改变 HTML 元素的内容
改变 HTML 元素的样式（CSS）
对 HTML DOM 事件作出反应
添加和删除 HTML 元素

用javascript 的平台 javascript用什么软件编写_变量名_03

1.Element对象使用document对象的方法获取元素对象

getElementById(id值)：根据id属性值获取，返回一个Element对象
getElementsByTagName(标签名)：根据标签名称获取，返回Element对象数组
getElementsByName(name值)：根据name属性值获取，返回Element对象数组
getElementsByClassName(class值)：根据class属性值获取，返回Element对象数组

Element对象进行操作

获取的Element对象是 img 图片标签

src：改变图片资源

获取的Element对象是 div 标签

style：控制样式
innerHTML：改变标签内容

获取的Element对象是 input 标签的多选框

checked：默认被选中

<img id="women" src="../imgs/1.png"/>
<div class="cls">传智播客</div>
<div class="cls">河马和荷花</div>
<input type="checkbox" name="hobby"/>飞
<input type="checkbox" name="hobby"/>跑
<input type="checkbox" name="hobby"/>跳
<input type="checkbox" name="hobby"/>顶
<a href="#" id="a">点我我就变化</a>

</body>
</html>
    <script>
    document.getElementById("a").href="../imgs/reg_bg_min.jpg";
    document.getElementById("women").src="../imgs/10.png";
    var elementsByClassName = document.getElementsByClassName("cls");
    for (let i = 0; i <elementsByClassName.length ; i++) {
        elementsByClassName[i].style.fontSize="30px";
        //设置元素内容
        elementsByClassName[i].innerHTML="飞天";
    }
    var hobby = document.getElementsByName("hobby");

    for (let i = 0; i <hobby.length ; i++) {
        window.alert(hobby[i]);
        hobby[i].checked=true;
    }

</script>

事件监听

事件：HTML 事件是发生在 HTML 元素上的“事情”。例如：(按钮被点击、鼠标移动移出、键盘按键按下等)。
事件监听：JavaScript 可以在事件被侦测到时执行对应的代码。

事件绑定

方式一：通过 HTML标签中的事件属性进行绑定

<input type="button" onclick='on()’>

function on(){    
    alert("我被点了");
}

方式二：通过 DOM 元素属性绑定

<input type="button" id="btn">

document.getElementById("btn").onclick = function (){
    alert("我被点了");
}

常见事件

用javascript 的平台 javascript用什么软件编写_用javascript 的平台_04

HTML DOM 事件 (w3school.com.cn)

<form action="#" method="post" autocomplete="off" id="register">
    用户名 ：<input type="text" name="username" id="u"/>
    <input type="submit" value="提交"/>
</form>
<script>
    document.getElementById("register").onsubmit=function () {
        let username = document.getElementById("u").value;
        if (username.length==6){
            alert("用户名符合规则");
            return true;
        } else{
            alert("用户名不符合规则");
            return false;
        }
    }
</script>

表单验证

用javascript 的平台 javascript用什么软件编写_HTML_05

用javascript 的平台 javascript用什么软件编写_用javascript 的平台_06

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="../css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="#" method="get" autocomplete="off">
        <table>
            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名格式有误</span>
                </td>
            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>

            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>
        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>
</div>
</body>
</html>

<script>
    //用户名验证
    let username = document.getElementById("username");
    username.onblur=checkUsername;
        function checkUsername() {
        let value = username.value.trim();
        let flag=(value.length!=6);
        if (flag){
            document.getElementById("username_err").style.display='';
        }else {
            document.getElementById("username_err").style.display='none';
        }
        return flag;
    }
    //密码名验证
    let password = document.getElementById("password");
    password.onblur=checkPassword;
        function checkPassword() {
        let value = password.value.trim();
        let flag=value.length!=6;
        if (flag){
            document.getElementById("password_err").style.display='';
        }else {
            document.getElementById("password_err").style.display='none';
        }
        return flag;
    }
    //手机号名验证
    let tel = document.getElementById("tel");

    tel.onblur=checkTel;
        function checkTel() {
        let value = tel.value.trim();
        let flag=value.length!=11;
        if (value.length!=11){
            document.getElementById("tel_err").style.display='';
        }else {
            document.getElementById("tel_err").style.display='none';
        }
        return flag;
    }
    //表单验证
    var regfrom = document.getElementById("reg-form");
    regfrom.onsubmit=function () {
      var flag=checkUsername()&&checkPassword()&&checkTel();
      return flag;
    }

</script>

View Code

用javascript 的平台 javascript用什么软件编写_html_07

View Code

正则表达式

定义了字符串组成规则

定义方式

直接赋值

var reg = /^\w{6,12}$/;   /中间写正则表达式/

创建对象

var reg = new RegExp("^\w{6,12}$");

成员方法

test(str)：用于判断是否满足指定的规则。满足为true、不满足为false。

例如 reg.test("要检测的数据") 符合返回true 不符合返回false

语法

用javascript 的平台 javascript用什么软件编写_变量名_08

用javascript 的平台 javascript用什么软件编写_用javascript 的平台_09

用javascript 的平台 javascript用什么软件编写_用javascript 的平台_06

1 <body>
 2 
 3 <div class="form-div">
 4     <div class="reg-content">
 5         <h1>欢迎注册</h1>
 6         <span>已有帐号？</span> <a href="#">登录</a>
 7     </div>
 8     <form id="reg-form" action="#" method="get" autocomplete="off">
 9         <table>
10             <tr>
11                 <td>用户名</td>
12                 <td class="inputs">
13                     <input name="username" type="text" id="username">
14                     <br>
15                     <span id="username_err" class="err_msg" style="display: none">用户名格式有误</span>
16                 </td>
17             </tr>
18 
19             <tr>
20                 <td>密码</td>
21                 <td class="inputs">
22                     <input name="password" type="password" id="password">
23                     <br>
24                     <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
25                 </td>
26             </tr>
27 
28             <tr>
29                 <td>手机号</td>
30                 <td class="inputs"><input name="tel" type="text" id="tel">
31                     <br>
32                     <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
33                 </td>
34             </tr>
35         </table>
36 
37         <div class="buttons">
38             <input value="注 册" type="submit" id="reg_btn">
39         </div>
40         <br class="clear">
41     </form>
42 </div>
43 </body>
44 </html>
45 
46 <script>
47     //用户名验证
48     let username = document.getElementById("username");
49     username.onblur=checkUsername;
50         function checkUsername() {
51         let value = username.value.trim();
52         var reg=/^\w{6,12}$/;
53         let flag=reg.test(value);
54         if (!flag){
55             document.getElementById("username_err").style.display='';
56         }else {
57             document.getElementById("username_err").style.display='none';
58         }
59         return flag;
60     }
61     //密码名验证
62     let password = document.getElementById("password");
63     password.onblur=checkPassword;
64         function checkPassword() {
65         let value = password.value.trim();
66             var reg=/^\w{6,12}$/;
67             let flag=reg.test(value);
68         if (!flag){
69             document.getElementById("password_err").style.display='';
70         }else {
71             document.getElementById("password_err").style.display='none';
72         }
73         return flag;
74     }
75     //手机号名验证
76     let tel = document.getElementById("tel");
77 
78     tel.onblur=checkTel;
79         function checkTel() {
80         let value = tel.value.trim();
81        var reg=/^[1]\d{10}$/;
82        var flag = reg.test(value);
83         if (!flag){
84             document.getElementById("tel_err").style.display='';
85         }else {
86             document.getElementById("tel_err").style.display='none';
87         }
88         return flag;
89     }
90     //表单验证
91     var regfrom = document.getElementById("reg-form");
92     regfrom.onsubmit=function () {
93       var flag=checkUsername()&&checkPassword()&&checkTel();
94       return flag;
95     }
96 
97 </script>

View Code

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：配置一个用户有提交yarn 队列的权限用户组的配置文件是

下一篇：大学一学期的python课程大学 python

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯