JavaScript个人总结

最新推荐文章于 2022-03-10 20:51:59 发布
最新推荐文章于 2022-03-10 20:51:59 发布
阅读量1k 收藏 1
点赞数
分类专栏： Java 文章标签： javascript input button function 浏览器 date
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dingyuanpu/article/details/4013776
版权

1、JavaScript代码出现的位置：

       * html页面的主题（<body>元素）如：

              <body>

                     <script language = "javascript">

                            document.write("Hello,你好");

                     </script>

</body>

* html 页面的头部（<head元素> 上面的代码可以放在这，但通常是定义函数，可以在body中调用）

* 单独的外边文件中<script language = “javascript” src = “外边脚本的url”></script>（便于多个页面的重用

 

2、Javascript的关键字大小写不敏感，但是变量名是敏感的（A和a是不同的）。上面的document.write相当于jsp中的out.prient

 

2、基本数据类型：整形、浮点型、字符型、布尔

     对象类型：内置对象（String、Math、Date）

                     浏览器对象（Window、Document、History、Forms……）

 

3、javascript是弱类型语言，变量声明时不指定数据类型，其数据类型根据所赋值类型决定，声明通常使用var，也可以不声明，但必须先赋值

4、pre：原样输出（html）&quot：双引号，如果没有pre的话，里面的一些/n、/t等都会被过滤，===（全等号类型，值都一样）==（只是值相等）

5、var sex = window.prompt("请输入您的性别（男/女）","")；whindow是一个浏览器对象，prompt弹出一个文本框，后面是默认值

6、javascript中swhitch可以是string类型。

7、for—in循环：

     <script language = "javascript">

       document.write("for--in循环");

       var a = new Array(3);

       a[0] = "ding";

       a[2] = "yuan";

       a[3] = "pu";

       for(var s in a) {

              document.write("<li>" + a[s] + "</li>");

       }

     </script>

8、javascript中数组的长度可变，你声明的长度是3，但你可以放5个元素

9、 <html>

<head>

       <script type="text/javascript">

              function sayHello() {

                     alert("欢迎光临");

              }

              function sayBye() {

                     alert("再见");

              }

       </script>

</head>

<body οnlοad="sayHello()" οnunlοad="sayBye()">

</body>

</html>

加载onload卸载onunload

10、<script type="text/javascript">

              function clear1() {

                     document.myform1.uname.value = "";

              }

              function show() {

                     alert("你输入的姓名是：" + document.myform1.uname.value);

              }

       </script>

<input type = "text" name = "uname" value = "请输入姓名" onfocus = "clear1()" onBlur = "show()">

文本框获得焦点，失去焦点

11、鼠标跟随：

       <html>

<head>

       <style>

              .mystyle {

                     position:absolute;

                     left:12;

                     top:222;

              }

       </style>

       <script language="javascript">

              function move(x, y) {

                     mypic.style.left=x;

                     mypic.style.top=y;

              }

       </script>

</head>

<body onMousemove="move(event.x, event.y)">

       太好玩了！！！

       <div class="mystyle" id="mypic">

              <img src="fish.gif">

       </div>

</body>

</html>

12、输出日期：

<body>

       <script language = "JavaScript">

              var cur = new Date();

              document.write(cur);

              document.write("<br>");

              document.write(cur.getYear() + " 年 " + cur.getMonth()

              + " 月 " + cur.getDay() + " 日 "  + cur.getHours() + " : "

              + cur.getMinutes() + " : " + cur.getSeconds());

       </script>

</body>

 

13、表：

       <html>

