JavaScript初入门

最新推荐文章于 2024-09-23 17:26:41 发布

许一世流年绝不嵩手 cium

最新推荐文章于 2024-09-23 17:26:41 发布

阅读量756

点赞数 5

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_44489500/article/details/141948659

版权

JavaScript是一门解释型语言。
最简单的使用方法，是新建一个text文档，另存为.html文件；
双击.html文件，即可查看及使用。

基础网页框架

<html>
<head>
<title>javaspcript</title>
</head>
<body>
</body>
</html>

JavaScript可以写在<title> 的头文件里面，也可以写在<body> 里面。
执行顺序是先读头文件，后读内容。
头文件里面，只能用alert输出，document.write 不能正常显示在界面中。

<script>
其中编写代码快
</script>

JavaScript的三种输出方式

alert("弹窗输出")
document.write("html界面输出")
console.log("浏览器控制台输出")

JavaScript的两种注解方式

单行注解 //
多行注解/* */

定义变量与常量

var 声明全局变量
let 声明局部变量
const 声明常量

数据类型

数据型(number）:包含整数型和浮点型
布尔型（boolean）:返回逻辑值，true或false
字符串型(string):一般为单个或多个字符组成，需要用单引号或双引号括起来
object:对象（function null）
undefined型：变量没有赋值的情况下，默认类型为undefined型

运算符

算术运算符
- + 加
- - 减
- * 乘
- / 除 x/y 表示x除以y的商
- % 余 x%y 表示x除以y的余数

<script>
var a=10;
var b=4;
//算术运算符的使用
document.write("a+b=",a+b);
document.write("\n");
document.write("a-b=",a-b);
document.write("<br>");
document.write("a*b=",a*b);
document.write("<br>");
document.write("a/b=",a/b);
document.write("<br>");
document.write("a%b=",a%b);
</script>

<script>
var str = "10";
var num = 20;
document.write("str + num\n",str + num);//返回 1020 拼接
document.write("<br>");
document.write("str - num\n",str - num);//返回 -10 
document.write("<br>");
document.write("str * num\n",str * num);//返回 200 
document.write("<br>");
document.write("str / num\n",str / num);//返回 0.5

var b1 = 3;
var b2 = "abc";
var bo1 = true;
var bo2 = false;
document.write("b1 + b2\n",b1 + b2); //返回 3abc 拼接
document.write("<br>");
document.write("b1 - b2\n",1 - b2); //返回 NaN 
document.write("<br>");
document.write("a + bo1\n",a + bo1); //返回 4 数值与boolean类型相加，true转换为1
document.write("<br>");
document.write("a + bo2\n",a + bo2); //返回 3 数值与boolean类型相加，false转换为0

</script>

字符串运算符

‘字符串（数字）’-数值=数值字符串会尝试类型转换
==只比较他们的值是否相等
===比较他们是否全等，比较值和类型

<script>
var a = "10";
var b = 5;
var c = 10;
var d = "A";
//字符串的运算
document.write("c-b=\n",c-b);
document.write("<br>");
document.write("a-b=\n",a-b);
//‘字符串（数字）’-数值=数值 字符串会尝试类型转换
document.write("<br>");
document.write("d-c=\n",d-c);
document.write("<br>");
document.write("a==c\n",a==c);
// 返回 ture 只比较他们的值是否相等
document.write("<br>");
document.write("a===c\n",a===c);
// 返回 false 比较他们是否全等，比较值和类型
document.write("<br>");
document.write("b *= 3\n",b *= 3);
// b *= 3  b=b*3  返回5*3=15
document.write("<br>");
document.write("b /= 5\n",b /= 5);
// b /= 5 b=b/5  返回15/5=3 
document.write("<br>");
document.write("c /= b\n",c /=b);
// c /= b c=c/b  返回10/3=3.333
document.write("<br>");
document.write("");
</script>

自增、自减运算符

++x 自增将x加1，返回x ；直接输出最终值
x++ 自增返回x，再将x+1；先输出x的值，接着最终值
--x 自减将x减1，返回x
x-- 自减返回x，再将x-1

<script>

var x=10;
var y=10;
document.write("++x\n",++x);
document.write("<br>");
document.write("x\n",x);
document.write("<br>");
//直接加1，输出最终值
document.write("y++\n",y++);
document.write("<br>");
document.write("y\n",y);
//先输出原值10，再输出最终值11
</script>

比较运算符

==\===\!=\!==\<\<=\>\>=
返回一个布尔值（true）或（false）

逻辑运算符

&& 与 x&&y 如果x和y都为真，则结果为真
|| 或 x||y 如果x和y有一个为真，则结果为真
! 非 !x 如果x不为真，则结果为真

(三元)条件运算符

var result=(条件表达式)?结果1:结果2
条件成立，返回结果1；条件不成立，返回结果2

<script>
var a = 1;
var b = 2;
var c = a>b ? a : b;
//如果a>b，则返回a；否则返回b
document.write(c);
</script>

控制语句

选择结构
- 单一选择（if）
- if(条件){代码块}
- 二路选择（if/else）
- if(条件){代码块}else if(条件){代码块}else{代码块}
- 多路选择（Switch）
- switch(变量/表达式){case 值1: document.write();break;default: alert("默认值");break;}

<script>
var a=3;
var b=5;
//单if从句

if(a<b)
{
document.write("a大于b");
}

if(a>b){
document.write("a大于b");}
else{document.write("a小于b");};

switch(a=10%a){
case 0 :
alert("a是十的因数");
break;
case 1 :
document.write("a不是十的因数");
break;
}

//判断类型
var a = 1;
switch(a){
case "1" : a = 1;
break;
case 1 : a = "one";
break;
case 2 : a = "two";
break;
}
alert(a);

</script>