JavaScript初识

1.JavaScript

一个页面由html css js 组成的!!!

js:相当重要!!!。如果想要学号前端,那些html,css根本没有技术含量的

但是js相当有技术含量!!!,但是咱们主要是做后端的,所以说学js学的比较少!!!可以让你们秀儿出来页面的那种。所以以后不断的学习js,我个人特别喜欢js。因为js是一门独立的语言有自己的语法格式。Js这门语言在语言排名当中没有出过前五名

JavaScript:简称js。实现网页的动态效果的

JavaSCript和java有什么关系呢?没有关系,借助了java的名气命名。就好比老婆和老婆饼

好比雷锋和雷峰塔没有任何关系的

有自己的独立的语法格式

css修饰html标签的

js也是修饰html标签的,可以标签动起来的一门语言,所以在写代码的时候还是先写html标签

1.1Js的三种引入方式

类比css有三种引入方式,这个js也有三种引入方式。因为你也是修饰html标签

1.相当于行内

2.相当于内联

3.相当于外联

1.1.1js的初始

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 第二种写法,类似css内联
         放在任意位置都可以的,并不只是放在head头标签中
         可以放在这个网页的任意一个位置
         写一个script标签,然后再script标签中写js的语法格式就可以了
         -->
        <script>
            var num = 123//int num= 123;不用指定数据类型,自动识别
            //控制台打印一些,java  System.out.println()
            //js控制台打印
            console.log(num);
            
        </script>
        <!-- 第三种写法类似以咱们css的外联   link  href
        script  src属性在当前页面引进外部的css文件
        -->
        <script src="test.js" type="text/javascript" charset="UTF-8"></script>
    </head>
    <body>
        <!-- 先看第一种写法
         button  按钮  有一个属性叫onclick
         这个onclick是当你点击这个这个按钮的时候执行这个onclick
         这个onclick属性值必须写js的代码
         alert() 是js代码。他是js封装好的一个函数
         这个函数的功能是 弹框效果!!!
         -->
        <button onclick="alert('欧皇十连抽')">点一下</button>
        
    </body>
</html>

1.1.2js输出

  • 使用 window.alert() 写入警告框

  • 使用 document.write() 写入 HTML 输出

  • 使用 console.log() 写入浏览器控制台

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
    </body>
    <script>
        // window是js封装好的一个的对象,默认就是本窗体在调用啊!!
        //window.alert("使用window调用一个叫alert函数");
        //document是就是封装好的一个对象,当前文档流对象,当成body的对象
        
        //document.write("我是一个页面");
        console.log("呵呵哒")
    </script>
</html>

2.1Js的数据类型

number 数字(包含了 咱们的整数和浮点数)

string 字符串

boolean 布尔

object 对象

array 数组



    关于js的语法格式的注意事项:
            1.如果js代码换行写的话,必须带分号,代表结束
                以后会碰到不换行的写法吗?会,很多!!!
                不换行写的时候,执行效率高!!!(js代码中一个换行也是需要执行的)
                但是可读性特别差!!!
            2.变量的命名规则和java中变量命名很一样!!!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//数字类型
		var a = 1;
		console.log(a);
		console.log(typeof a);
		var b = 3.1415926;
		console.log(b);
		console.log(typeof b);
		//字符串类型
		var c = "为吾德馨";
		console.log(c);
		console.log(typeof c);
		//字符串的拼接
		var d = "斯是陋室,";
		var e = d+c;
		console.log(e);
		//布尔类型
		var f = false;
		console.log(f);
		console.log(typeof f);
		//数组类型
		var arr = [1,2,3];
		console.log(arr[1])
		console.log(typeof arr);
		//对象类型
		var person = {name:"张三",age:"23"};
		console.log(person.name);
		console.log(person.age);
		console.log(typeof person);
			//对象数组
			var student = {class1:[{name:"李四",age:"25"},{name:"王五",age:"24"}],class2:[{name:"老赵",age:"26"},{name:"老黑",age:"28"}]}
			console.log(student.class1[1].name);//获取学生对象里 class1班级中 索引值为1的对象的名字
			console.log(student.class2[0].age);//获取学生对象里 class2班级中 索引值为0的对象的年龄
	</script>
</html>



2.2运算符和分支结构

和java十分一样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		        /* 
		         运算符:+   -  *  /  %
		         关系运算符:  >  <  >=  <=  !=  ==   ===
		         逻辑运算符:&&  ||  !
		         */
		        /* 
		         分支结构的语法结构:
		            和java一模一样!!!
		            if() {}
		            if() {} else{}
		            if () {} else if(){} else if() {} else{}
		            
		         */
		        var num = 20
		        if (num > 20) {
		            console.log("呵呵")
		        } else {
		            console.log("嘿嘿")
		        }
		        //==  判断数据是否一致
		        console.log(1 == "1")//比较的是内容,不看数据类型  true
		        console.log(1 === "1")//比较更加严格,要看数据类型的 false
		        var num1 = 3;
		        switch(num1) {
		            case 1:
		                console.log("给爸爸打电话")
		                break;
		            case 2:
		                console.log("给妈妈打电话")
		                break;
		            case 3:
		                console.log("给爷爷打电话")
		                break;
		            default:
		                console.log("给奶奶打电话")
		                break;
		        }
		    </script>
	</body>