<head>

       <script language = "JavaScript">

              function showTime() {

                     var now = new Date();

                     var year = now.getYear();

                     var month = now.getMonth() + 1;

                     var date = now.getDate();

                     var day = now.getDay();

                     day = day == 0? "天":day;

                    

                     var hours = now.getHours();

                     var mins = now.getMinutes();

                     var secs = now.getSeconds();

                     var timeVal2 = "现在时间：";

                    

                     timeVal1 = "今天是：" + year + "年" + ((month < 10)? "0" : "")

                     + month + "月" + date + "日 星期 " + day;

                     if(hours < 12)

                            timeVal2 += "上午";

                     else

                            timeVal2 += "下午";

                     timeVal2 += ((hours <= 12) ? hours : hours - 12);

                     timeVal2 += ((mins < 10) ? ":0" : ":") + mins;

                     timeVal2 += ((secs < 10) ? ":0" : ":") + secs;

                    

                     document.clockForm.clock1.value = timeVal1;

                     document.clockForm.clock2.value = timeVal2;

              }

             

              function startClock() {

                     showTime();

                     window.setInterval("showTime()",1000);

              }

       </script>

</head>

<body onLoad = "startClock()">

       <form name = "clockForm">

              <input type = "text" name = "clock1" size = 30 readonly><br>

              <input type = "text" name = "clock2" size = 30 readonly>

       </form>

</body>

</html>

14、经典表单验证：

       <html>

<head>

<title></title>

       <script language="javascript">

              function check() {

                     var valid = true;

                     var n = document.myform1.uname.value;

                     var p = document.myform1.psw.value;

                     var e = document.myform1.email.value;

                    

                     if(n == "") {

                            window.alert("用户名不能为空");

                            valid = false;

                     }else if(p.length < 4) {

                            window.alert("密码不能为空且长度不能小于4个字符");

                            valid = false;

                     }else {

                            var idx = e.indexOf('@');

                            if(idx <= 0 || idx == e.length -1) {

                                   alert("Email地址格式不合法！");

                                   valid = false;

                            }

                     }

                     if(valid) {

                            document.myform1.submit();

                     }

              }

       </script>

</head>

 

<body>

       请输入注册信息：

       <form name="myform1" action="http://www.baidu.com" method="post">

              姓名：<input type="text" name="uname" /><br />

              密码：<input type="password" name="psw" /><br />

              邮箱：<input type="text" name="email" /><br />

              <input type="button" value="提交信息" οnclick="check()" />

              <input type="reset" />

</body>

</html>

15、常用的系统函数：

       Eval(str)：计算字符串形式给出的表达式的值

       ParseInt(str),parseInt(str,radix)：将字符串形式的数值解析为整数，如果解析到字符串中遇到非法字符则返回已解析的内容、不是出错；如果第一位即非法字符，返回NaN

       paseFloat(str)：将字符串的数值解析为浮点数

16、javascript 使用的是DOM模型（Document Object Model，文档对象模型）document.form.username.value

       逐层定位

17、常用浏览器对象（红色）：

 

 

18、Window对象：表示的是浏览器窗口，是其他浏览器对象的共同祖先，可以省略不写，浏览器打开heml文档时，通常会创建一个window对象。常用方法有：

       * alert()

       * open(URL,windowName, parameterList) 打开一个窗口

       * close() 关闭一个窗口

       * promt(text, Defaulttext) 弹出一个文本输入框

       * confirm(text) 弹出一个确认窗口，返回布尔类型

       * setInterval(func, timer) / clearInterval(timer) 知定时间间隔和任务 / 知道时间间隔

 

       例：adv.html

              <html>

<head>

</head>

<body>

       <h1>欢迎访问！</h1>

       <hr />

       <input align="center" type="button" value="关闭窗口" οnclick="window.close()"/>

</body>

</html>

 

Test.html

<html>

<head>

       <script language="javascript">

              function advertise() {

                     window.open("adv.html","myadvWindow","toolbar = no,left = 300,top = 200,menubar = no,width = 250,height = 200");

              }

              function f1() {

                     var flag = window.confirm("确定要删除此条记录吗？");

                     if(flag) {

                            document.form1.submit();

                     }

              }

       </script>

</head>

