JavaScript(1)：Base/Tips

输出
全局变量
字符串
类型及转换
变量提升
严格模式
表单验证

(1) 输出

 <!DOCTYPE html>

 <html>

     <body>

         <p>JavaScript输出</p>

         <script>

             // 使用window.alert()弹出警告框

             window.alert(5+6);

             // 使用document.write()方法将内容写到HTML文档中

             document.write(Date());

             // 注意：如果在文档已完成加载后执行document.write，整个HTML页面将被覆盖

             function demo2Click() {

                 document.write("Override!");

             }

             // 使用innerHTML写入到HTML元素

             document.getElementById("demo1").innerHTML = "add demo1 text";

             // 使用console.log()写入到浏览器的控制台

             console.log("warn log");

         </script>

         <div id="demo1"></div>

         <button id="demo2" onclick="demo2Click();">demo2</button>

     </body>

 </html>

(2) 全局变量

 <!DOCTYPE html>

 <html>

     <body>

         <p>变量</p>

         <p id="demo1"></p>

         <script>

             // 在HTML中,所有全局变量都会成为window变量

             // 全局变量或函数,可以覆盖window对象的变量或者函数;局部变量,包括window对象可以覆盖全局变量和函数

             myFunction();

             document.getElementById("demo1").innerHTML = 'I can show ' + window.carName;

             function myFunction() {

                 carName = "Volvo";

             }

         </script>

     </body>

 </html>

(3) 字符串

 <!DOCTYPE html>

 <html>

     <body>

         <p>字符串</p>

         <p id="demo1"></p>

         <script>

             // 转义字符使用[\]

             // 其他的转义字符有：[\']单引号;[\\]反斜杠;[\n]换行;[\r]回车;[\t]制表符;[\b]退格符;[\f]换页符

             var demo1 = "He is called \"Tom\".";

             // 使用位置（索引）可以访问字符串中任何的字符

             console.log(demo1[8]); // output: a

             // 获取字符串长度

             console.log(demo1.length); // output: 19

             // 定位字符串中某一个指定的字符首次出现的位置

             console.log(demo1.indexOf('c')); //  output: 6

             console.log(demo1.indexOf("is")); // output: 3

             // 查找字符串中特定的字符，并且如果找到的话，则返回这个字符

             console.log(demo1.match("call")); // output: call

             // 字符串中用某些字符替换另一些字符

             console.log(demo1.replace("is", "was")); // output: He was called "Tom".

             // 字符串大小写转换

             console.log(demo1.toUpperCase()); // output: HE IS CALLED "TOM".

             console.log(demo1.toLowerCase()); // output: he is called "tom".

             // 字符串转为数组

             console.log(demo1.split(" ").length); // output: 4

         </script>

     </body>

 </html>

(4) 类型及转换

 <!DOCTYPE html>

 <html>

     <body>

         <p>类型及转换</p>

         <script>

             // 使用typeof操作符来检测变量的数据类型

             console.log(typeof "John"); // output: string

             console.log(typeof 3.14); // output: number

             console.log(typeof false); // output: boolean

             console.log(typeof [1,2,3]); // output: object

             console.log(typeof {id: 1, name: "john"}); // output: object

             console.log(typeof null); // output: object

             console.log(typeof undefined); // output: undefined

             // 值为null(空), 但仍然是一个对象

             // 任何变量都可以通过设置值为undefined来清空, 此时类型为undefined

             var tmp1, tmp2 = null, tmp3 = undefined;

             console.log(typeof tmp1); // output: undefined

             console.log(typeof tmp2); // output: object

             console.log(typeof tmp3); // output: undefined

             // null和underfined的值相等，但类型不等

             console.log(null == undefined); // output: true

             console.log(null === undefined); // output: false

             // constructor 属性返回所有JavaScript变量的构造函数

             console.log("John".constructor); // output: String()  { [native code] }

             console.log((3.14).constructor); // output: Number()  { [native code] }

             console.log(false.constructor); // output: Boolean() { [native code] }

             console.log([1,2,3,4].constructor); // output: Array()   { [native code] }

             console.log({name:'John', age:34}.constructor); // output: Object()  { [native code] }

             console.log(new Date().constructor); // output: Date()    { [native code] }

             console.log(function () {}.constructor); // output: Function(){ [native code] }

             // 可以使用constructor属性来查看是对象是否为某一类型

             function isTheType(param, type) {

                 return param.constructor.toString().indexOf(type) > -1;

             }

             console.log(isTheType("John", "String")); // output: true

             // 转换为字符串

             console.log(String(true)); // output: true

             console.log(String(123)); // output: 123

             console.log(String(NaN)); // output: NaN

             console.log(String(null)); // output: null

             console.log(String(undefined)); // output: undefined

             console.log((false).toString()); // output: false

             console.log((123).toString()); // output: 123

             console.log((NaN).toString()); // output: NaN

             // Illegal! console.log((null).toString());

             // Illegal! console.log((undefined).toString());

             // 转换为数字

             console.log(Number("3.14")); // output: 3.14

             console.log(Number(true)); // output: 1

             console.log(Number(false)); // output: 0

             console.log(Number("")); // output: 0

             console.log(Number(" ")); // output: 0

             console.log(Number("abc")); // output: NaN

             console.log(Number("123abc")); // output: NaN

             console.log(Number(new Date())); // output: 毫秒数

         </script>

     </body>

 </html>

