一，JavaScript基本概念
1. JavaScript是Web开发领域中的一种强大的编程语言，主要用于开发交互式的网页。我们在计算机，手机等设备上浏览的网页，其多数交互逻辑都可以通过JavaScript实现。
下面介绍HTML，CSS，JavaScript的区别
- HTML （结构）决定网页的结构和内容。
- CSS（样式）决定网页呈现给用户的模样。
- JavaScript（行为）实现业务逻辑的页面控制
2.JavaScript是由ECMAScript，DOM，BOM
- ECMScript：规定了JavaScript的编程语法和基础核心
内容，是所有浏览器厂商共同遵守的一套JavaScript语法工业标准。 - DOM：文档对象模型，是W3C(World Wide WebConsortium，万维网联盟)组织制定的用于处理HTML文档和XML(Extensible Markup Language，可扩展标记语言)文档的编程接口，它提供了对文档的结构化表述，并定义了一种方式使程序可以对该结构进行访问，从而改变文档的结构、样式和内容。
- BOM:浏览器对象模型，是一套编程接口，用于对浏览器进行操作，如刷新页面、弹出警告框、控制页面跳转等。
3.JavaScript初体验
像这样使用，在网页打开时会弹出一个警告框，内容为Hello JavaScript。
二，JavaScript代码引入方式
1.行内式
行内式是将JavaScrip 代码作为HTML,标签的属性值使用。例如，在单击超链接“i”时，弹出一个警告框提示“Hello”
2.嵌入式
嵌入式(或称内嵌式)使用<script>标签包裹JavaScript代码，直接编写到HTML文件中，通常将其放到<head>标签或<body>标签中。<scripb>标签的 type 属性用于告知浏览器脚本类型，HTML5 中该属性的默认值为“textjavascript”，因此在使用 HTML5 时可以省略 type 属性。
3.外链式
外链式(或称外部式)是将JavaScript 代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML,页面中使用<script>标签的src属性引人“js”文件。外链式适合JavaScript 代码量较多的情况。在HTML页面中引人“js”文件。
常用输入输出语句
- 输入 prompt() 用于在浏览器弹出输入框，用户可以输入内容
- 输出 alert() 用于在浏览器弹出警告框
- 输出 document.write()用于在网页中输出内容
- 输出 console.log()用于在控制台输出信息
三.JS基本语法
1.变量
1.变量的命名规则
变量的命名类似于父母给孩子取名字，变量有了名字才能更好地进行辨认。在对变量命名时，应遵循变量的命名规则，从而避免代码出错。
- 不能以数字开头，且不能含有+、-等运算符，如56name、56-name就是非法变量名。
- 严格区分大小写，如i与IT是两个不同的变量名。
- 不能使用 JavaScript中的关键字命名。关键字是JavaScript语言中被事先定义并赋予特殊含义的单词,如 va就是一个关键字。
- 为了提高代码的可读性，在对变量命名时应遵循以下建议。
- 使用字母、数字、下画线和美元符号(8)来命名，如st、am3、get name、Sa。需要说明的是，只要程序不报错，其他字符(如中文字符)也能作为变量名使用，但是不推荐这么做。
- 尽量要做到“见其名知其义”，如price 表示价格，age 表示年龄等。
- 采用驼峰命名法，第1个单词首字母小写，后面的单词首字母大写，如myBooks。
2.变量的声明与赋值
JavaScript中变量通常使用var关键字声明，变量声明完成后，默认值会被设定为undefined。
2.1先声明后赋值
//声明变量
var myName; //声明一个名称为myName的变量
var age,sex; //同时声明两个变量
//为变量赋值
myName ="" //为变量赋值"小明"
age=18; //为变量赋值18
sex='男'; //为变量赋值'男'变量赋值以后可以用console.log()方法将变量的值输出到控制台
console.log(myName); //输出变量myName的值
console.log(age); //输出age的值
console.log(sex); //输出sex的值2.2声明的同时并赋值
在声明变量的同时为变量赋值，这个过程又被称为定义变量或初始化变量
var myName='小明'; //声明变量，同时赋值为小明3.变量声明区别
- 初始化要求不同
使用var和let声明变量时可以先不初始化，而使用const声明变量时必须初始化。
- 重复声明不同
使用var和let声明的变量可以多次被修改,其值只与最近一次赋值一致，而使用const声明的变量,在整个运行过程中不能修改初值.
- 对块级作用域的支持不同
使用一对花括号括起来的代码称为一个代码块所谓块级作用域，
就是指变量起作用的范围是当前代码块，离开当前代码块，变量就失效了。
使用var声明的变量支持全局作用域，使用let和const声明的变量支持块级作用域。
2.基本数据类型
//boolean布尔型
let flag1=true;
let flag2=false;
console.log(flag1);
//True False 写法是错误的
let flag3="true";
console.log(flag3);
//数字类型number
let age=18;
let date="0306";
console.log(date);
console.log(age);
console.log(Number.MAX_VALUE); //最大值
console.log(Number.MAX_VALUE*2); //无限大
var a=3-"b"
console.log(a); //NaN(not number) 也属于数字类型
//isNaN判断是否为一个数字，如果是非数字为true，是数字则为false
console.log(isNaN(a));
console.log(isNaN(111));
console.log(isNaN("aaa"));
console.log(isNaN(false));
console.log(isNaN(Infinity));
console.log(isNaN("false"));
//字符串类型string
let demo="1";
let demo2=`1`;
let demo3='1';
let demo4="呦西";
console.log("111\"222")
//未定义型undefined
//表示声明变量还未赋值
let grate;
console.log(grate);
//null空型
var a=null;
console.log(null);2.1数据类型检测
//isNaN检验是否是一个非数字
//typeof()
console.log(typeof("111"));
console.log(typeof(false));
console.log(typeof(NaN));
console.log(typeof false);
console.log(typeof Infinity);
console.log(typeof "true");
console.log(typeof undefined);
console.log(typeof null); //object对象类型
console.log(typeof('aaa'*2)); //number
console.log('aaa'*3); //NaN
console.log(typeof(2-"true")); //number
console.log(2-"true"); //NaN
//布尔类型在数字运算中转化为数字 true为1 false为0
console.log(2-true); //1
console.log(typeof(2-true)); //number
//加号遇上字符串作拼接使用
console.log(2+"true"); //2true
console.log(typeof(2+"true")); //string
console.log(2+true); //3
console.log(typeof(2+true)); //number2.2数据类型转换
2.2.1将数据类型转化为布尔型
数字和字符串都会转换为true
代表空或否定的值会转化为false(空字符串，数字0，NaN，null，undefined)
var a=Boolean("a")
console.log(a); //true
console.log(Boolean(123)); //true
console.log(Boolean("")); //false
console.log(Boolean(" ")); //true
console.log(Boolean(NaN)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean(null)); //false
2.2.2将数据转换为字符串类型
var num1=12,num2=26;
console.log(String(num1)); //输出结果12
console.log(num1.toString()); //输出结果12
console.log(num2.toString(2)); //输出结果11010
2.2.3将数据转化为数字类型
| 待转换数据 | parseInt()转换结果 | parseFloat()转换结果 | Number()转换结果 |
| 纯数字字符串 | 对应的数字 | 对应的数字 | 对应的数字 |
| 空字符串 | NaN | NaN | 0 |
| null | NaN | NaN | 0 |
| undefined | NaN | NaN | NaN |
| false | NaN | NaN | 0 |
| true | NaN | NaN | 1 |
3.运算符
3.1算术运算符
let a=10;
let b=20;
//加法
console.log(a+b);
//减法
let c=b-a;
console.log(c);
//乘法
console.log(c*b);
//除法
b=b/a;
console.log(b);
//取模
console.log(25%4);
//幂运算
console.log(2**10); //2*2*2*2*2*2*2*2*2*2
//自增运算
m=5;
n=++m;
console.log(m); //6
console.log(n); //6
m=5;
n=m++
console.log(m); //6
console.log(n); //5
var x=1; y=2;
console.log(++x);
console.log(x);
console.log(y++);
console.log(y);
//自减运算
q=2;
p=--q;
console.log(q); //1
console.log(p); //1
q=2;
p=q--;
console.log(q); //1
console.log(p); //2
var d=10; s=20;
console.log(d++); //10
console.log(d); //11
console.log(d--); //11
console.log(d); //103.2字符串运算符
隐式转换；当两个数据类型不同时，js会按照既定的规则进行转换
字符串运算符；加号遇上字符串作拼接使用
console.log(1+1); //2
console.log(1+null); //1
console.log(1+true); //2
console.log(1+false); //1
console.log("12"-0); //12
console.log(undefined+null); //NaN
console.log(Infinity ++); //无限大
console.log(1+"1"); //11
console.log(1+"null"); //1null
console.log(null+"undefined");3.3赋值运算符
//赋值
let a=10;
let b=20;
let c=a+b;
console.log(c);
//加等于 ；加并赋值+=
a+=b;
//a=a+b
console.log(a); //30
console.log(b); //20
a-=b
//a=a-b
console.log(a); //10
console.log(b); //20
a*=b;
//a=a*b
console.log(a); //200
console.log(b); //203.4比较运算符
例如> , < , >= , <= , ==(等于) ,!= (不等于) , ===(全等于) , !==(不全等)
//!=不等
console.log(4!=5); //true
console.log(4!=4); //false
console.log("5"!=5) //false
//==等于
console.log(4=="4"); //true
console.log(true=="true"); //false
//===全等于
console.log(4==="4"); //false
//!==不全等
console.log("5"!==5); //true3.5逻辑运算符
| 运算符 | 运算 | 示例 | 结果 |
| && | 与 | a&&b | 有一个false则为false,全是true则为true |
| || | 或 | a||b | 有一个为true则为true |
| ! | 非 | !a | 若a为false，则结果为true，否则相反 |
3.6三元运算符
//条件表达式 ？ 表达式1：表达式2
//如果条件表达式的值为true，则返回表达式1执行的结果
//如果条件表达式的值为false，则返回表达式2的执行结果
var age=prompt("请输入你的年龄")
console.log(age);
var res = age>=18 ?"已成年":"未成年";
document.write(res)3.7运算符优先级
小括号 > 一元运算符 > 比较运算符 > 逻辑运算符 > 赋值运算符
let a= 3>5 && 2<7 && 3;
console.log(a); //false
let b= 3>5 || 2<7 && 3==="3";
console.log(b); //false
let c = 2 == "2";
console.log(c); //true
let d = !c && (b || a)
console.log(d); //false4.流程控制
4.1选择结构
-
if语句(单分支)，if ... else语句(多分支)
// if语句(单分支)
// if(条件表达式){代码段}
let age = prompt("请输入你的年龄")
if (age>=18){
document.write("你可以进入此网站")
}
// if ... else语句(双分支)
// if(条件表达式){代码段}else{代码段2}
let age = prompt("请输入你的年龄")
if (age>=18){
document.write("你可以进入此网站")
}else{
document.write("非法访问")
}
// if...else if...else语句(多分支)
if(条件表达式1){
条件表达式1的结果
}else if(条件表达式2){
条件表达式2的结果
}else if(条件表达式3){
条件表达式3的结果
}else{
除了123之后的结果
}
- switch语句
//switch语句
//case情况 break跳出循环
// switch(表达式){
// case 值1:
// 代码段
// break;
// case 值2:
// 代码段
// break;
// case 值3:
// 代码段
// break;
// ...
// default:
// 代码段;
// }4.2循环结构
- for语句
//for语句
// //for(初始化变量;条件表达;操作表达式){
// 循环体
// }
//需求:在控制台输出1~100的整数
// for(var i=1;i<=100;i++){
// console.log(i);
// }
//在控制台输出0到100之间的偶数
// for (var i=1;i<=100;i++){
// if (i % 2 == 0) {
// console.log(i);
// }
// }- while语句
//while语句
// while (条件表达式) {
// 循环体
// }
//输出1~100的整数
//初始化变量
// var i=1;
// while (i<=100) {
// console.log(i);
// i++;
// }
- do while语句
//do...while
//while (先判断条件表达式的值再根据条件表达式的值决定是否执行循环体)
//do...while (会无条件的先执行一次循环体，然后再判断条件表达式的值，再根据判断的值是否进
行循环)
//do (循环体) while (表达式)
//在控制台输出1~100的整数
// var i=1;
// do {
// console.log(i);
// i++;
// } while (i<=100);4.3跳转语句
- break语句会立即跳出整个循环，也就是循环结束
- continue语句用来立即跳出本次循环，也就是跳过continue语句后面的代码，继续下一次循环
//1.break 语句
for(var i=1; i<=5; i++){
if(i==3){
console.log("吃到了毒苹果");
break; //跳出循环
}
console.log("我吃完了"+i+"个苹果");
}
//2.continue语句
for(var n=1; n<=5 ; n++){
if(i==3){
console.log("吃到了🤢苹果");
continue;
}
console.log("我吃完了"+n+"个苹果");
}4.4嵌套循环
//在控制台输出4列4行的"👻"
// var gho='';
// for (var i=1;i<=4;i++){
// //成行
// for(var j=0; j<=3 ; j++){
// gho+="👻";
// }
// // "\n"是换行转义符
// gho+="\n"
// }
// console.log(gho);
// var a="";
// for(var i=1; i<=5 ; i++){
// for(var j=0; j<i ;j++){
// a+="❤️";
// }
// a+="<br>";
// }
// document.write(a)
5005
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
