• JavaScript

    1.js使用 重点!!!

    a.行内式(事件定义)
    在事件定义中直接写js
    形如:

    <input type="button" onclick="js脚本"/>

    • 1

    b.嵌入式(html页面)
    通常嵌入页面中标签中的

    标签内

    形如:

    <script>
	//js脚本
	function f(){
		//js脚本
	}
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    c.文件调用(分离 .js文件)
    js代码单独放在文件中(以.js为后缀)

    <script type="text/javascript" src="xx.js">script>

    • 1

    2.基本组成

    1)变量
    js是弱类型语言，使用var关键字声明变量
    形如:
    var i=100;

    2)数据类型
    基本类型
    number\string\boolean
    number:不区分整数和小数

    string:使用引号(单\双引号)
//从指定下标开始找第1次出现的位置(下标从0)
str.indexOf(字符,[下标])
//字符串替换
str.replace(findStr,toStr)

boolean:仅有两个值true(1)和false(0)
可以自动类型转换作为数值参与运算

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    3)类型转换
    自动类型转换
    number+boolean=number
    boolean+boolean=number
    string+number=string
    string+boolean=string

    强制类型转换(强转函数)
    toString():任何类型转成string
    parseInt(数据):强转成整数(number)
    parseFloat(数据):强转成小数(number)
    如果不能强转则返回NaN(Not a Number)
    isNaN(数据):判断是否为非数字
    true->非数字 false->数字

    4）运算符
    注意:
    java 7/2=3
    js 7/2=3.5

    注意:
    == 只比较值
    === 比较值和类型

    5）小demo
    在输入框中输入，类似123dog345dog6523dog，统计dog出现的次数，并将dog替换为*。使用该方法，str.indexOf(字符,[下标])。先找出第一次出现的下标，不等于-1为while条件，循环体中，再移到下一个下标。

    		<script>
			function f(){
				//找节点
				var ele=
				document.getElementById("i");
				//获取值
				var str=ele.value;
				//计数0
				var count=0;
				//第一次查找 -1
				var index=str.indexOf("dog");
				//循环找
				while(index!=-1){
					//自加
					count++;
					//替换
					str=str.replace("dog","*");
					//后移1位或者从下标为0
					index=str.indexOf("dog",index+1);
					
					//再找 下标后移3位
					//index=str.indexOf("dog",index+3);
				}
				//提示
				alert(count);
				//修改 
				ele.value=str;
			}
		script>
		<body>
			请输入内容:
			<input type="text" id="i"/><br/>
			<input type="button" value="统计"onclick="f();"/>
		body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    demo2，输入数字进行反置，例如输入1234,修改为4321
    关键点，每次将结果乘以10加上最后一位result = result*10+num%10，js，7/2=3.5

    	<script>
			//函数
			function f(){
				var num = 1234;
				var result = 0;
				while(num>0){
					result = result*10+num%10
					//num = parseInt(num/10);
					num = (num/10).toFixed(0)
				}
				console.log(result);
			}
	script>
	<body>
		请输入内容:
		<input type="text" id="i" value=""/><br/>
		<input type="button" value="操作" 
		onclick="f();"/>
	body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    3.内置对象

    创建、属性、方法（Number,String,Math,Date,Array,RegExp）
    1)Number对象
    创建:var age=22;

    方法:
    num.toFixed(n):将数值转换成字符串
    并通过四舍五入处理保留小数点后指定位数，如果位数不够则补0。

    2)String对象
    创建:var str1=“hello”;

    属性:length 字符串长度

    方法:
    //大小写转换
    toUpperCase()\toLowerCase()
    //从指定下标位置开始找字符串第1次
    出现的位置，没有返回-1
    indexOf(findStr,[index])
    //返回指定下标位置的字符
    charAt(index)
    //截取指定的字符串，前包后不包
    substring(start,[end])
    //将字符串拆分成数组
    split(bytStr,[howmany])
    //替换 不完全替换
    replace(findStr,toStr)

    //charAt substring ->实现完全替换
var str="abcabc";
for(var i=0;i<str.length;i++){
	//根据下标找字符
	var find=str.charAt(i);
	if(find=='b'){
		//截取前部分
		var prev=str.substring(0,i);
		//中间b->g
		find='g';
		//截取后部分
		var after=str.substring(i+1);
		//重新拼接
		str=prev+find+after;
	}
}
console.log(str);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    3)Math对象
    常用方法:
    Math.sqrt(num) 返回平方根
    .pow(a,b) 返回a的b次幂
    .random() 返回0-1随机数
    .round(num)返回x四舍五入最近的整数
    .max(x,y,z)返回最大值
    .min(x,y) 返回最小值
    .abs(num) 返回绝对值
    .floor(num)向下取整
    .ceil(num) 向上取整

    4)Date对象
    创建:
    var d1=new Date();//常用
    var d2=new Date(“2022/01/01”);

    方法:
    date.getTime();//毫秒值
    .getDate();//日期
    .getDay();//一周的第几天
    .getFullYear();//年
    .toLocaleString();//本机时间格式(字符串)

    //测试 设置日期

    var now=new Date();
