啥都没学到，现在学起来吧，同学推荐js入门，html和css我懂一点点，慢慢学吧
在B站尚硅谷里找的课，附网址:【尚硅谷】JavaScript基础&实战丨JS入门到精通全套完整版_哔哩哔哩_bilibili
在我的理解看来，入门绝对够，教我这种菜鸡至少够了
学吧
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>不持之以恒学JS是真的xibaer</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script>
//格式整理Ctrl+A Shift+Alt+F
//快速查找Ctrl+f
/*
一个警告框
*/
alert("xibaer");
//在页面中输出一个内容
document.write("看我出来不");
// 向控制台输出一个内容
console.log("你看我在哪？");
//使用var来声明变量
var a;
// let a; 声明变量
// const a;
alert(a);
//string 字符串
var str = "hello wold";
console.log(str);
//number 整数、浮点数
var number1 = 123.456;
console.log(number1);
/*
* Number 整数、浮点数
* String 字符串
* Boolean 布尔值
* Undefined 当一个声明了但是未初始化的变量会默认赋值为字符串“undefined”
* Object 将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象
*
*/
/*
* typeof 变量
* 用来检查一个变量的类型
*/
console.log(typeof str);
console.log(typeof number1);
console.log(typeof a);
//JS 中可以表示的最大值为 Number.MAX_VALUE
console.log(Number.MAX_VALUE);
//在js中如果需要表示十六进制数，则需要0x(零和艾克斯)开头
sHiLiu = 0x10;//十六
sHiLiu2 = 0xff;
console.log(sHiLiu);
console.log(typeof sHiLiu);
console.log(sHiLiu2);
// 如果需要表示八进制数，则需要0开头
bAjinZhi = 016;
console.log(bAjinZhi);//bAjinZhi=八进制
//不是所有浏览器都支持
// 如需要表示二进制数，则需要0b开头
eRjinZhi = 0b101011;
console.log(eRjinZhi);//eRjinZhi=二进制
//parseInt用来string转换为number
pzHuanN = "070";//p转n
console.log(typeof pzHuanN);
console.log( pzHuanN);
/*
*转换时，有的浏览器会把070转换为十进制number类的字符输出70，但有些浏览器则会
解析成八进制输出56.
*/
pzHuanN = parseInt(pzHuanN);
//可以在parseInt中传递第二个参数,来指定数字的进制
pzHuanN = parseInt(pzHuanN,10);
//Boolean值是判断Ture和Flase
var zhuAnBoolean = 123;//转Boolean
console.log(zhuAnBoolean);
console.log(typeof zhuAnBoolean);
//调用Boolean()函数来将zhuAnBoolean转换为布尔值
zhuAnBoolean = Boolean(zhuAnBoolean);
console.log(zhuAnBoolean);
console.log(typeof zhuAnBoolean);
//123输出为True
//-123输出为True
//0输出为False
//Infinity(无穷大)输出为True
//NaN(是not a number的缩写，表示不是一个合法的数字)输出为False
// 数字转布尔，除了0和NaN其余都是Flase
// 字符串转布尔，除了空串(啥都不写，像"")，其余都是True
//a = null输出为False
//Undefined(当一个声明了但是未初始化的变量会默认赋值为字符串“undefined”)输出为False
// 对象也会转换为True
/*
* 运算符也叫操作符
* 通过运算符可以将一个或多个值进行运算
* 比如 typeof 就是一个运算符，可以获得一个值的类型
*
* a = 123;
* typeof a;
*
* 可以像 var result = typeof a; 这样来让result接受typeof的运算值
* 在这样 console.log(result); 输出就是number和 console.log(typeof a); 输出一样
*
* 算术运算符： + - * / %
*
* 一般不对原变量产生影响
* var a = 123;
* a + 1;
* console.log(a);
* 输出还是123
* 赋值才会改变
* 当对非Number类型的值进行运算时，会将这些值转换为Number然后再运算
* 任何值和NaN做运算，都得NaN
*如果对两个String字符串做 + 运算，则会做拼串
*like this
* result = "你好" + "大帅哥";
* console.log(result);
* 输出值为：
* 你好大帅哥
* 任何值和字符串做加法运算，都会先转换为字符串，再进行拼串的操作
* turo做运算是1，但和字符串相加，会输出turo....
*
* 我们只需要为任意的数据类型 +一个""就可以把该数据转换为String
* (一种隐形的类型转换，由浏览器完成，也是调用的String()函数)
* c = String(c);
*
*
* console.log("c = " + c);
*
* result = 100 - "1" ;
* console.log("result = " + result);
* "result = 99"
*
* result = 2 * "8" ;
* console.log("result = " + result);
* "result = 16"
*
* 任何值做 - * / 运算时，都会自动转换为Number
*
* result = 9 % 3;
* console.log("result = " + result);
* "result = 0"
*
*/
//+号不会改变数据类型
//-号会改变数据类型后输出
strZhuanNum = "18";
strZhuanNum = - strZhuanNum;
console.log("strZhuanNum = " + strZhuanNum); // "result = -18"
console.log(typeof strZhuanNum); //"number"
//可以对其他类型的数据使用+，来将其转化为Number,原理和Number()一样
//自增
var ziZeng = "自增";
var ziZeng = 1;
//1的基础上自增
ziZeng++;
//2的基础上自增
ziZeng++;
console.log("ziZeng = " + ziZeng); //ziZeng为3
//++a是新值，a++是原值
/*
* var d = 20;
* result = d++ + ++d + d;
* d++ 20 ++d 22 d 22
* result = 64
*/
//a--是原值
//--a是新值
//计算题 ziZengJiSuan = 自增计算
var ziZengJiSuan1 = 10;
var ziZengJiSuan2 = 20;
var ziZengJiSuan = ziZengJiSuan1++;
// ziZengJiSuan1为11,ziZengJiSuan1++为10,ziZengJiSuan为10
console.log('ziZengJiSuan = ' + ziZengJiSuan);//10
console.log('ziZengJiSuan1 = ' + ziZengJiSuan1);//11
ziZengJiSuan = ++ziZengJiSuan1;
//ziZengJiSuan为12，ziZengJiSuan1为12
console.log('ziZengJiSuan = ' + ziZengJiSuan);//12
console.log('ziZengJiSuan1 = ' + ziZengJiSuan1);//12
ziZengJiSuan = ziZengJiSuan2--;
//ziZengJiSuan=20,ziZengJiSuan2=19
console.log('ziZengJiSuan = ' + ziZengJiSuan);//20
console.log('ziZengJiSuan2 = ' + ziZengJiSuan2);//19
ziZengJiSuan = --ziZengJiSuan2;
//ziZengJiSuan = 18,ziZengJiSuan2 = 18
console.log('ziZengJiSuan = ' + ziZengJiSuan);//18
console.log('ziZengJiSuan2 = ' + ziZengJiSuan2);//18
/* 逻辑运算符
* js为我们提供了三种逻辑运算符
* ! 非
* -- ! 可以用来对一个值进行非运算
* -- 所谓非运算就是值对一个布尔值（boolean)进行取反操作
* true变false,false变true
* -- 对一个值进行两次取反，则结果不会有变化
* -- 如果对非布尔值进行运算，则会将其转换为布尔值，在进行运算
* 所以可以利用该特点，将其他的数据类型转换为布尔值,取两次反，就可以得到原值(隐式类型转换)，原理个Boolean()一样
* && 与
* -- && 可以对符号两侧的值进行与运算并返回结果
* 运算规则
* --两个值中只要有一个值为false，就返回false，只有两个值都为true时，才会返回true(爱情！！)
* --JS中的“与”属于短路的与，如果第一个值为false，则不会看第二个值
* 是个找false的
*
*
* || 或
* -- || 可以对符号两侧的值进行或运算
* -- 两个值只要有一个true就返回true
* -- JS中的“或”属于短路的或，如果第一个值为true，则不会检查第二个值
*
*
*/
// ! 非运算
var luoJiYunSuanFu = true;//逻辑运算符
console.log("luoJiYunSuanFu = "+luoJiYunSuanFu);
//对luoJiYunSuanFu进行非运算
luoJiYunSuanFu = !luoJiYunSuanFu;
console.log("luoJiYunSuanFu = "+luoJiYunSuanFu);//false
// && 与运算
var luoJiYunSuanFu = true && false;//逻辑运算符
//对luoJiYunSuanFu进行与运算
console.log("luoJiYunSuanFu = "+luoJiYunSuanFu);//false
//只要有一个false就返回false
//第一个值为true会检查第二个值
true && alert("第一个值为true,所以我出来了!!");
false && alert("第一个值为false,所以我出不来了!!");
// || 或运算
//只要有一个就返回true
luoJiYunSuanFu = false || false;
console.log("luoJiYunSuanFu = "+luoJiYunSuanFu);//false
luoJiYunSuanFu = true || false;
console.log("luoJiYunSuanFu = "+luoJiYunSuanFu);//true
luoJiYunSuanFu = false || true;
console.log("luoJiYunSuanFu = "+luoJiYunSuanFu);//true
luoJiYunSuanFu = true || true;
console.log("luoJiYunSuanFu = "+luoJiYunSuanFu);//true
//只要有一个true就返回true,不检查第二个值
//第一个值为false会检查第二个值
false || alert("第一个值为false,所以我出来了!!");
true || alert("第一个值为true,所以我出不来了!!");
/*
* 或|| 与&& 非布尔值的情况
*
* &&
* -- 队非布尔值进行与或运算时
* 会先将其转换为布尔值，在进行运算
* --如果第一个值为ture,则返回第二个值
* 第一个值为false,则返回第一个值(原值)
*
* ||
* --如果第一个值为ture则返回第一个值
* 如果第一个值为false则返回第二个值
*
*
*/
//与运算 &&
//两值为ture返回靠后的，两值为false，则返回靠前的false
var feiBooLean = 1 && 2;//非布尔值的运算
console.log("feiBooLean = " +feiBooLean);
//2
//与运算，如果两个值都为ture，则返回后面的值！
feiBooLean = 0 && 2;//false && true
console.log("feiBooLean = " +feiBooLean);
//0
//如果有false则返回false
feiBooLean = NaN && 2;//false && false
console.log("feiBooLean = " +feiBooLean);
//Nan
//或运算 ||
var feiBooLean = 1 || 2;//非布尔值的运算
console.log("feiBooLean = " +feiBooLean);
// 1
//赋值运算符
/*
* =
* --可以将符号右侧的值赋值给符号左侧的变量
* var a = 123；
*
* 别分开了！！！！
*
* += var a = 10;
* -- a += 5;等价于 a = a + 5; 15
* -=
* -- a -= 5;等价于 a = a - 5; 5
* *=
* -- a *= 5;等价于 a = a * 5; 50
* /=
* -- a /= 5;等价于 a = a / 5; 2
* %=
* -- a %= 5;等价于 a = a % 3; 1 余数
*
* var a = 10;
* a = a + 5; 15
*/
/* 关系运算符
*
* 通过关系运算符可以比较两个值之间的大小关系
* 如果关系成立，会返回true，不成立返回false
*
* > 大于号
* console.log(5 > 10); false
* >= 大于或等于
* <
* <=
* 非数值的情况
* console.log(1 > true); false
* console.log( 1 >= true); true
* 对于非数值进行比较时，会将其转换成数字，在进行比较
* null = 0;
* 字符串"hello" = NaN
* 任何值和NaN做任何比较都是false！！！
* true = 1;
* false = 0;
*
* console.log( "11" < "5"); true ??????
* 如果符号 两侧 的值都是字符串，不会将其转换为数字进行比较
* 而会分别比较字符串中字符的Unicode编码
* 举个例子
* console.log( "a" < "b"); true 是对的a<b
* console.log( "abc" < "b"); true
* 也是对的abc和b比，只比第一位
* 比较字符编码是一位以为比，就abc和b比，就比a和b，abc的b和b中没得比了，两位一样则比较下一位
* 可以借用这个，来对英文进行排序，中文不行，所以无字行！！！
* 前面"11"和"5"比，先1和5比，1的编码是"00031"，而5是"00035"，所以5的编码数大，后面的"1"不看了就
* 如果比较的是两个字符串型的数字，可能会得到不可预期的结果,可以加一个字符转变
* 举个例子
* console.log( "12312" < "5"); true
* console.log( "12312" < +"5"); false
* 注意：在比较两个字符串型的数字时，一定一定要转型
* 购物车之类的项目
*/
/* Unicode编码
* 在字符串中使用转义字符输入Unicode编码
* \u+四位编码
*
* 在网页中使用unicode编码
* &#编码;这里编码需要的是10进制
* /u2620
* 网页中需要转换为
* <h1 style="font-size :200px">☠</h1>
*/
console.log("\u1c00");
/* 相等运算符
* --用来比较两个值是否相等，
* 如果相等会返回true，否则返回false
*
* 使用 == 来进行相等运算
* --当使用 == 来比较两个值时，如果值的类型不同
* 则会自动进行类型转换，将其转换为相同的类型
* 然后在比较
* 不相等 !=
* --不相等也会对变量进行自动的类型转换，如果转换后相等他也会返回false
*
* === 全等
* --用来判断两个值是否全等，和相等类似，但不做自动的类型转换
* 两个值的类型不同，则直接返回false
* console.log("123" === 123); false
*
* !== 不全等
* --用来判断两个值是否不全等，和不等类似，但不会做自动的类型转换
* 如果两个值的类型不同，会返回true
* console.log(1 !== "1"); true
*
*/
console.log(1 == 1); //true
console.log("1" == 1); //true
console.log("1" == true); //true
console.log(null == 0); //false
// undefined 衍生自 null,所以这两个值做相等判断时，会返回true
//NaN 不和任何值相等，包括他本身
//可以通过isNaN()函数来判断一个值是否为NaN
var bShiBuShiNaN = NaN;//b是不是NaN
console.log(isNaN(bShiBuShiNaN)); //true
console.log("123" === 123); //false
console.log(1 !== "1"); //true
/* 条件运算符
* --也叫三元运算符
* 语法：
* 条件表达式 ？语句1:语句2；
* --执行的流程：
* 条件运算符在执行是，首先对条件表达式进行求值，
* 如果该值为true，则执行语句1
* 如果该值为false，则执行语句2，并返回结果
*
* 如果条件的表达式的求职结果是一个非布尔值，
* 会将其转换为布尔值在运算
*
*
*/
true?alert("语句1"):alert("语句2");
var tiaoJianYunSuan1 = 10; //条件运算
var tiaoJianYunSuan2 = 20;
tiaoJianYunSuan1 > tiaoJianYunSuan2 ? alert("tiaoJianYunSuan1大"):alert("tiaoJianYunSuan2大"); //a大
//获取tiaoJianYunSuan中的最大值
var max = tiaoJianYunSuan1 > tiaoJianYunSuan2 ? tiaoJianYunSuan1 : tiaoJianYunSuan2 ;
console.log("max = " +max);
//获取tiaoJianYunSuan三个中的大值
var tiaoJianYunSuan3 = 50;
max = max > tiaoJianYunSuan3 ? max : tiaoJianYunSuan3;
console.log("max = " +max);
//简化，不推荐，不方便阅读
max = tiaoJianYunSuan1 > tiaoJianYunSuan2 ? (tiaoJianYunSuan1 > tiaoJianYunSuan3 ? tiaoJianYunSuan1 : tiaoJianYunSuan3) : (tiaoJianYunSuan2 > tiaoJianYunSuan3 ? tiaoJianYunSuan2 : tiaoJianYunSuan3); //3
//max = a>b?(a>c?a:c):(b>c?b:c);
// 先判断ab的大小，然后a大输出a，做前面的判断，b大就做后面的，最后输出的就是三个中最大的！！
console.log("max = " +max);//3
/* 运算符的优先级
* ,运算符
* --使用 , 可以分割多个语句，一般可以在生名多个变量时使用，并赋值。
* var a;
* var b;
* var c;
* like this var a=1,b,c;
*
* 和数学中一样，在js中运算符也有优先级，
* 比如：先乘除，后加减
* var result = 1+2*3;
*
* 在js中有个优先表，越靠上越高，高的先算
* 如果优先级一样，则从左往右计算
* 不需要记忆，如果有不清楚的可以用()来改变优先级
*
* var result = 1||2&&3;
* console.log("result = " +result); 1
* var result = (1||2)&&3;
* console.log("result = " +result); 3
*
*/
/* 代码块
* --语句是按照自上向下的顺序一条一条执行的
* 在js中可以用{}来对语句进行分组
* 同一个{}中，要么都执行，要么都不执行
* 一个{}中，成为一个代码块
* 在代码块后，不用写 ; 了
* 在js中{}只有分组的作用，没有其他作用
* 代码块内部的内容在外部是完全可见的
*
* like this
* {
* var a = 10;
* }
* console.log("a = " +a); 10
*
*/
/* 流程控制语句 if
* --JS中的语句是从上到下一行一行执行的
* 流程控制语句使程序根据一定的条件来选择执行
* --语句的分类
* 1.条件判断语句
* 2.条件分支语句
* 3.循环语句
*
* 条件判断语句
* -- 可以在执行某个语句之前进行判断
* if语句
* --语法一
* if(条件表达式) {
* 语句
* }
* 判断为true，则执行if后的语句，false则反之
* if(true) {
* alert("你猜我出来吗")；
* }
*
* --语法2
* if(条件表达式) {
* 语句....
* } else {
* 语句...
* }
*
* if..else...语句
* if后的表达式求值判断，如果为true，if后的语句，为false，则执行else后的语句
* var age = 50;
* if(age >= 60) {
* alert("你该退休了！！")
* } else {
* alert("你还不该退休了！！")
* }
* alert("你还不该退休了！！")
*
* --语句3
* if(条件表达式) {
* 语句....
* } else if(条件表达式){
* 语句...
* } else if(条件表达式){
* 语句...
* } else {
* 语句...
* }
* 会从上到下依次对条件表达式进行求值判断
* 值为true，则执行当前语句，
* 值为false，则继续向下判断，
* 都不满足则执行最后的语句，不写不执行最后的的结果
* 只会有一个代码块被执行，一个被执行则直接结束语句
* 所以要注意写法，最上面的条件成立不执行下面的，可能会造成出错
*
*
* if(a > 10)
* alert("a>10");
* alert("你管不了我"); 这个不管if的判断结果，是都会输出的
* 得加括号
* if语句后的代码块不是必须的，但开发中尽量写上
*
* var a = 11;
* if(a > 10 && a <= 20) {
* alert("a>10并且a <=20");
* }
* a = 25; 不执行
* && 两边同时满足
* || 只要一个满足
*/
/* 练习一
* 从键盘输入小明的期末成绩；
* 当成绩是100时，‘奖励一辆BMW’
* 当成绩为[80-99]时，‘奖励一台iPhone15s’
* 当成绩为[60-80]时，‘奖励一本参考书’
* 其他时，什么奖励也没有
*/
//var xiaoMingGrade = 68; 不是输入
//prompt() 可以弹出一个提示框，该提示框中会带有一个文本框，用户可以在其中输入内容，该函数需要一个字符串作为参数，该字符串将会作为提示框的提示文字!!!
//用户的输入内容将会作为函数的返回值返回，可以定义一个变量来接受该内容
var xiaoMingGrade = prompt("小明的期末成绩：");//小明成绩 score得分
if (xiaoMingGrade > 100 || xiaoMingGrade < 0 || isNaN(xiaoMingGrade)) {
alert ("拉出去毙了~~");
} else {
if (xiaoMingGrade == 100) {
console.log("奖励一辆BMW");
} else if(xiaoMingGrade<=99 && xiaoMingGrade >=80){
console.log("奖励一台iPhone15s");
} else if(xiaoMingGrade<=80 && xiaoMingGrade>=60){
console.log("奖励一本参考书");
} else {
console.log("爬!");
}
}
/* 练习二
* 大家都知道，男大当婚，女大当嫁，那么女方家长嫁女儿，当然要提出一定的条件：
* 高：180cm以上；富：1000万以上；帅：500以上
* 如果三个条件同时满足，则：“我一定要嫁给他”
* 如果三个条件有为真的情况，则：“嫁吧，比上不足，比下有余”
* 如果三个条件都不满足，则：“不嫁”
*/
var height = prompt("身高:?cm");//身高
var wealth = prompt("财富:w");//财富
var beautiful = prompt("帅气:");//帅气
if (height >= 180 && wealth >= 1000 && beautiful >=500) {
console.log("我一定要嫁给他!!");
} else if(height >= 180 || wealth >= 1000 || beautiful >=500) {
console.log("嫁吧，比上不足，比下有余!!");
} else {
console.log("不嫁!!");
}
/* 练习三
* 编写程序，由键盘输入三个整数分别存入，num1，num2，num3
* 对他们进行排序，并且从小到大输出
*/
var numBerYi = +prompt("num1:"); //number1,2,3
var numBerEr = +prompt("num2:");//+prompt转换成number类型，前面有写，忘了去面壁
var numBerSan = +prompt("num3:");
if (numBerYi < numBerEr && numBerYi < numBerSan) {
if(numBerEr < numBerSan) {
alert(numBerYi +","+numBerEr+","+numBerSan);
} else {
alert(numBerYi +","+numBerSan+","+numBerEr);
}
} else if (numBerEr < numBerYi && numBerEr < numBerSan) {
if(numBerYi < numBerSan) {
alert(numBerEr +","+numBerYi+","+numBerSan);
} else {
alert(numBerEr +","+numBerSan+","+numBerEr);
}
} else if (numBerSan < numBerYi && numBerSan < numBerEr) {
if(numBerYi < numBerEr) {
alert(numBerSan +","+numBerYi+","+numBerEr);
} else {
alert(numBerSan +","+numBerEr+","+numBerYi);
}
}
//该33了
/*
*常用DOM方法总结
getElementById() 返回带有指定ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节
点列表(集合/节点数组)。
getElementsByClassName() 返回包含带有指定类名的所有元素的节
点列表。
getElementsByName('a') 通过name属性获取一组元素节点对象
document.querySelector('#a') 通过CSS选择器来获取一个元素节点对象
document.querySelectorAll('span') 通过CSS选择器来获取一组元素节点对象
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
*createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。
当前节点.paretNode 表示当前节点的父节点
当前节点.previousSibling 表示当前节点的前一个兄弟节点
当前节点.nextSibling 表示当前节点的后一个兄弟节点
父节点.firstchild 可以获取第一个子节点(包括空白文本节点)
父节点.firstElementchild 可以获取第一个子元素(不包括空白文本节点)
父节点.childNodes 表示当前节点的所有子节点
*
*
*/
</script>
<script src="JSout.js"></script>
</head>
<body>
<!--可以将JS代码写到标签的onclick属性中-->
<button onclick="alert('讨厌，你点我干嘛~~');">点我一下</button>
<!--可以将JS代码写在href超链接中,这样当点击href时,也会执行JS代码-->
<a href="javascript:alert('让你点你就点?!')">你也点我一下试试!!</a>
<a href="javascript:;">你也点我一下试试!!</a>
</body>
</html>第一部分就这些，慢慢来吧
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