<body οnlοad="advertise()">

       <form name="form1" action="http://www.baidu.com">

              记录1<input type="text" /><input type="button" name="ic1" value="删除" οnclick="f1()" /><br />

              记录2<input type="text"/><input type="button" name="ic2" value="删除" οnclick="f1()" /><br />

       </form>

              <hr />

              <input type="button" value="关闭窗口" οnclick="window.close()" />

</body>

</html>

19、document：指当前的文档，主要方法是：write()

20、location对象：

主要方法 ：window.location = “targetUrl” 转到新页面

reload（）刷新

       例：<html>

<head>

       <script language="javascript">

              function redirect() {

                     var flag = window.confirm("确定要转到搜索页面吗？");

                     if(flag) {

                            window.location = "http://www.xiaonei.com"

                     }

              }

       </script>

 

</head>

 

<body>

       <script language="javascript">

              document.write(new Date());

       </script>

       <input type="button" value="刷新页面" οnclick="location.reload()" />

       <input type="button" value="搜索功能" οnclick="redirect()" />

</body>

</html>

21、History对象，封装了当前浏览器曾经访问过的网页url信息，并提供了相应的访问和页面跳转功能。

       主要的属性方法：go(index)      back()       forward()

       例：<html>

<head>

       <script language="javascript">

              function f1() {

                     location = "http://www.v512.com";

              }

       </script>

 

</head>

 

<body>

       <input type="button" value="返回back()" οnclick="history.back()" />

       <input type="button" value="返回go(-1)" οnclick="history.go(-1)" />

       <input type="button" value="返回go(-2)" οnclick="history.go(-2)" />

       <input type="button" value="前进go(1)" οnclick="history.go(1)" />

       <input type="button" value="前进forward()" οnclick="history.forward()" />

       <input type="button" value="转到v512" οnclick="f1()" />

</body>

</html>

22、navigator对象：封装了当前浏览器的相关信息（可以直接输出）

       主要属性：appName   appVersion   language    platform

