二十一、python学习之前端(四):javascript入门及进阶

版权声明：浅弋、璃鱼的原创 https://blog.csdn.net/qq_35709559/article/details/82856187

一、javaScript介绍:

1. javaScript介绍:

  javaScript是运行在浏览器的脚本语言,JS主要解决的是前端与用户交互的问题,包括适应交互与数据交互.

2. 前端的三大模块:

2.1 HTML:
  页面构成;
2.2 CSS:页面表现:
  元素大小、颜色、位置、隐藏或显示、部分动画效果；
2.3JavaScript：页面行为：
  部分动画效果、页面说用户的交互、页面功能；

3. javaScript嵌入页面的方式：

3.1 内嵌式：

<script type="text/javascript">        
    alert('ok！');
</script>

3.2 外链式:(实际开发中多用)

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

3.3 行内式:(vue中多用这种类型):

<input type="button" name="" onclick="alert('ok！');">

二、变量、数据类型及基本语法规范:

1.js的变量:

javascript是一种弱类型语言, js的变量类型由他的值来决定. 定义变量时需要使用关键字var.

 var iNum = 123;
 var sTr = 'asd';

 //同时定义多个变量可以用","隔开，公用一个‘var’关键字

 var iNum = 45,sTr='qwe',sCount='68';

2.命名规范:

2.1 js严格区分字母大小写;
2.2 标识符命名只能以数字、字母、下划线(_)和美元符($);
2.3 js习惯使用小驼峰命名;

3.变量的数据类型:

3.1 简单的数据类型:

a. number: 数字类型: 不区分整型还是小数, 全用number;
b. string:字符串类型;
c. boolean:布尔类型;
d. unfefined:变量声明未初始化,它的值就是undefined;
e. null: 代表的是复杂数据类型的不存在, 打印出来是null表示object为空;

3.2 复杂数据类型:

a. array: 数组
b. object: 对象
c. function: 函数

4.数据类型转换:

4.1 其他 ==> string:

string(其他数据类型数据)

4.2 其他 ==> number:

number(其它数据类型数据)

4.3 其他 ==> boolean:

boolean(其他数据类型数据)

5. 运算符合优先级:

5.1 算数运算符:( +、 -、 *、 /、 % )

5.2 赋值运算符:(=、 +=、 -=、 *=、 /= 、%=)

5.3 关系(比较)运算符:(==、<=、 >=、 !=)

===: 三联等是js特有的, 用来判断数据类型也相同的情况;
==  :只要数值相等就行;

5.4逻辑运算符:(与、或、非 ==> &&、 ||、 !)

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
||	or	(x==5 || y==5) 为 false
!	not	!(x==y) 为 true

三、函数:

1. js中的函数:

  js中的函数使用function关键字定义的.
语法:

function func(){
	函数体
   }

2. 参数和返回值问题:

与python不同的是,js没有不定长参数
语法:

 function func(参数列表) {
        函数体;
        return 返回值;
    }

2.1 函数’return’关键字

函数中’return’关键字的作用：
a、返回函数中的值或者对象
b、结束函数的运行

3. 变量声明提升和预解析(面试常有):

js在加载的时候, 会把变量个函数提升到script标签的做顶端。但是，变量只是提升变量名，没有提升变量值；函数是整体提升的。所以，函数可以先调用再定义，变量只能先定义后使用。

四、条件语句:

1.格式:

 if(条件1){
    语句1
 } else if(条件2){
    语句2
} else {
    语句3
}

五、获取标签元素(一):

1. 获取元素的方法:

  可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量。

<script type="text/javascript">
	// 通过标签的Id拿到标签元素,以便之后对其进行操作
    var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>

上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：

2. 解决js加载问题的两个方法(即: 常用的js声明):

2.1 将javascript放到页面最下边:

....
<div id="div1">这是一个div元素</div>
....

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
</body>

2.2 将javascript语句放到window.onload触发的函数里面:(做常用)

  将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。

<script type="text/javascript">
	// 通过事件绑定,使满足窗体加载完毕条件后执行匿名函数(function())
	// 入口函数
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>
....
<div id="div1">这是一个div元素</div>

六、操作元素属性:

获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。

1.操作元素属性:

var 变量 = 元素.属性名    读取属性
元素.属性名 = 新属性值   改写属性

2.innerHTML :

innerHTML可以读取或者写入标签包裹的内容:

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //读取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //写入
        oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';
    }
</script>
......
<div id="div1">这是一个div元素</div>

3.input中的value属性:

用的比较多,跟普通属性一样操作
可获取,可赋值

4.操作标签样式css:

4.1 js操作标签上的class属性,用的是className;
4.2 ja操作style属性:(style属性的值是一个字典 key: value)
  变量.style.style属性 = 值
  style中的中划线(-),使用小驼峰命名
  div.style.foontSize = “33px”;

4.3 js操作link标签,引入外链式的css:
  a. 获取link标签,操作他的href属性
  b. var link1 = document,getElementById(“link1”)
  c. link1.href = “css路径”

七、事件驱动及匿名函数:

1.事件驱动:

  就是向元素上边绑定一个事件,当时间被处罚的时候,后面的函数就会被调用.
常见的事件驱动:

事件名	说明
onclick	鼠标点击
ondblclick	鼠标双击
onkeyup	按下并释放键盘上的一个键时触发
onchange	文本内容或下拉菜单中的选项发生改变
onfocus	获得焦点, 表示文本框等获得鼠标光标
onblur	失去焦点, 表示文本框等失去鼠标的光标
onmouseover	鼠标悬停, 即鼠标停留在图片等的上方
onmouseout	鼠标移出, 即鼠标离开图片等所在的区域
onload	网页文档加载事件
onunload	关闭网页时
onsubmit	表单提交事件
onreset	重置表单事件

2. 事件驱动的三要素:

2.1 获取标签;

 var div1 = document.getElementById("div1");

2.2 绑定事件:

div1.onclick = function() {
        // 绑定被点击事件
}

2.3 书写匿名函数中的逻辑:

  往匿名函数中书写函数的逻辑.

3.匿名函数:

  定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数的定义直接赋值给元素的事件属性来完成事件和函数的关联，这样可以减少函数命名，并且简化代码。函数如果做公共函数，就可以写成匿名函数的形式。

<script type="text/javascript">
window.onload = function(){
    var oBtn = document.getElementById('btn1');
    /*
    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
    */
    // 直接将匿名函数赋值给绑定的事件
    oBtn.onclick = function (){
        alert('ok!');
    }
}
</script>

  最后总结一句, markdown真TMD好用…