01-初学JavaScript
上学期间学过一段时间的js 最近想要在学习一下 便想记录下自己的学习经历 ，于是开通了博客 就这里面慢慢补充属于自己的内容吧
JavaScript是一种网页编程技术，大部分使用者将它用于创建动态交互网页
JavaScript是一种基于对象和事件驱动的解释性脚本语言，具有与Java类似的语法
JavaScript是一种使用简单，功能强大的编程语言
JavaScript特点
一、简单易用
- 简洁易用，与Java有类似的语法
- 可以使用任何文本编辑工具编写
- 只需要浏览器就可以执行程序
二、解释执行
- 事先不编译
- 逐行执行
- 无需进行严格的变量声明
三、基于对象
1.内置大量现成对象，编写少量程序可以完成目标
现在开始看看代码吧
一、js的三中引入方式
1、行内式引入
2、js内嵌式引入
3、外联式引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--js必须结合事件属性一起用-->
<button onclick="alert(123)">点击</button>
<!--js内嵌式引入-->
<script>
alert(456)
</script>
<!-- 外联式引入-->
<script type="text/javascript" src="js/01-js引入方式.js"></script>
<!--z注意script 不能即做引入，又做代码编写-->
</body>
</html>
- 先弹出456
- 之后789
- 最后点击出现提示框123
- 值得注意的是：script标签不能即做引入又做代码编写
二、常用的输出方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//js单行注释
/*
js多行注释
*/
//警告框
alert(123);
// 直接向页面输出
document.write('<h1>你好</h1>');
// 通过控制台输出
console.log("123");
</script>
</body>
</html>
两种注释方式 分别是 单行注释// 和 多行注释/* */
三种常用的输出方式
分别是 警告框、直接向页面输出、通过控制台输出
三、js的变量声明与使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 变量声明统一用var 变量名
var a = 10;
a = 'hellworld';//js的字符串用单引号和双引号都行
alert(a);//任何类型都行
var a,b=10,c=true;//js 允许变量重复声明
console.log(b);
console.log(a);
//alert(f);js是解释型语言，下面发生错误不影响上面代码正常运行
console.log(c);
//当变量没有做声明，而是直接赋值也能使用
name='张三';
alert(name);
</script>
</body>
</html>
变量声明统一用var
字符串用单引号和双引号都行
允许重复声明
因为是解释型语言 所以发生错误 不影响上面代码正常运行
当变量没有做声明 而是直接赋值也能使用
四、JavaScript中的数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
'use strict'//严格模式 （要求使用变量的时候先做变量声明）
// var a = 10;
// alert(a);
a = 10;
alert(a);
var a;//js会对变量做声明提升
console.log(typeof a)//number
var b = true;
console.log(typeof b)//boolean
var c='你好'
console.log(typeof c)//string
//js五种基本类型：number 。boolean，string null undefined
//js的引用类型：object ，function，array
console.log(new Object());//引用类型
console.log(typeof alert);
</script>
</body>
</html>
‘use strict’ 严格模式（要求使用变量的时候 先做变量声明）
js五种基本类型：number 。boolean，string null undefined js的引用类型：object （function，array） 这里有人说一种 有人说三种 但个人认为，不管是 方法还是数组都是对象 所以把他们归为一类
五、JavaScript中的运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//js支持算数运算：与java类似，支持+，- * / % 同样也支持++，--但涉及到除法能得到小数 除以0会得到无限大
//js支持赋值运算：=，+=，-=，*=，%=，/=
//js支持比较运算符：java类似 > < >= <= != == === !==
alert(5=='5')//比较值
alert(5==='5')//===比较值和类型
alert(1 == true)//1和true 做比较，true 会自动转化为1
alert(a =='')//0和''比较，''会自动转为0
alert(0 == false);//0和false比较，false会自动转化为0
alert(false == null);//false
alert('100'/2)//50
alert('a'/2)//NaN非数字
alert(NaN == NaN);//为false
//js支持三目运算符：
//js支持逻辑运算符
alert(true & false);//按位与
</script>
</body>
</html>
与java 基本相同 但是 有几个不相同的点
1和true做==比较会返回 true 其中的true会自动转化为1
0和空串做==比较 空串会自动转化为0
字符串与数字进行运算 如'100'/2会得到50
NaN为number类型
同样支持三目运算符和逻辑运算符
六、字符串拼接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body><button onclick="alert('nihao')"></button>
<script>
var str = 'a\'bc';
str+='hello'
alert(str)
var str1 = "a'bc"
alert(1+2+3+"5"+4)
alert(str1)
console.log("hello\tworld");
console.log("hello\nworld");
</script>
</body>
</html>
如果输出“” 就用单引号包围
如果输出‘’ 就用双引号包围
七、字符串拼接练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border: 1px solid green"></div>
<script>
var a = prompt("请输入宽内容");
var b = prompt("请输入高内容");
var c = prompt("请输入线条像素");
var d = prompt("请输类型");
var e = prompt("请输入颜色");
document.write('<div style="width:'+ a+'px;height: '+b+'px;border: '+c+'px '+d+'\t'+e+'"></div>')
/*
输入颜色：
输入线条宽度：
线条类型：
*/
</script>
</body>
</html>
八、浮点数误差
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// var a = 0.1;
// var b = 0.2;
// alert((a*10 + b*10)/10)
// var a = '4';
// alert(typeof a);
// alert(typeof parseInt(a)) ;
//
// alert(parseFloat('a1.34a'));
alert(isNaN('a5'));//是非数字，结果是true
</script>
</body>
</html>
九、字符串误差练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// var a = prompt("请输入温度");
// alert(((a-32)*5)/9);
// console.log(((a - 32) * 5) / 9);
var b=1234.5
console.log(parseInt(b*100)/100);
var c= 123456721
console.log(parseInt(c / 100) + '00');
</script>
</body>
</html>
完事！！！！
浙公网安备 33010602011771号