小白学JavaScript
JavaScript 简介
JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是一种轻量级的编程语言。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript 插入方法
- 行内式,直接写到html内部
<body>
<input type= "button" value = "唐伯虎" onclick = "alert('点秋香')">
</body>
- 内嵌式
<script>
alert('hello world!');
</script>
- 外部js引入
<script src="myScript.js"></script>//两个标签之间不能写东西
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}//外部js文件不用写<script>标签,之间写js代码即可
JavaScript 输入输出方法
输入
prompt()//弹出警告框用于输入数据
输出
- alert() 弹出警告框显示数据
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
alert(5 + 6);
</script>
</body>
</html>
- 操作HTML元素
如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。
请使用 “id” 属性来标识需要访问的HTML 元素,并 innerHTML 来获取或插入元素内容
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<!--原本应该展示为“这是我的第一个段落”-->
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
//修改id为demo的段落
</script>
<!--现在展示的是“段落已修改。”-->
</body>
</html>
- 写到HTML文档
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
</body>
</html>
document.write() 方法可以用在两个方面:
1、 页面载入过程中用实时脚本创建页面内容,用来追加一些标签。
2、清除当前页面内容(包括源文档的任何变量或值)。重新生成内容。即“覆盖文档”。
- 写到控制台
如果您的浏览器支持调试,你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 “Console” 菜单。
JavaScript 注释
//单号注释
/*这里是
多行注释*/
JavaScript 变量
变量声明和赋值
var age = 18;
//var为定义变量的关键字,用等号赋值变量,用分号结尾
变量名的大小写敏感,开头不能为数字,符号只能用_和$符作为开头
可以同时声明多个变量,用逗号隔开
var lastname="Doe",
age=30,
job="carpenter";//可以放在同一行,也可以跨越多行
声明变量后,但没有赋值的变量,打印出的结果为undefined
数据类型
在JavaScript中变量为动态类型,即不同事先声明是int还是float等
- 字符串型
单引号或双信号,引起的部分,为字符串类型
注意:prompt输入的均为字符串类型 - 数字型
整数或小数
NaN:Not a Number
判断是否为数字型:isNaN():true为非数字 - 布尔型
只有true和false
只有:’’,0,null,undefined,NaN为false
typeof 操作符
用于判断变量类型
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {
name:'John', age:34} // 返回 object
类型转换
- 转为字符型
.toString()
String():强制转化
varname + ‘’:字符串和任何类型拼接都会转化为字符串类型 - 转为数字型
parseInt():解析一个字符串,并转换为整型数字,小数型数字用此方法,会被去除小数点后数字
parseFloat():解析一个字符串,并转化为小数型数字
Number():强制转换
使用运算符 :/、*、-,运算过后均为数字类型
console.log(parseInt('3'));// 3
console.log(parseInt('3.14'));// 3
console.log(parseInt('3.89'));// 3
console.log(parseFloat('3'));// 3
console.log(parseFloat('3.14'));// 3.14
var age = '18';
console.log(typeof age);// number
console.log(typeof Number(age));// number
console.log(typeof (age - 0));//number
- 转为布尔型
Boolean()
console.log(Boolean(undefined));// false
console.log(Boolean(0));// false
console.log(Boolean(null));// false
console.log(Boolean(NaN));// false
console.log(Boolean(''));// false
console.log(Boolean(123));// true
console.log(Boolean('Hallo World!'));// true