夜灵的JS笔记Day01——JavaScript基础
2017-09-18 22:25
417 查看
1.<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/main.js">
document.write("<h1>helloWorld");
//文档打印
alert("警告!");
//弹出框
console.log("打印日志");
//console 控制台 log 日志/名词作动词
</script>
</head>
<body></body>
</html>
2.JS的数据类型
JS的数据五种数据类型(三种常用,二种特殊)
数值:Number
由n位0-9任意数字组成
字符串:String
被引号引起来的字符
布尔值:Boolean
只有两个值:True/False
Underfined:
当空间为空时,将会出现undefined
Null:
当你想要清空某个内存时,就可以在这个内存里放入一个null
引用数据类型:Object
null属于对象。
<script>
var a=123;
//数值
var b="123"
//字符串
var c="true"
//布尔值
var d
//Undefined
var e="null"
//null
console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
console.log(typeof d);
console.log(typeof e);
//输出上面五个值的类型
</script>
<input type="text" value="0" id="Ipt" />
<script>
console.log(typeof Ipt.value);
var num=1.2e7;
alert(num);
//当数值大于10^6时,可以使用科学计数法
</script>
3.声明变量
声明变量/开辟内存空间
声明变量时必须定义变量名: var a;
当空间内没有任何数据时,JS将会在里面存放undefined
JavaScript是一门弱类型的编程语言,声明变量时不用表明数据类型。
<script>
var a,b,num = "123";
alert(num);
</script>
4.赋值操作符
赋值:改变变量的值
赋值操作符:
=
+= -=
*= /= %=
自增、自减
<script>
var num=1;
num += 3;
//等同于num=num+3;值为4
num -= 2;
//2
num *= 4;
//8
num /= 2;
//4
num %= 3;
//1
alert(num);
</script>
5.改变背景颜色
<button id="btn1">盒子1</button>
<button id="btn2">盒子2</button>
<button id="btn3">盒子3</button>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<style>
.box{width:300px;
height:300px;
border:1px solid;}
</style>
<script>
btn1.onclick = function( ){box1.style.background="blue"};
btn2.onclick=function(){box2.style.background="red"};
btn3.onclick=function(){box3.style.background="green"};
</script>
6.格式化数字
parseInt( )
字符串转整数
parseFloat( )
字符串转小数
<script>
var str = true;
console.log(parseInt(str));
</script>
7.数字增减(购物车原理)
<input type="text" value="1" id="ipt">
<script>
<button onclick="ipt.value++">+</button>
<button onclick="Ipt.value--">-</button>
</script>
8.关系操作符
>
大于
<
小于
>=
大于等于
<=
小于等于
==
等于
!=
不相当
===
全等于(会比较数据类型)
!==
不全等(会比较数据类型)
<style>
alert(1==="2");
//会输出ture/false
</style>
9.简易计算器
<input type="text" id="Ipt1" value="1" />
<input type="text" id="Ipt2" value="2" />
<button onclick=alert(Ipt1.value+Ipt2.value)>
//直接加法运算,会默认是两个字符串的拼接,输出为12;
<button onclick=alert( parseInt(Ipt1.value)+parseInt(Ipt2.value) )></button>
//使用字符格式化,将字符串转化为数值。输出值为3
<button onclick=alert(Ipt1.value*1 + Ipt2.value*1)></button>
//由于 减乘除 不受数值或字符串类型的影响,通过*1使字符串变为数值(黑科技)
<button onclick=alert(Ipt1.value - Ipt2.value)></button>
//减法
<button onclick=alert(Ipt1.value * Ipt2.value)></button>
//乘法
<button onclick=alert(Ipt1.value / Ipt2.value)></button>
//除法 减乘除不需要将字符串转化为数值
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/main.js">
document.write("<h1>helloWorld");
//文档打印
alert("警告!");
//弹出框
console.log("打印日志");
//console 控制台 log 日志/名词作动词
</script>
</head>
<body></body>
</html>
2.JS的数据类型
JS的数据五种数据类型(三种常用,二种特殊)
数值:Number
由n位0-9任意数字组成
字符串:String
被引号引起来的字符
布尔值:Boolean
只有两个值:True/False
Underfined:
当空间为空时,将会出现undefined
Null:
当你想要清空某个内存时,就可以在这个内存里放入一个null
引用数据类型:Object
null属于对象。
<script>
var a=123;
//数值
var b="123"
//字符串
var c="true"
//布尔值
var d
//Undefined
var e="null"
//null
console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
console.log(typeof d);
console.log(typeof e);
//输出上面五个值的类型
</script>
<input type="text" value="0" id="Ipt" />
<script>
console.log(typeof Ipt.value);
var num=1.2e7;
alert(num);
//当数值大于10^6时,可以使用科学计数法
</script>
3.声明变量
声明变量/开辟内存空间
声明变量时必须定义变量名: var a;
当空间内没有任何数据时,JS将会在里面存放undefined
JavaScript是一门弱类型的编程语言,声明变量时不用表明数据类型。
<script>
var a,b,num = "123";
alert(num);
</script>
4.赋值操作符
赋值:改变变量的值
赋值操作符:
=
+= -=
*= /= %=
自增、自减
<script>
var num=1;
num += 3;
//等同于num=num+3;值为4
num -= 2;
//2
num *= 4;
//8
num /= 2;
//4
num %= 3;
//1
alert(num);
</script>
5.改变背景颜色
<button id="btn1">盒子1</button>
<button id="btn2">盒子2</button>
<button id="btn3">盒子3</button>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<style>
.box{width:300px;
height:300px;
border:1px solid;}
</style>
<script>
btn1.onclick = function( ){box1.style.background="blue"};
btn2.onclick=function(){box2.style.background="red"};
btn3.onclick=function(){box3.style.background="green"};
</script>
6.格式化数字
parseInt( )
字符串转整数
parseFloat( )
字符串转小数
<script>
var str = true;
console.log(parseInt(str));
</script>
7.数字增减(购物车原理)
<input type="text" value="1" id="ipt">
<script>
<button onclick="ipt.value++">+</button>
<button onclick="Ipt.value--">-</button>
</script>
8.关系操作符
>
大于
<
小于
>=
大于等于
<=
小于等于
==
等于
!=
不相当
===
全等于(会比较数据类型)
!==
不全等(会比较数据类型)
<style>
alert(1==="2");
//会输出ture/false
</style>
9.简易计算器
<input type="text" id="Ipt1" value="1" />
<input type="text" id="Ipt2" value="2" />
<button onclick=alert(Ipt1.value+Ipt2.value)>
//直接加法运算,会默认是两个字符串的拼接,输出为12;
<button onclick=alert( parseInt(Ipt1.value)+parseInt(Ipt2.value) )></button>
//使用字符格式化,将字符串转化为数值。输出值为3
<button onclick=alert(Ipt1.value*1 + Ipt2.value*1)></button>
//由于 减乘除 不受数值或字符串类型的影响,通过*1使字符串变为数值(黑科技)
<button onclick=alert(Ipt1.value - Ipt2.value)></button>
//减法
<button onclick=alert(Ipt1.value * Ipt2.value)></button>
//乘法
<button onclick=alert(Ipt1.value / Ipt2.value)></button>
//除法 减乘除不需要将字符串转化为数值
相关文章推荐
- js笔记day01--基础语法
- 夜灵的Html笔记Day01——Html基础
- Node.js 学习笔记之一
- js学习笔记24----焦点事件
- Node.js学习笔记(5)--文件简单操作
- WEB前端(HTML、XML、CSS、JS)学习笔记
- js学习资料笔记合集,持续学习更新中,欢迎大牛们指点
- 【js学习笔记-012】---全局对象
- JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
- Vuejs刷新页面子组件数据丢失问题的一点笔记
- 七、匿名函数[js笔记]
- js高程笔记(3.5)
- vue.js 学习笔记 制作简单的todo list
- node.js学习笔记之安装详解
- JS笔记2-定时器的使用
- 【js学习笔记-107】----脚本化图片
- js笔记
- Node.js笔记之简介
- HTML5+CSS3+JS学习笔记-9-制作iphone手机模型