console.log(now.toLocaleString());	
now.setDate(now.getDate()+2);
console.log(now.toLocaleString());

    • 1
    • 2
    • 3
    • 4

    5)Array对象
    创建:
    //js中数组类型可以不一致
    //js中数组长度可变
    var arr4=new Array();//常用

    属性:length 返回数组长度

    方法:
    arr.reverse();//反转数组
    arr.sort([函数名]);//排序
    a.默认规则:首个数字排序
    b.自定义规则:传入函数名

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>练习title>
		<style>style>
		<script>
			function f(tag){
				//找节点
				var ele=
				document.getElementById("i");
				//获取值
				var str=ele.value;
				//拆分 string->Array
				var arr=str.split(",");
				//判断 处理
				if(tag==1){
					//反转
					arr.reverse();
				}else{
					//排序（传入自定义函数名）
					arr.sort(self);
				}
				//修改文本框
				ele.value=arr.toString();
			}
			
			//自定义规则
			function self(a,b){
				//降序
				return b-a;
			}
		script>
	head>
	<body>
		请输入内容形如"1,2,3"<br/>
		<input type="text" id="i"/><br/><br/>
		<input type="button" value="反转" onclick="f(1);"/>
		<input type="button" value="排序" onclick="f(2);"/>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    6)Function对象
    js中函数就是Function对象，函数名就是指向Function
    对象的引用，可以直接使用函数名访问函数对象(函数体)，
    函数名()表示函数调用。

    常见:
    function 函数名([参数]){
    //函数体
    [return 返回值;]
    }
    ps:
    函数的返回值默认undefined，可以使用return返回具体的值

    函数的使用
    方式一:使用function关键字声明函数
    function 函数名([参数]){}

    补充:
    function f(){}
    //调用
    f(){}
    f(1){}
    f(1,2){}
    在js中没有传统意义上的重载，js中如果需要实现类似重载效果，可以使用arguments。
    arguments表示当前方法传入的所有参数组成的数组
    arguments.length 函数的参数个数
    arguments[下标] 获取指定的参数

    练习:
    方法:调用传入1个参数求平方，调用传入2个参数求和

    function cal(){
	//判断
	if(arguments.length==1){
		//平方
		console.log(arguments[0]*arguments[0]);
	}else if(arguments.length==2){
		//求和
		console.log(arguments[0]+arguments[1]);
	}
}
cal(2);//4
cal(2,3);//5

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    7）RegExp对象
    创建
    var reg=/正则/标识;//常用
    var reg=new RegExp(“正则”,“标识”);
    ps:标识
    g(global):设定当前匹配为全局匹配
    i(ignore):忽略大小写检查

    var reg=/\d/g; 
var str="abc1abc2abc3"
console.log(str.match(reg));//['1','2','3']
console.log(str.search(reg));//3
console.log(str.replace(/b/g,'g'));//"agc1agc2agc3"

    • 1
    • 2
    • 3
    • 4
    • 5

    正则表达式常用组成部分:
    []中括号表示范围
    {}大括号表示次数

    [0-9]表示0-9数字 \d
    [a-zA-Z]表示英文字母[A-z]
    {2}查找2次
    {1,2}查找1-2次
    /^a/表示以a开头
    /a / 表示以 a 结尾严格匹配 / a /表示以a结尾 严格匹配 /^a /表示以a结尾严格匹配/a/ 只能表示a
    /^ab$/ 只能表示ab

    方法:
    //判断字符串是否匹配该正则规则，符合返回true不符合返回false
    正则.test(字符串)

    //返回字符串中匹配正则的内容形成一个数组
    字符串.match(正则);
    //返回字符串中第一次匹配正则的下标
    字符串.search(正则);
    //结合正则实现完全替换
    字符串.replace(findStr,toStr);

    4.BOM（浏览器）

    window前台最大对象(浏览器窗口)
    全部js全局对象、函数及变量均自动成为window对象员。
    形如:
    alert(“hello”);
    window.alert(“hello”);

    1）location:窗口文件地址对象
    Location:
    href:当前窗口正在浏览的网页地址(重要!!!)
    reload():重新载入当前页面(刷新)
    形如:
    window.location;//Location对象
    window.location.href=“http://www.baidu.com”;

    2）定时器
    一次性定时器
    在一个设定的时间间隔之后来执行的代码，不是在函数被
    调用之后立即执行。
    //启动
    var t=window.setTimeout(函数名,时间);
    //停止
    clearTimeout(t);

    2)周期性定时器(重点!!!)
    以一定的时间间隔执行代码，循环往复的
    //启动
    var tt=setInterval(函数名,时间);//毫秒值
    //停止
    clearInterval(tt);

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>定时器title>
		<style>style>
		<script>
			//显示时间(当前时间)、启动时间、停止时间->按钮
			function show(){
				var time = new Date();
				var ele = document.getElementById("p");
				ele.innerText=time.toLocaleString();				
			}					
			var t;
			function start(){
				if(t == undefined){
					t = setInterval(show,1000);
				}			
			}
			function stop(){
				clearInterval(t);
				t=undefined;
			
			}
		script>
	head>
	<body>
		<p id="p">2022-8-1p>
		<input type="button" value="显示时间" onclick="show()">
		<input type="button" value="启动时间" onclick="start()">
		<input type="button" value="停止时间" onclick="stop()">
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
  • 相关阅读:
    集成学习进阶
    Ansible自动化运维工具（三）
    如何不替换驱动jar包解决旧版本mysql驱动引起的No columns to generate for ClassWriter问题
    利用opnet快速构建tree网络
    ConcurrentHashMap底层源码分析
    DTU是什么，什么是工业4G DTU？
    低代码 系列 —— 可视化编辑器2
    CDN加速与DDoS攻击防护：保障网站稳定与用户体验
    教育管理系统功能点
    AI时代：探索个人潜能的新视角
  • 原文地址：https://blog.csdn.net/weixin_41599636/article/details/126207124