dingyuanpu
关注
专栏目录
javascript 个人总结笔记
12-30
我的js总结，不保证没有错误，哪位发现请指教～～
JavaScript知识点个人总结
07-27
这里我们将深入探讨JavaScript中与DOM相关的几个关键知识点。 首先，Element类型是DOM中最常见的节点类型，它代表HTML或XML文档中的元素，如`div`, `span`, `a`等。Element节点具有以下主要特性： 1. `nodeType`：...
js
weixin_33955681的博客
06-11 233
JS总结：1、javascript的特点是一种嵌入在网页中的程序段。(客户端脚本语言)是一种解释型语言，被浏览器解释执行。JavaScript借用了Java的名字，也使用了部分java的语法。增强客户端的交互功能。 2、在网页中嵌入js的方式内嵌式：<script>……</script> 外联式：<script src="aa.js"></script...
JavaScript 个人总结(持续更新中）
qq_46035691的博客
03-10 1528
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 目录 前言 一、javaScript是什么？ 二、js引入方式 1.行内式 2.内嵌式 3.外链式 三、js的输出方式 四、js数据类型 1.基本数据类型： 总结 前言 javaScript在前端是非常重要的语言之一，是程序思维的入门级语言，具有一定的逻辑性灵活性以及简洁性，虽然是弱语言，但是它目前还是非常方便的在前端中。 提示：以下是本篇文章正文内容，下面案例可供参考 一、jav.
JavaScript个人学习总结
Jonia的Castle
10-22 1338
1、DOM等对象的属性名称是区分大小写的； 2、JavaScri
JS 个人总结
ScorpC的博客
06-14 289
持续更新总结： 参考网站、博客、书籍等： 阮一峰：ECMAScript6http://es6.ruanyifeng.com/#docs/intro 1.JS 和 ECMAScript 之间的区别： 引用 阮一峰老师： 要讲清楚这个问题，需要回顾历史。1996年11月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给国际标准化组织ECM...
html,css,javascript个人自我介绍总结网页.zip
10-31
这份压缩包文件"html,css,javascript个人自我介绍总结网页.zip"显然包含了一个使用这三种技术实现的个人自我介绍网页项目。接下来，我们将深入探讨这三个关键技术及其在网页设计中的应用。 **HTML（HyperText ...
JavaScript函数个人总结笔记
最新发布
08-02
JavaScript 函数个人总结笔记 一、函数的概念 函数是封装了一段可被重复调用执行的代码块，通过此代码块可以实现大量代码的重复使用。函数的概念是 JavaScript 中最基本的编程单元之一，它使得开发者可以轻松地...
李立超前端JavaScript基础个人总结笔记
05-25
源自于B站up主李立超老师的前端JavaScript基础知识视频课，根据199节视频课的内容，使用Typora笔记软件总结核心知识点，方便前端小白配合老师视频课使用，内含相关概念的定义和配套代码资源，其上传的初衷是为了方便...
javascript知识点个人总结。
CodingNoob
04-11 597
Javascript知识点总结Dom知识点Element类型Element提供了对元素标签名，子节点和特性的访问，我们常用HTML元素比如div，span，a等标签就是element中的一种。 Element有下面几条特性： （1）nodeType为1 （2）nodeName为元素标签名，tagName也是返回标签名 （3）nodeValue为null （4）parentNode可能是Do
JS个人小结
07-18
将上传的图片添加防伪图片水印，并将图片直接写入数据库，不保留在硬盘。js遇到的问题--转义字符。。FileUpload控件上传资源，需要在本地选择资源时为一个文本框赋值，js判断上传图片格式。。只能输入数字与英文，指定位数小数
JS 个人总结1
qq_62063419的博客
10-05 148
One 一：数据类型 1、基本数据类型 数值型： number 字符串：string 布尔型：Boolean 未定义：underfined 空型：null 检测数据类型：type of NaN 不是数字的数字类型 number类型 2、复杂数据类型 object、Array、function、Date ... 区别：1、基本数据类型的存取发生在栈内存中 2、引用数据类型在堆中保存数据，再栈中保存数据在堆中...
JavaScript自我总结
weixin_42597434的博客
11-19 487
1.如果自加语句独立成为一个单独的语句，那么前后自加是完全相同的。
JavaScript（个人笔记总结）
eternally_zh128@sina.com的博客
06-18 462
一、初识JS 一、基本使用 1、严格区分大小写，不用显示变量定义类型，变量定义不能以数字开头 2、标签成对使用，尽量不使用自闭合. 3、数据类型：number(js不区分小数和整数)，NaN不是一个数字,Infinity表示无限大，字符串（‘abc’ “abc”），布尔值(true，false)，逻辑运算(&& || !)，比较运算符（等于(双等号)（类型不一样，值一样，也会判断为true），绝对等于（三个等号，类型一样，值一样，结果为true）） 须知： 1
JavaScript 学习--个人总结（引用类型篇）
qq_38644907的博客
12-24 1587
一、Object类型 创建及使用： 二、Array类型 三、Date类型        
JavaScript 学习--个人总结（面向对象篇）
qq_38644907的博客
03-01 182
对象属性只读： 属性不可被删除： 注意报错： 创建对象： 1、工厂模式 2、构造函数模式 3、原型模式 删除实例的name，出来原型的name hasOwnProperty(属性名)方法： in操作符： hasOwnProperty(Object,name)方法： 4、更简单的原型语法： ...
javascript个人小结
她、她、她的博客
12-20 383
这个学期看了许多关于javascript的东西，所以想把有些东西记下来： 1.javascript声明变量位置会提升，函数内部声明变量也一样会将变量声明提升到函数最开始，如果声明变量没有前没有加上var，则默认为全局变量 2.javascript闭包涉及到函数的作用域链，一个函数调用完成后关于他的变量的内存就会回收，只有当变量的引用还被占有时相应的内存还会保留下来 3.javascript只
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值