javascript基础&实战
一、JS基础
1.js编写位置
1.在head中添加
image-20221228102322887
在body中的语句上添加 不推荐使用
image-20221228102453678
2.引入外部js文件
image-20221228102542233
3.js基本语法
image-20221228103613580
4.变量 赋值
image-20221228104332940
5.标识符
image-20221228105353246
6.数据类型
image-20221228112319990
1.String 字符串
image-20221228112403331
- Number
image-20221228114832118
image-20221228114845034
3.布尔值
image-20221228115238137
- Null 和 Undefined
image-20221228120057229
5.强制类型转换-String
image-20221228164012388
image-20221228164025226
6.强制类型转换-Number
<head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> /* 将其他的类型转换为Number 转换方式一： 使用Number()函数 - 字符串 --> 数字 1.如果是纯数字的字符串，则直接将其转换为数字 2. 如果字符串中有非数字的内容，则转换为NaN 3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0 - 布尔 --> 数字
true 转成 1
false 转成 0
- null --> 数字 0
- undefined -->数字 NaN
转换方式二：
- 这种方式专门用来对付字符串
- parseInt() 把一个字符串转换为一个整数
- parseFloat() 把一个字符串转换为一个浮点数
*/
var a = "123";
a = Number(a);
var b = " "
b = Number(b); //转换为 0
b =true;
b=Number(b); //转换为 1
b= null;
b=Number(b); //转换为 0
console.log(typeof a);
console.log(a);
console.log(typeof b);
console.log(b);
var d= "6a123px1aa2"; // 输出 6
//调用parseInt()函数将a转换为Number
/*
parseInt()可以将一个字符串中的有效的整数内容取出来
然后转换为 Number
*/
d=parseInt(d);
d= "123.432aa"; //输出 123.432
// parseFloat() 作用和parseInt()类似，不同的是它可以获得有效的小数
d=parseFloat(d);
console.log(typeof d);
console.log(d);
</script>
</head>
7.其他进制的数字
8.转化为 Boolean
10.一元运算符
12.逻辑运算符 （！ && ||）
- 非布尔值的与或运算
14.赋值运算符
15.关系运算符
16.相等运算符
image-20221229103900519
19.代码块
- if语句
练习
image-20221229114357068
image-20221229114422407
image-20221229114438181
练习2：
21.条件分支语句--switch
22.while循环
23.for循环
练习
<script type="text/javascript">
for(var i=0;i<5;i++){
for(var j=0;j<5;j++){
document.write("* ");
}
document.write("<br/>");
}
/*
* * * * *
* * * * *
* * * * *
* * * * *
* * * * * */
for(var i=1;i<=5;i++){
for(var j=0;j<i;j++){
document.write("* ");
}
document.write("<br/>");
}
/* *
* *
* * *
* * * *
* * * * * */
for(var i=5;i>=1;i--){
for(var j=0;j<i;j++){
document.write("* ");
}
document.write("<br/>");
}
/* * * * * *
* * * *
* * *
* *
* */
//打印99乘法表
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(j+"*"+i +"="+ i*j+" ");
}
document.write("<br/>");
}
</script>
23.1测试程序性能
24.break和continue
25.对象的简介 -Object
26.属性名和属性值
29.函数的简介
1.函数的参数
3.立即执行函数
30.枚举对象中的属性
34.使用工厂方法创建对象
35.构造函数
37.toString()
38.垃圾回收
3.forEach
4.slice 和splice
40.Date对象
image-20221231173838266
42.包装类
43.字符串的相关方法
44.正则表达式的简介
/*
正则表达式
- [email protected]
-邮件的规则：
1.前边可以是xxxx
2.跟着一个@
3.后边可以是xxxx
4. .com获取其他的
- 正则表达式用于定义一些字符串的规则，
计算机可以根据正则表达式，来检查一个字符串是否符合规则，
获取将字符串中符合规则的内容提取出来
*/
//创建正则表达式对象
/*
语法：
var 变量= new RegExp("正则表达式","匹配模式");
使用typeof检查正则对象，会返回object
var reg = new RegExp("asda"); 这个正则表达式可以来检查一个字符串是否含有asda
在构造函数中可以传递一个匹配模式作为第二个参数，
可以是 i 忽略大小写
g 全局匹配模式
正则表达式的方法：
test()
- 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则
如果符合则返回true，否则返回false
*/
var reg = new RegExp("asda");
//var reg = new RegExp("asda",i);
//console.log(reg); ///asda/
//console.log(typeof reg); //object
var str = "asda";
result = reg.test(str);
console.log(result);
</script>
1.正则语法
2.字符串和正则相关的方法
3.正则表达式语法
练习
<script type="text/javascript">
/*
电子邮件的正则：
hello .nihao @ abc .com.cn
任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母(2-5位) .任意字母(2-5位)
\w{3,} (\.\w+)* @ [A-z0-9]+ (\.[A-z]{2,5}){1,2}
*/
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
var email = "[email protected]";
console.log(emailReg.test(email));
</script>
45.DOM简介
image-20221231224701646
image-20221231224726124
image-20221231224739932
<body>
<button id="btn">我是一个按钮</button>
<script type="text/javascript">
/*
浏览器已经为我们提供文档结点对象这个对象是window属性
可以在页面中直接使用，文档结点代表的是整个页面
*/
//console.log(document);
//获取到button对象
var btn = document.getElementById("btn");
//修改按钮的文字
btn.innerHTML = "I am a button"
</script>
46.事件的简介
<body> <!-- 我们可以在事件对应的属性中设置一些js代码， 这样当事件被触发时，这些代码将会执行 这种写法我们称为结构和行为耦合，不方便维护，不推荐使用 --> <!-- <button id= "btn" onclick="alert('点我干嘛！');">我是一个按钮</button> --> <button id="btn">我是一个按钮</button> <script type="text/javascript"> /* 事件，就是用户和浏览器之间的交互行为， 比如 ： 点击按钮，鼠标移动，关闭窗口。。。 */ //获取按钮对象 var btn = document.getElementById("btn"); /* 可以为按钮的对应时间绑定处理函数的形式来响应事件 这样当事件被触发时，其对应的函数将会被调用 */ //绑定一个单击事件
//像这种为单击事件绑定的函数，我们称为单击响应函数
btn.onmousemove = function(){
alert("你还点击我~~~");
};
</script>
</body>
47.文档的加载
我是一段文字
image-20230101231125199
56.滚轮的事件