JS学习之初识JavaScript

最新推荐文章于 2022-08-01 12:14:08 发布

月月猴

最新推荐文章于 2022-08-01 12:14:08 发布

阅读量257

点赞数

分类专栏：学习笔记前端

本文链接：https://blog.csdn.net/qq_43380248/article/details/99474327

版权

学习笔记同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

一.初识JavaScript
1.什么是JavaScript?
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言
2.JS历史
在1995年时，由Netscape公司的Brendan Eich，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。
3.了解前端三层：
结构层：HTML
表现层：CSS
行为层： JS
4.JavaScript由哪部分组成:
ECMAScript(全称：欧洲计算机制造商协会)
DOM：（文本对象模型） document object model
BOM: （浏览器对象模型） browser object model *
5.JS与java的区别，与Jquery的关系
没关系
二.JS的放置位置
(如果用于写案例,写到body里面去)
1*.body标签里面**：可以！

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

2.head标签里面：可以！

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

3.html里面：可以！

<html>
<script>
    alert('1');
</script>
</html>

4.html外面：可以！

<html>
</html>
<script>
    alert(123)
</script>

ps:这样会默认写到body里面去

5.~~**~~CSS样式里面~~ **~~ ：不可以。

<style>

    <script>
        alert( 123 )
    </script> 
    
</style>

三.JS的样式分类
内嵌样式（调试）

<script>
    alert(1)；
</script>

内部样式（调试）

<div class="box" onclick="alert(222)"></div>

外部样式（代码可循环利用,多用于开发）

<script src='js/index.js'></script>

//index.js 文件

alert(123);

四、JS注释
单行注释 //
多行注释 /**/
五、打印
alert()

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

console.log

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

confirm

confirm( '你了解了吗！？' )  //弹出内容  -->  里面有**确定**以及**取消**的按钮;

function fn(){}
console.dir(fn) //此方法为查看属性

六、如何获取元素？

<div id='btn'>抠jiou！！！ </div>
//如何来获取元素？
alert('div');---> X X  //文本通过ID来获取到元素;

//正确做法！
document.getElementById(‘btn’);  --->  文档通过ID来获取标签节点！

/* document 文档          get 获取          Element 元素          ById  通过id  */

//弹出的样式如何？
alert(document.getElementById('btn')); 
    -->[ojbect HTMLDivElement]
        -->获取到 HTML 里面叫作div标签对象;
        
//innerHTML  获取标签里面的文本；
alert(document.getElementById('btn').innerHTML);   -->获取到HTML里面叫作div标签对象的文本;

七、常用获取元素（~）

document:文本所能看到的东西，代表着整个文档;有点类似于body;

一般标签

document.getElementById()
document.getElementsByTagName() 匹配标签名是…的集合
document.getElementsByName() 匹配name是…的集合
document.getElementsByClassName() 匹配class名称…的集合

特殊的标签

document.body
document.head
document.title

	<div id='div1' class='div'>我是第1个样式</div>
     // alert( 'div' )
        /*
            DOM操作：
                document   文档
                get  获取
                Element   元素
                ById   通过ID名

            .   的
            style 样式    
        */
        console.log( document.getElementById( 'div1' ) )
        document.getElementById( 'div1' ).style.backgroundColor = 'deeppink'

八、事件（触发事件）;

事件：谁，在什么时候发生了什么事情？

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

点击盒子的时候，弹窗！

 <style>
    #box{width:100px;height:100px;background-color: #f90;}
  </style>
<div id="box"></div>
<script>
    //文本通过获取对象(box)来触发事件--> 这里触发的事件是点击事件;
    document.getElementById('box').onclick = function(){
         // （）小括号里面写的是参数
         //   {}  花括号里面是写逻辑代码
         
          alert('你点到我啦~~');
    };
    document.getElementById('box').onmouseover = function(){
    	 // onmouseover ———– 鼠标滑入事件
         alert('JJ');
    };

</script>

2.javascript中的事件[ 鼠标事件, 键盘事件, 表单事件, 系统事件]

onclick —————— 点击（单击）事件
onmouseover ———– 鼠标滑入事件（会冒泡）
onmouseout—————鼠标离开事件（会冒泡）
onmouseenter————鼠标滑入事件（不会冒泡，区别后面讲）
onmouseleave————鼠标离开事件（不会冒泡，区别后面讲）
ondblclick ——————- 双击（单击）事件

九.改变样式的属性；

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 = '#0f0';
};

十.定义变量( 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 shuaidebuyaobuyao = 123;  --> 不行！

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

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

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

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

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

定义变量注意问题：

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

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

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

undefined 与 null 的区别
undefined ---->有定义 ,未赋值
null ------>获取不到为空**

十一、innerHTML 与innerText

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

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

在这里插入图片描述

innerText :获取标签节点的内容/获取标签节点内容的操作权限 -->不可以解析标签,可以解析文本;

var btn = document.getElementById('btn');
btn.onclck = function(){
    btn.innerText  = '<a href='javascript:;'> 我是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>

十三、解析顺序

正常写法：
<div id="box"></div>
<script>
        var oBox = document.getElementById('box');
        oBox.onclick = function(){
            console.log( '我被点击了！' );
        }
</script>
写在head里面的时候，有时候会报错。

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

<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>
执行顺序：先执行内部的script，再执行外部script，最后执行window.onload内容;

<script>
    window.onload = function(){
       console.log(123);     
    }
</script>
<div id="box"></div>


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

月月猴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习之初识JavaScript

一.初识JavaScript1.什么是JavaScript?JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言2.JS历史在1995年时，由Netscape公司的Brendan Eich，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。3.了解前端三层：结构层：HTML表现层：CSS行为层： JS4.JavaSc...
复制链接

扫一扫

专栏目录