WEB开发-JavaScript入门学习总结
【摘要】 WEB开发-JavaScript入门学习总结，学习JavaScript的基础知识和要点，带你走进前端开发的世界。
通过学习了HTML和CSS相关知识，就可以写一些页面和表现效果，但是页面只有页面和效果是完全不够的，还需要和元素有交互行为，交互行为就需要使用脚本语言JavaScript来完成，对HTML和CSS来进行操作。脚本语言是一种轻量级的编程语言，是由浏览器执行。
JS写法
脚本必须位于 <script> 与 </script> 标签之间，如下三种方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 第一种：脚本内容，之间在script标签内写内容 -->
<script>
var str = "Hello world"; //定义赋值
console.log(str); //打印输出控制台，浏览器F12可以查看
</script>
<!-- 第二种：外部文件，创建demo.js文件，然后引入 -->
<script src="./demo.js"></script>
</head>
<body>
<!-- 第三种：html或body内添加script标签，在写内容 -->
<script>
var str = "Hello world";
console.log(str);
</script>
</body>
</html>基本语法
数据类型
var i; //可变类型 var
var i = "Hello world"; // 字符串 可用单引号或双引号
var i = 5.3; // 数字 整数或小数
var i = true; // 布尔 true 或 false
var i = [1,3]; // 数组 任意类型
var i = {a: 1, b: 2}; // 对象 { key: value } 创建
var i = undefined; // 变量不含有值
var i = null; // 变量值设置为 null 来清空变量
变量类型
var a = new String(); // 字符串
var b = new Number(); // 数字
var c = new Boolean(); // 布尔
var d = new Array(); // 数组
var f = new Object(); // 对象字符串
属性：length（长度）
方法：charAt()（返回指定索引位置的字符），concat()（连接字符串），replace()（替换），split()（分割），substr()（从起始索引号提取字符串），toString()（返回字符串对象值），valueOf()（返回字符串对象的原始值）
运算符
| 优先级 | 运算符 | 说明 | 结合性 |
|---|---|---|---|
| 1 | []、.、() |
字段访问、数组索引、函数调用和表达式分组 | 从左向右 |
| 2 | ++ -- -~!delete new typeof void | 一元运算符、返回数据类型、对象创建、未定 义的值 |
从右向左 |
| 3 | *、/、% | 相乘、相除、求余数 | 从左向右 |
| 4 | +、- | 相加、相减、字符串串联 | 从左向右 |
| 5 | <<、>>、>>> | 左位移、右位移、无符号右移 | 从左向右 |
| 6 | <、<=、>、>=、instanceof | 小于、小于或等于、大于、大于或等于、是否 为特定类的实例 |
从左向右 |
| 7 | ==、!=、===、!== | 相等、不相等、全等，不全等 | 从左向右 |
| 8 | & | 按位“与” | 从左向右 |
| 9 | ^ | 按位“异或” | 从左向右 |
| 10 | | | 按位“或” | 从左向右 |
| 11 | && | 短路与（逻辑“与”） | 从左向右 |
| 12 | || | 短路或（逻辑“或”） | 从左向右 |
| 13 | ?: | 条件运算符 | 从右向左 |
| 14 | =、+=、-=、*=、/=、%=、&=、|=、^=、<、<=、>、>=、>>= | 混合赋值运算符 | 从右向左 |
| 15 | , | 多个计算 | 按优先级计算，然后从右向左 |
条件语句
if (条件表达式)
{
// 执行的代码
}
if (条件表达式)
{
// true 执行的代码
} else {
// false 执行的代码
}
if (条件表达式1)
{
// true 执行的代码
} else if(条件表达式2) {
// true 执行的代码
} else {
// 都不满足执行的代码
}switch语句
switch(x)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
不满足 case 1 和 case 2 时执行的代码
}循环语句
// for 循环
for (var i=0; i<5; i++)
{
执行的代码块
}
var obj = {key: value};
for (x in obj ) // x 为属性名 key
{
//属性值 obj[key]
}
// while 循环
while (条件表达式)
{
执行的代码
}
do
{
执行的代码
}
while (条件表达式);break 和 contiune 语句
break 语句用于跳出循环，会继续执行该循环之后的代码。
contiune 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。
对象
var person = {
name: "zeke",
age: 18,
play: function() {
console.log("玩");
}
};
访问属性：person.name; 或 person["name"];
访问方法：person.play();
函数
// 无参函数
function myFunction()
{
// 执行代码
}
// 带参数函数
function myFunction(var1, var2)
{
// 执行代码
return x; // 返回值可有可无
}调用方式：myFunction(); myFunction("aaa", "bbb"); 有返回值 var fun = myFunction("aaa", "bbb");
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）