</html>

2.3循环

循环可java一样,但是有几个东西比java用起来还方便的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a = 10;
			//while循环
			while(a-- > 0){
				//在页面显示出来
				document.write(a);
			}
			//do-while循环
			document.write("<br>");
			do{
				document.write(a);
			}while(a++ < 10);
			//for循环
			document.write("<br>");
			for(var i = 0;i < 10;i++){
				document.write(i);
			}
			document.write("<br>");
			//打印99乘法表
			for(var i = 1;i < 10;i++){
				for(var j = 1;j <= i;j++){
					document.write(j+"*"+i+"="+(j*i)+"&nbsp;&nbsp;");
				}
				document.write("<br />");
			}
			//遍历对象
			var person = {name:"张三",age:"21",sex:"ture"};
			for(var personkey in person){
				//打印出来键
				document.write(personkey+"&nbsp;");
				//通过键来打印出值
				document.write(person[personkey]+"&nbsp;&nbsp;");
			}
			document.write("<br>");
			var student = [{name:"张三",age:"25"},{name:"李四",age:"27"},{name:"王五",age:"31"},{name:"赵六",age:"65"}]
			for(var i = 0;i<student.length;i++){
				document.write(student[i].name);
				document.write(student[i].age);
			}
		</script>
	</body>
	
</html>

2.4函数(方法)

java中语法格式:public void 方法名字(){}

js中的语法格式:

