Javascript(JS)
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。依赖于某种容器来运行，它是由浏览器来解释执行。JS是运行在浏览器上的，可以帮助我们去控制页面，去实现丰富的功能。Vue.js react.js jquery.js angular.js是js的框架。Node.js是前端的服务器语言。
编程语言的分类：
- 解释型：js、python
- 编译型：c++、c#
- 半解释半编译：java
一、JS的引入，应该写在什么位置？
因为js是脚本语言，无论放哪里，浏览器js解释器都能解析。为了规范不成文的规定是js放在：<body>......</body>中间
<body> <script> // js代码区 </script> </body>也可以写在<head>....</head>中间，但不建议这么做
Js尽量使用外部样式（引入外部），但是有些js必须在html中写。
<body>
<script src=""> //引入外部的js，src=""填写js文件地址
// js代码区
</script>
</body>二、JS的数据类型
（1）Js的简单数据类型：
1、数字(number) :整数，正数，小数，负数
2、字符串(string) : a，中文，@
3、布尔型(boolean) :_ true (1) false (0)
4、空(null) :相当于声明了值为空
5、undefined: 未定义，没有值
6、字面量：开发中尽量减少使用字面量，因为后期有维护困难的问题。
<body>
<script>
/*此处可以写js*/
// 变量
// number类型
var v1 =11;
// 字符串类型
// 加引号会把变量变成字面量
var v2 ='你好';
// 布尔类型
var v3 =true;
// 空
var v4 =null;
// undefined(未赋值)
var v5;
// 字面量
alert(v1);/*弹窗*/
alert(v2);
alert(v3);
alert(v4);
alert(v5);
</script>
<!-- <script src="../javascript/js/my.js">
// 引入外部的js </script> -->
</body>一些结果注意事项：
在ES6(JS的新版本)中，新推出了两个词代替var
1、let: 变量用1et声明，无法重复定义的
2、const: 有let的特点，const声明的变量就是一个常量
（2）Js的复杂数据类型：
1、数组函数:一个变量对应多个值
<body>
<script>
// 1.使用数组函数
let arr =Array();
// 弹窗警告
// alert(arr)
// console.log(1111111);
// console.log(arr);
// 2.使用new关键字
let arr2 = new Array();
// 3.使用字面量的方式
let arr3 = [];
// 赋值
// 下标（索引）
// 给数组的第一个元素赋值
arr3[0] = 100;
arr3[1] = 90;
// 打印输出数组中的第一个值
console.log(arr3[0]);
</script>
</body>结果得到100.
2、定义函数:定义一个函数，用来执行一系列代码。函数定义以后，不会自己执行的，需要我们手动调用函数
1.无参无返回值
2.无参有返回值
3.有参有返回值
4.有参无返回值
2、调用函数：函数内部不可以再声明函数，但是可以调用函数，调用的方式和正常调用的方式相同
3、带有参数的函数：return除了可以返回结果，还可以终止函数的继续执行。开发中，尽量不要在return后面继续写语句。
<body>
<script>
// 1.定义函数
// 作用域：起作用的区域
function hello(){
// console.log("神经计算机");
let v1 =10;
console.log(v1 + 5);
}
// 2.调用函数
// hello();
// console.log(v1);
function add() {
let num1 = 10;
let num2 = 20;
// console. log(num1 + num2);
//add:带有返回值的函数
return num1 + num2;
}
// 30
// let result = add( );
// console.log(result) ;
// console.log(add()) ;
// 3.带有参数的函数
//给参数赋值
function sub( num1,num2){
return num1 - num2;
}
// let result = sub(200,100);
// console.log(result);
function start(){
let result = sub(2,2);
}
function end(){
console.log("end函数被执行...");
//return除了有返回值的作用
//还有一个结束函数执行的作用
return
}
console.log("我是end函数后面的语...");
</script>
</body>三、3种弹窗
弹窗：实质上就是函数
1、alert: 警告弹窗，没有返回值
2、confirm: 带有确认和取消的弹窗，有返回值，点击确定，返回true，点击取消，返回false
3、prompt: 带有文本框的弹窗，有返回值，就是文本框输入的内容
\r、\n ：换行符，弹窗里的回车
四、逻辑判断，流程控制
一、
1、运算符
<body>
<script>
// 1.算术运算符+ - * / %(取余，取模)
// console.log(5 % 2);
// 2.赋值运算符=+=-=*=/=%=
let a = 10;
//a = a + 1;
//a += 1;
//a++;
// ++a
// console.log(a);
// ++a
//3.比较运算符 > < >= <= != == ===
let b = '10';
// console.log(a != b);
// console.log(a === b);
// a >=b a => b
// 4.逻辑运算符 与或非
// 与 并且 且 &&
let c = 50;
// console.log(a > b && a <= b);
// 或 或者 ||
// console.log(a > b || a <= b);
// 非 !true
// console.log(!(a > b));
let d;
console.log(!d);
</script>
</body>2、逻辑运算符(得到布尔类型) :
逻辑与& :有一个为false，结果是false
短路与&&:一 个为false，结果是false。前一个为false，后一个条件不执行
逻辑或|:有一个为true，结果是true
短路与||:一个为true，结果是true。 前一个为true， 后一个条件不执行
逻辑非! : ! True=false
!false=true
逻辑异或:
相同是false，不同是true(两男在一起假两女在一 起假5.-男一.女真)
3、三元运算符（三目运算符）：语法是固定的，只能有一个条件，两个选项。
比较数的大小：
<body>
<script>
// 三元运算符
let a = 10;
let b = 20;
/*
语法格式：
条件表达式 ? 表达式1 : 表达式2
*/
// 求a和b的最大值
// let max = a > b ? a : b;
// console.log(max);
// 求4个数的最大值，用三元运算符
let c = 50;
let d = -1;
function getMax(num1,num2) {
return num1 > num2 ? num1 : num2;
}
function hello(){
console.log("我是hello");
}
// let max1 = getMax(a,b);
// let max2 = getMax(c,d);
// let max = getMax(getMax(a,b),getMax(c,d));
// console.log(getMax(getMax(a,b),getMax(c,d)));
a < b ? hello() : alert(2);
</script>
</body>+号的特殊性--除了可以进行加法计算之外，还是连接符。
如果先入为主的认定+号为连接符，那它就一直是连接符|
- */ %:可以进行类型转换，如果转不了，结果为NaN (not a number)
二、
逻辑判断:
- if... else结构：
语法
If(条件表达式){
要执行的代码;
}else{
要执行的代码;
}
<body>
<script>
let a = 10;
let b = 20;
// 多重if
if(a < 10){
console.log("a<10");
}else if(a === 10){
console.log("a==10");
}
else{
// else的条件是和if的条件互补
console.log('a>10...');
}
// if(a > b){
// console.log("a比b大");
// }
</script>
</body>if... else结构和多重if结构有什么区别?
if... else是可以嵌套的，可以无限嵌套,但是原则上要求不超过三层。
2.switch... case结构:
语法:
switch (表达式) {
case选项1:
要执行 的代码;
case选项2:
要执行的代码;
........
default:
要执行的代码；
}
当表达式的值在case中匹配成功，会执行对应的代码，但是停不下来，后面的代码会继续执行。
要解决这个问题：加个 break;
<body>
<script>
let a = 20;
switch(a){
case 10:
console.log('ddd');
break;
case 20:
console.log('ghh');
break;
default:
console.log('ssss');
break;
}
</script>
</body>两个结构怎么选?
1、当需求为区间范围时，switch... case根本无法使用。
2、if...else...基本上啥都能干
3、switch... case效率高
4、当需求为固定值，且值不多，swi tch... case
5、能用switch. . case解决的不要用if... else
相似之处:
1、几乎所有的switch. .. case都可以转化为if... else
2、default几乎相当于else :
3、case几乎相当于if
4、都可以嵌套
不同之处：
1.else不可以乱放，条件在前，default可以放前或者中间。
2.Switch需要break。
3.Switch里面的选择可以杂乱无章
今日学习总结：
1. 学习收获
在原本所掌握的知识上更上了一层楼，但是还是无法自己完整快速的写出一段代码并解决代码，写出的代码也很鸡肋，还需继续努力！！！
2. 知识点： 了解
3. 掌握情况：理解
扫一扫
175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
