初识JavaScript

一、什么是javaScript
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言
二、历史
在1995年时，由Netscape公司的Brendan Eich，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。
三、前端三层：
  • 结构层 ：HTML
  • 表现层 ：CSS
  • 行为层 ： JS
四、JavaScript由哪部分组成:
  • ECMAScript(全称：欧洲计算机制造商协会):
  • DOM：（文本对象）
  • BOM: （浏览器对象）
五、JS与java的区别，与Jquery的关系
没关系

JS的放置位置

示例

<body>						<head>						<html>					<html>	
    <script>             		<script>     				<script>			</html>		
        alert(1);           		alert(1);     				alert(1);     	<script>			
    </script>             		</script>       			</script>				alert(1); 
</body>          			 </head>          			</html>					</script>

JS的样式分类

  • 内嵌样式（调试）
<script>
      alert(1)；
  </script>
  • 内部样式（调试）
<div class="box" onclick="alert(2)"></div>
  • 外部样式（代码可循环利用）
<script src='js/index.js'></script>
  //index.js 文件里面的代码
  alert(123);

JS注释

  • 单行注释 //
//你好
  • 多行注释 /**/
/*
	你好
	世界
*/

打印

alert()

alert( 'GG' )     //弹出内容，里面有内容确定;

console.log

console.log(  '我是小萌新！' ) //打印出来的内容在控制台里出来看到  -->可以查看属性;

confirm

confirm( '同学好，你long不long呀！？' )  //弹出内容  -->  里面有确定以及取消的按钮;

获取元素

<div id='btn'> 罗志祥 </div>
//获取元素
document.getElementById(‘btn’);

//innerHTML  获取标签里面的文本；
alert(document.getElementById('btn').innerHTML);   -->获取到HTML里面叫作ID名字是 btn 标签对象的文本;
常用获取元素
  • 一般标签
document.getElementById()
  document.getElementsByTagName() 匹配标签名是…的集合
  document.getElementsByName() 匹配name是…的集合
  document.getElementsByClassName() 匹配class名称…的集合

事件（触发事件）

事件：谁,做了什么,发生什么事!

我摸了小狗一下它咬了我一口。

1.JS中的事件：元素.事件属性 = 事件函数;

点击盒子的时候，弹窗！

<style>
	   #box{
	    width:100px;
	    height:100px;
	    background-color: #000;
	   }
</style>
<div id="box"></div>
<script>
	    //文本通过获取对象(box)来触发事件--> 这里触发的事件是点击事件;
	    document.getElementById('box').onclick = function(){
	          alert('早上好');
	    };
	    document.getElementById('box').onmouseover = function(){
	         alert('晚上好');
	    };
	  //方法后面加上（）;
</script>

常用事件内容

javascript中的事件

ele.onclick = 函数
div.onclick = function(){ 
	console.log( 1 ) 
}
  • 鼠标事件
onclick —————— 点击事件
 ondblclick———— 双击事件
 onmousedown————按下事件
 onmouseup——————抬起事件
 onmousemove————移动事件
 
 onmouseover————移入事件
 onmouseout—————移出事件
 
 onmouseenter———移入事件（不会冒泡）
 onmouseleave———移出事件（不会冒泡）
  • 键盘事件
onkeypress——————键盘按下抬起事件
onkeydown———————按下事件
onKeyup—————————抬起事件
  • 表单事件
onfocus————————获得焦点事件
 onblur—————————失去焦点事件
 onchange———————失去焦点并内容发生改变事件
 oninput————————内容改变事件（实时）

改变样式的属性

ele.style.attr = ‘value’; 改变元素的属性;

document.getElementById('box').onclick = function(){
   //alert('this is a box!!!');
   
   //添加内容样式 ele.innerHTML 获取元素HTML ，修改元素HTML
   document.getElementById('box').innerHTML = '朋友，小红是我的！';

   //修改样式;
   document.getElementById('box').style.color = 'red' ;
   
//复合样式的写法，使用驼峰命名法;
   document.getElementById('box').style.backgroundColor = '#fff';
   
};

定义变量( var / let / const / float / import )

