JavaScript(1):Base/Tips
2024-10-07 00:15:36
目录
- 输出
- 全局变量
- 字符串
- 类型及转换
- 变量提升
- 严格模式
- 表单验证
(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>
最新文章
- 分享阿里云推荐码 IC1L2A,购买服务器可以直接打9折,另附阿里云服务器部署ASP.NET MVC5关键教程
- List Set Map
- OBD K线抓包 II
- Jquery DataTables相关示例
- Spring源码学习(二)AOP
- 【笨嘴拙舌WINDOWS】GDI映射方式
- zookeeper curator使用caches实现各种监听
- 一简单的RPC实例(Java)
- javascript 总结(常用工具类的封装)
- Sitecore 8.2 页面架构设计:模板与组件
- 1、redis 基础
- php -- new self() 和 new static
- JAVA远程调试
- redis调优的实战经验
- zabbix准备:mysql安装
- boot.img的修改
- springboot 异步调用Async使用方法
- Linux-——grep
- 五、vue常用UI组件
- 安装MySQL-python