本文介绍了JavaScript的基础作用，如动态内容修改、数据验证、用户交互和本地存储。详细讲解了JS的ECMA语法、DOM和BOM操作，以及引入方式（行内、内嵌、外链），输出方法（alert、console、document.write），变量声明、命名规则和数据类型转换。此外，还涵盖了运算符、window方法、以及部分关键概念如三元表达式和window对象的使用。
js入门（第一部分）
一、js的作用
1、动态操作标签的内容
2、动态操作标签
3、数据验证，减轻服务器的压力
4、用户通过事件与浏览器交互
5、提供了本地存储来记录一些临时信息
二、js的内容
1、ECMAJavaScript：js基础语法
2、DOM操作:Document Object Model 文档对象模型
3、BOM操作:Broswer Object Model 浏览器对象模型
三、js引入方式
1、行内式
<body>
<div></div>
<!-- 1、行内式 -->
<p onclick="alert('行内式')">你好</p>
</body>
2、内嵌
<body>
<div></div>
<!-- 禁止外链和内嵌同时写入，内嵌会被覆盖 -->
<!-- 3、内嵌式 -->
<script>
alert("内嵌式");
</script>
</body>
3、外链
<body>
<div></div>
<!-- 2、外链式 -->
<script src="./js/test.js"></script>
</body>
test.js
alert("外链式");
五、js输出方式
1、警告输出：alert(“”)
<body>
<script>
alert("弹窗警告");
</script>
</body>
2、控制台输出:console.log(“”) 不能解析标签
<body>
<script>
// 控制台输出 clog快捷键
console.log("控制台日志输出");
console.info("信息输出");
console.error("错误信息输出");
console.warn("警告");
</script>
</body>
3、文档输出：document.write(“”) 可以解析标签
<body>
<script>
// 文档输出 dw快捷键
document.write("奇酷教育");
document.write("<h1 class='active'>奇酷教育</h1>");
// js中的字符换行都要通过+拼接
// 反引号`可以不用拼接
document.write("<table border=''cellspacing = ''cellpadding = '' >" +
"<tr><th>Header</th></tr>" +
"<tr><td>Data</td></tr>" +
"</table>");
document.write(`<table border="" cellspacing="" cellpadding="">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>`);
</script>
</body>
注意:
js字符串输出可以采用双引号或反引号，双引号换行需要加号拼接
js遇到双引号嵌套的情况，需要使用外双内单
六、变量的声明赋值
<body>
<script>
//变量声明未赋值
var a;
console.log(a); //undefined,未定义
//变量未声明，报错代码会阻塞后边代码的执行
// console.log(c); //报错,c is not defined
//变量赋值
a=1;
console.log(a); //1
//变量声明并赋值,也叫变量的初始化
var b=2;
console.log(b); //2
b=6; //把原来的2覆盖掉
console.log(b); //6
b=8; //把6覆盖了
console.log(b); //8
//变量输出不能加双引号
var m=6,n=8; //同时声明了多个变量
console.log(m,n);
// var d;
// var e=16
var d,e=16;
console.log(d); //undefined
</script>
</body>
七、变量命名规则
由字母、数字、下划线、$组成
不以数字开头、不能是关键字和保留字
八、js数据类型及其转换
js数据类型
1、基本数据类型:number数值 string字符串 boolean布尔 null空 值 undefined未定义
2、 引用数据类型: Array数组 function函数 object对象
数据类型的转换
<body>
<script>
//1、其他类型转换为字符串
// 加号拼接
var a=13;
a=a+"";
console.log(a); //"13"
console.log(typeof(a)); //string
//String()
console.log(String(16)); //16
var b=String(16);
console.log(typeof(b)); //string
console.log(typeof(true+"")); //string
//2、其他类型转换为数值
var str="11.5";
// *1
console.log(str*1);
console.log(typeof(str*1)); //number
console.log(typeof("aaaa"*1)); //number
//not a number,不是一个数值
console.log("aaaa"*1); //NAN，not a number
console.log(true*1); //1
console.log(false*1); //0
//Number()
console.log(typeof(Number("123"))); //number
console.log(Number("123")); //123
console.log(typeof(Number("false"))); //number
console.log(Number("false")); //NaN
console.log(Number(false)); //0
//parseInt() 转换为整型，将小数位截掉，不是四舍侮辱
console.log(parseInt(11.99999)); //11
console.log(parseInt(true)); //NAN
console.log(parseInt("aaaa")); //NAN
console.log(parseInt("123aaa")); //123
console.log(parseInt("1a2a3")); //1
console.log(parseInt("a123")); //NaN
//parseFloat() 转换为浮点型
console.log(parseFloat("11.3333")); //11.3333
console.log(parseFloat("11.3333aaa")); //11.3333
console.log(parseFloat("11")); //11
//3、其他类型转换为布尔
//!!
console.log(!!1); //true
console.log(!!8); //true
console.log(!!0); //false
console.log(!!-3); //true
console.log(!!"aa"); //true
console.log(!!""); //false
//Boolean
console.log(Boolean("aa")); //true
</script>
总结
1、其他类型–》数值
*1
Number()
parseInt() 整型，不是四舍五入
parseFloat() 浮点型，小数
2、其他类型—》字符串
加号拼接
String()
3、其他类型—》布尔
！！
Boolean()
九、运算符
1、算术运算符:+ - * / %(取余) ++ – += -= *= /=
i++， ++i单独使用没区别，如果被使用就近原则
<script>
// 1、算术运算符:+ - * / % ++ --
var a=12;
var b=3;
var c=a-b;
console.log(c); //9
console.log(a+b); //15
//数值与字符串相加，结果是字符串
console.log(a+"6"); //126
console.log(a+"6"*1); //18
console.log(a*b); //36
console.log(a*"3"); //36
//除
console.log(a/b); //4
console.log(a/10); //1.2
//取余
console.log(a%10); //2
console.log(1%10); //1
//8421,拆分出每一位数
//8421%10=842....1
//842%10=84....2
//84%10=8....4
//8%10=0....8
//8421/10=842.1
var res=8421;
var gewei=res%10;
var shiwei=parseInt(res/10)%10;
var baiwei=parseInt(res/100)%10;
var qianwei=parseInt(res/1000)%10;
console.log(gewei,shiwei,baiwei,qianwei);
</script>
2、关系运算符：> >= < <= ==(只比较结果) === (同时比较类型和结果) !=
<body>
<script>
// 比较运算符:> >= < <= == === !=
//比较运算符的结果一定是boolean
var a=5;
var b=3;
console.log(a>b); //true
console.log(a<5); //false
console.log(a<=5); //true
console.log(3>=2); //true
console.log(6==6); //true
//等于:只比较结果，不看类型
console.log(6=="6"); //true
console.log(5>"6"); //false
//全等于:同时比较结果和类型
console.log(6===6); //true
console.log(6==="6"); //false
console.log(true==1); //true
console.log(false==0); //true
console.log(false===0); //false
console.log(undefined==null); //true
console.log(undefined===null); //false
console.log(3!=3); //false
console.log(3==3); //true
console.log(6+3>8-2); //true
var a=6;
// a=a+1;==>a++;
// a=a+6; ===>a+=6;
// a=a/6;====>a/=6;
//a=a*6
a*=6;
console.log(a); //36
</script>
3、逻辑运算符： ！ && ||
<body>
<script>
/* 逻辑运算符: &&且 ||或 !非
逻辑运算符的前后
可以是boolean值
可以是关系表达式 */
//两边都为true，结果为true，其他为false
console.log(true&&false); //false
console.log(true&&true); //true
console.log(false&&false); //false
//两边都是false，结果为false，其他都为true
console.log(true||false); //true
console.log(true||true); //true
console.log(false||false); //false
//非真既假，非假既真
console.log(!true); //false
console.log(!false); //true
// true||false
console.log(6>5||5>6); //true
// true&&true
console.log(6+8>3*2&&6/2+6<18); //true
// !true&&true||true
// false&&true ||true
// false||true
console.log(!2+3*3>8-6&&8>3+4||2==2); //true
// 运算符优先级: 比较运算符>!>&&>||>赋值运算符=
</script>
4、三目运算符: var res=关系表达式?值1：值2
<body>
<script>
//三元表达式的语法: var res=关系表达式?值1:值2
var score=prompt("请输入成绩");
var a=score>90?"ipad":"闭门思过";
console.log(a); //ipad
var b=score==100?"ipad":"闭门思过";
console.log(b); //闭门思过
</script>
</body>
十、window的常用方法
alert(“”) 弹出警告
var res=confirm（“”） 确认对话框
var ff=promt(“输入提示”，[“默认值”]) 用户输入框
<body>
<script>
//window,js的祖先
//一切变量、对象、方法的未知来源，都是来源于window
//凡window出生的都可以省略window
//方法谁点出来就是谁所产生
var j=1;
m=10;
console.log(m);
console.log(window.m); //10
window.alert("11");
//确认对话框
var flag=window.confirm("确认删除吗?");
console.log(flag);
//用户输入框，点取消结果是null
var age=window.prompt("输入提示","默认值");
console.log(age);
</script>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