//var   用于声明变量，注册变量；
var oBox =document.getElementById('box');

	document.getElementById('box').onclick = function(){
    //alert('this is a box!!!');
    oBox.innerHTML = '小红是我的，朋友！！';
    oBox.style.color = 'red' ;
    oBox.style.backgroundColor = '#0f0';
};

定义变量命名需注意：

//1.变量命名时无需过多修饰、太长;
var woweishenmolamoshuai = '没办法天注定';  --> 不行！

//2.见名知义;
var jj = 18;
alert(jj);

//3.变量命名严格区分大小写;
var Name = 1;
alert(name); --> 报错，没有被定义！

//4.不能以数字开头（尽量少用杂乱的符号：@#￥%……& ）
var 1name = 1;   alert(1name);   --> Invalid or unexpected token （不符合ECMAscript 标准 ！）

//5.尽量不要使用中文作为变量名;
var 帅锅 = '帅帅哒！'; alert(帅锅);

//不能使用关键字或保留字;// 最新版本EC8 . //保留字：当前版本可能没有特殊含义，但是以后可能会有。
var let = 'hello';    alert(let);

定义变量注意问题

//1.所有的变量要先声明再使用;
var Name;
alert(Name);  --> undefined;    
    //所有未赋值的变量名，后台都会赋值为 : var Name= undefined ;

//2.同时定义多个变量,可以用逗号隔开;
var name; var wula; var aba; var ababa; 
    -->  var name，wula, aba,ababa;  //建议使用换行 --> 让代码更清晰更简单明了。

//3.一个变量只能声明一次;
var btn ;
alert(btn);   --> undefined
btn = 123;
alert(btn);   --> 123;
可不可以直接写btn =123;   -->  //会产生变量的污染，而且这个变量是挂在了window上面去了。在严格模式下还会报错。

innerHTML 与innerText

innerHTML: 获取标签节点的内容/获取标签节点内容的操作权限 --> 不能解析标签;

var btn = document.getElementById('btn');
btn.onclck = function(){
    btn.innerHTML = '<a href=''> 我是a标签！ </a>';
}
//注意：单引号与双引号，如果说不是用行字符串的拼接的话，要区别分开;

innerText :获取标签节点的内容/获取标签节点内容的操作权限 -->可以解析标签;
var btn = document.getElementById('btn');
btn.onclck = function(){
    btn.innerText  = '<a href=''> 我是a标签！ </a>';
}

内部JS与外部JS。

//外部JS不需要写<javascript></javascipt>标签;
<script>
     var btn = document.getElementById('btn');
     btn.onclick = function(){
    	 btn.innerText = '<a href="javascript:;"> 我是a标签 </a>'
    }
</script>
//如果script标签作为引入样式路径的话：src='' ; 
//那么里面的内容不会被解析 ，需要新起一个新的srcipt标签;
<script src="1.js">
     var btn = document.getElementById('btn');
     btn.onclick = function(){
        btn.innerText = '<a href="javascript:;"> 我是a标签 </a>'
    }
</script>
<script></script> // 要新开辟这一个

解析顺序

正常写法：

<div id="box"></div>
<script>
        var oBox = document.getElementById('box');
        oBox.onclick = function(){
            console.log( '我被点击了！' );
        }
</script>

写在head里面的时候，有时候会报错。

<head>
	<script>
	        var oBox = document.getElementById('box');
	        oBox.onclick = function(){
	            console.log( '我被点击了！' );
	        }
	</script>
</head>

<div id="box"></div>

解决方法：window.onload

//1.等页面加载完之后，再执行window.onload的内容
<script>
  window.onload = function(){
      var oBox = document.getElementById('box');
      oBox.onclick = function(){
      console.log( '我被点击了！' )
      }
  }
</script>

<div id="box"></div>



defer延迟加载，只对外部样式有效
/解决方法： 延迟执行  defer  （推迟到整个内容执行完之后进行加载，次于window.onload加载;）
#box{
    width: 100px;
    height: 100px;
    background-color: deeppink;
}
 <script src='1.js' defer></script>
 <div id="box"></div>

执行顺序

  1. 先执行内部的script
  2. 再执行外部script
  3. 最后执行window.onload内容
<script>
    window.onload = function(){
       console.log(123);     
    }
</script>
<div id="box"></div>


//外部样式：
console.log(456)