function 方法名字(参数 1, 参数 2, 参数 3) {
 要执行的代码
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	</body>
	<script type="text/javascript">
		function tankang(){
			alert('呵呵哒');
		}
		function add(a,b){
			return a+b;
		}
		
		// tankang();
		//在body界面打印出来 调用add方法
		document.write(add(4,5));
		document.write("<br />");
		//匿名函数 变量名字(),相当于调用了这个匿名函数了
		var sub = function(a,b){
			return a-b;
		}
		document.write(sub(9,6));
		document.write("<br />");
		//顺便提一下闭包 js中匿名函数作为参数,这个匿名函数也可以叫做闭包
		var arr = [5,2,9,1,3];
		document.write(arr.sort(function(a,b){
			return a-b;
		}));
		 //java中匿名内部类
		        //一个方法的参数是一个接口或者抽象类,咱们直接传参传的是一个接口对象或者
		        //抽象类对象
		//js中匿名函数
		        //一个方法的参数是一个匿名函数,这个又叫闭包!!!
	</script>
</html>

2.5 DOM【重要】

咱们js要修饰html里面的标签,第一步需要找到标签。然后再对标签加一些个效果

document object model 文档对象模型,这个很吊的。

javascript可以把html每一个标签看成一个对象

找到标签,然后标签变成js中的对象

document.getElementById() ;返回的是一个对象,通过id的事属性值获得的

document.getElementsByClassName();返回的是一个数组,通过class属性值获取的

document.getElementsByTagName();返回值是一个数组,通过标签的名字获取的

document.getElementsByName();返回的是一个数组,通过name属性获取的

四个方法的目的是找到js要修饰的标签对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div2{
				font-size: "10px";
				font-family: "楷体";
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="divv1">
				六个核弹
			</div>
		</div>
		<!-- onclick单击事件,点一下会执行属性值 刚好放的是一个js的函数,函数在执行 -->
		<button type="button" onclick="divChange()">点击更改</button>
		<br>
		<span class="cla1">雷碧</span>
		<span class="cla1">康帅傅</span>
		<span class="cla1">孩菲斯</span>
		<span class="cla1">大个核桃</span>
		<button type="button" onclick="claChange()">点一下吧!</button>
		<br>
		<div id = "div2" name = "div2">
			哪吒!
		</div>
		<button type="button" onclick="nameChange()">点一下我会变大变红</button>
		<p>飞天茅台</p>
		<button type="button" onclick="tagNameChange()">点一下啊 求你了</button>
	</body>
	<script type="text/javascript">
		function divChange(){
			//通过ID获取块标签对象
			var div1 = document.getElementById("div1");
			// 想要通过js设置样式的时候
			//对像调用style 再调用css样式就行了
			//只不过 css带有-   变为了小驼峰的命名规则
			div1.style.width = '200px';
			div1.style.height = '200px';
			div1.style.border = 'solid 3px red';
			div1.style.backgroundColor = 'lightblue';
			div1.innerText="你买的盗版饮料,千万别喝!"
		}
		function claChange(){
			//返回值是一个对象数组 通过遍历赋值
			var cla1 = document.getElementsByClassName("cla1");
			for (var i = 0; i < cla1.length; i++) {
				// 想要通过js设置样式的时候
                //对像调用style 再调用css样式就行了
                //只不过 css带有-   变为了小驼峰的命名规则
				cla1[i].style.color = 'red';
				cla1[i].style.fontSize = '50px';
			}
		}
		function nameChange(){
			var name1 = document.getElementsByName("div2");
			//一定要注意先变为对象,数组是没有这些属性的
			name1[0].style.color='red';
			name1[0].style.fontSize = '60px';
		}
		function tagNameChange(){
			var tagName = document.getElementsByTagName("p");
			tagName[0].style.color = 'greenyellow';
			tagName[0].style.fontSize = '30px';
			tagName[0].innerText="真好喝";
		}
	</script>
</html>

2.6动态创建div

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body id="b1">
     <button type="button" onclick="test()">点我啊!</button>
    </body>
    <script>
     function test(){
		 var body1 = document.getElementById("b1");
		 var div1 = document.createElement("div");
		 div1.style.width = '200px';
		 div1.style.height = '200px';
		 div1.style.border = "solid black 3px";
		 div1.style.backgroundColor = 'pink';
		 div1.innerText = '我是谁';
		 b1.append(div1);
	 }
    </script>
</html>
​

每点击一次就会创建出一个div

2.7小扩展

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 300px;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<button>点一下</button>
			<button>点两下</button>
			<button>鼠标放上面</button>
		</div>
	</body>
	<script type="text/javascript">
        //要去点击button  对象.属性(事件属性) = 匿名函数
		//这个对象进行某一个操作onclick 单击事件,执行后面匿名函数 
		var div1 = document.getElementById("div1");
		var but1 = document.getElementsByTagName("button");
		but1[0].onclick = function (){
			div1.style.backgroundColor = 'red';
		}
        //ondblclick  是双击事件属性
		but1[1].ondblclick = function (){
			div1.style.backgroundColor = 'green';
		}
        //onmouseenter鼠标移入的事件
		but1[2].onmouseenter = function (){
			div1.style.backgroundColor = 'yellow';
		}
	</script>
</html>

2.8window对象

所有浏览器都支持 window 对象。它代表浏览器的窗口。

所有全局 JavaScript 对象,函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

写很多代码的时候没有写window

例如

alert() 弹框效果,全写 window.alert()

2.8.1 window下面有一个属性叫onload

onload是浏览器只要被启动,就会执行onload这个属性

onclick是鼠标点击之后就会执行

首先找到标签对象,拿标签对象调用属性或者调用方法(匿名函数)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body id="body1">
	</body>
	<script type="text/javascript">
		var b1 = document.getElementById("body1");
		//只要浏览器加载,就会执行onload方法
		window.onload = function(){
		var div1 = document.createElement("div");
		div1.style.width = '200px';
		div1.style.height = '200px'
		div1.style.backgroundColor = 'pink';
		div1.innerText = '我是粉色';
		b1.append(div1);
		}
		//其实window.onload写不写都可以 因为scrit代码在咱们的页面肯定要执行的
	</script>
</html>

2.8.2window获取电脑窗体的宽高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var w = window.innerWidth;
		var h = window.innerHeight;
		document.write("宽:"+w+","+"高:"+h);
		//如果这样写的话,ie 5,6,7不行的 不兼容的
		//所有浏览器都兼容的  ||  或,如果
		//兼容的写法,所以js台乱了,用谷歌火狐行,但是ie,360等非主流浏览器不行
		//很尴尬!!!于是一般按照下面的来写
		var w1 = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
		var h1 = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
		document.write(" 宽:"+w1+","+"高:"+h1);
	</script>
</html>


​2.8.3window提示框

弹框

确认框

输入框

自己写的太难看了,不要自己写,用比人封装好的,代码都有!!!这就是开发。

开发是效率高(复制别人的代码)而且还要好看

咱们自己写的效率低,还难看

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" id="bt1">提示框</button>
		<button type="button" id="bt2">确认框</button>
		<button type="button" id="bt3">输入框</button>
	</body>
	<script type="text/javascript">
		var bt1 = document.getElementById("bt1");
		var bt2 = document.getElementById("bt2");
		var bt3 = document.getElementById("bt3");
		bt1.onclick = function(){
			//提示框
			window.alert('你好JavaScript');
		}
		bt2.onclick = function(){
			//确认框 返回一个布尔类型数据
			var reg = window.confirm('你是单身狗吗?');
			if(reg){
				window.alert('那可就太好了!')
			}else{
				window.alert('正好我也不是');
			}
		}
		bt3.onclick = function(){
			//输入框 
			var reg = window.prompt('你有多少钱?');
			if(reg>100){
				window.alert('土豪我们做朋友吧!')
			}else{
				window.alert('你真穷,一边去')
			}
		}
	</script>
</html>

 

 

 

2.8.4window的返回前进效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		//填写你要跳转的页面
		<a href="test5.html">走你!</a>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button">返回上个页面</button>
	</body>
	<script type="text/javascript">
		var bt1 = document.getElementsByTagName("button");
		bt1[0].onclick = function(){
			//通过点击按钮返回
			window.history.back();
		}
	</script>
</html>

 

 

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宇智波波奶茶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值