(5) 变量提升

变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

JavaScript 只有声明的变量会提升，初始化的不会

(6) 严格模式

严格模式下你不能使用未声明的变量

头部用"use strict"声明

(7) 表单验证

 <!DOCTYPE html>

 <html>

     <head>

     <meta charset="utf-8">

         <script>

             function validateForm() {

                 // 获取form中某个字段的值

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

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

                     alert("First name is request.");

                     return false;

                 }

             }

         </script>

     </head>

     <body>

         <form name="myForm" action="www.baidu.com" onsubmit="return validateForm()" method="post">

             First name: <input type="text" name="fname" disabled="disabled">

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

         </form>

     </body>

 </html>

JavaScript(1)：Base/Tips的更多相关文章

JavaScript宝座：七大框架论剑
JavaScript宝座:七大框架论剑一周前,Throne of JS大会在多伦多召开,这应该是我参加过的最有料也最不一样的一次大会.大会官网如是说: 加载整个页面,然后再“渐进增强”以添加动态行为 ...
微信浏览器内置JavaScript 对象：WeixinJSBridge
微信公众平台开发微信公众平台开发模式企业微信公众平台微信浏览器分享到朋友圈发送给好友分享到腾讯微博作者:方倍工作室原文: http://www.cnblogs.com/txw1958/ ...
JavaScript基础：数据类型的中的那些少见多怪
原文:JavaScript基础:数据类型的中的那些少见多怪 Javascript共有6种数据类型,其中包括3个基本数据类型(string,number,boolean).2个特殊数据类型(undefi ...
C# 中的关键字之：base、this 【转】
C# 中的关键字之:base.this. ba ...
JavaScript -- 原型：prototype的使用
JavaScript -- 原型:prototype的使用在 JavaScript 中,prototype 是函数的一个属性,同时也是由构造函数创建的对象的一个属性. 函数的原型为对象. 它主要在函 ...
JavaScript运算符：递增递减运算符前置和后置的区别
从两段代码说起 var num1 = 2; var num2 = 20; var num3 = --num1 + num2; var num4 = num1 + num2; console.log(n ...
配置iOS项目的设备系统目标设置：Base SDK和Deployment Target
配置iOS项目的设备系统目标设置:Base SDK和Deployment Target Xcode为开发者提供了两个可配置的设置:第一个是Base SDK,第二个是iOS的Deployment Tar ...
C# -- 等待异步操作执行完成的方式 C# -- 使用委托 delegate 执行异步操作 JavaScript -- 原型：prototype的使用 DBHelper类连接数据库 MVC View中获取action、controller、area名称、参数
C# -- 等待异步操作执行完成的方式 C# -- 等待异步操作执行完成的方式 1. 等待异步操作的完成,代码实现: class Program { static void Main(string[] ...
[翻译]Review——How JavaScript works：The building blocks of Web Workers
原文地址:https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-w ...

随机推荐

延长zencart1.5.x后台的15分钟登录时间和取消90天强制更换密码
延长zencart1.5.x后台的15分钟登录时间打开includes\functions\sessions.php if (IS_ADMIN_FLAG === true) { if (!$SESS ...
gcd（欧几里得算法）与exgcd（扩展欧几里得算法）
欧几里得算法: 1.定义:gcd的意思是最大公约数,通常用扩展欧几里得算法求原理:gcd(a, b)=gcd(b, a%b) 2.证明: 令d=gcd(a, b) => a=m*d,b=n ...
python学习笔记（三）条件判断和循环
1.条件判断语句 Python中条件选择语句的关键字为:if .elif .else这三个.其基本形式如下: 1 2 3 4 5 6 7 8 9 age_of_cc = 27 age = int( ...
部署jenkins+git
Jenkins简介 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能安装并启动思路: 安装准备 ...
常用到用css3实现的转换，过渡和动画
为什么要用css动画替换js动画导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...
kubernetes离线包安装教程
kubernetes离线包安装教程: 安装包中不包含docker,如没装docker 请先安装之yum install -y docker 1 2 3 1. master上: cd shell &am ...
关于windows 设备驱动重要的事实
1. windows采用设备树描述所有挂在系统总线上的设备,每个设备对应一个节点. 2.每个设备有自己的device object stack/driver stack. 一个物理上的设备对应多个de ...
AcWing：148. 合并果子（哈夫曼树）
在一个果园里,达达已经将所有的果子打了下来,而且按果子的不同种类分成了不同的堆. 达达决定把所有的果子合成一堆. 每一次合并,达达可以把两堆果子合并到一起,消耗的体力等于两堆果子的重量之和. 可以看出 ...
2、dubbo基础知识
1.简介 2.dubbo架构 3.dubbo环境搭建注意:cmd命令都是在bin目录的地址栏直接输入 xxx.cmd 4.配置dubbo-admin 步骤一: 步骤二: 步骤三: 步骤四: 步骤五: ...
docker的数据管理
容器中管理数据主要有两种方式: 1.数据卷:容器内数据直接映射到本地宿主机. 2.数据卷容器:使用特定容器维护数据卷数据卷: 数据卷是一个可供容器使用的特殊目录,他将主机操作系统目录直接映射进容器. ...

JavaScript(1)：Base/Tips

JavaScript(1)：Base/Tips的更多相关文章

随机推荐

热门专题