js(2)_什么是js2.js的标准3.js日常用途-CSDN博客

本文链接：https://blog.csdn.net/john_boom/article/details/78012438

Javascript 作用

网页特效

用户交互

表单验证

Js 就是可以用来控制结构和样式。

体验js

认识常用的三个输出语句。都属于 js 内置对象 。
提供我们直接使用的功能就是内置对象功能。

alert() 弹出警示框

完整的写法 : window.alert(“执行语句”);
Window 对象窗口一般情况是可以省略的。
alert(“123”);

console 控制台输出

一般用于测试用。

console
使用代码作用

console.log();      控制台输出  普通输出语句
console.warn();     控制台警示
console.error();    错误提示

document.write() 文档打印输出

document 文档对象它不可以省略
alert() 非常少。用户体验
console 用户看不见
document.write();直接在文档中显示。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
   window.alert("你好");
    alert("很好");
    console.log("今天是");
    console.warn("星期五");
    console.error("天气很好");
    document.write("今天下雪了");
</script>
</body>
</html>

熟悉js 用途

我们js的主要目的，控制 web标准中的前两种。
结构
样式
行为
Js 怎么来控制样式和结构呢？
首选先找人。找准对象。

我们前面学过 div一类人span 都是
类名好多个
id 是永远是唯一的。不会冲突。
getElementById("demo")
通过 id 名字为 demo的得到这个元素
因为这个div 是在文档中，文档中很多个div其中的一个。
所以我们先document
document.getElementById("demo").style.width = "200px";
文档的 id为demo的样式的宽度的值为 200px

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
   <!-- <style>
        #demo {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>-->
</head>
<body>
 <div id="demo"></div>
 <div class="test"></div>
 <script>
    document.getElementById("demo").style.width = "200px";
    document.getElementById("demo").style.height = "200px";
    document.getElementById("demo").style.backgroundColor = "red";
 </script>
</body>
</html>

变量

变量的命名规则!

1.变量命名必须以字母或是下标符号”_”或者”$”为开头。
2.变量名长度不能超过255个字符。
3.变量名中不允许使用空格。
4.不用使用脚本语言中保留的关键字及保留符号作为变量名。
5.变量名区分大小写。(javascript是区分大小写的语言)

var a = 10;
function fun()
{ a = "global"; }
console.log(a);
//输出 ？ 10
var a;
function fun()
{ a = "global"; }
fun();
console.log(a);

变量的作用域

根据变量的作用范围可以分为全局变量和局部变量
全局变量：

    1. 在最外层声明的变量。
    2. 在函数体内部，但是没有声明var 的变量也是全局变量

局部变量：

     在函数体内部的 声明的变量

小知识点：
隐式的全局变量

在函数体内部，但是没有声明var 的变量也是全局变量。
var a = 1; 
function func() { 
     a = b = 2; 
} 
func(); 
alert(a); 
alert(b);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var num = 10;
    function fn(){
        console.log(num);
        result = 20;
    }
    fn();
    console.log(result);
    var a = 1
    function func() {
        a = b = 2
    }
    func()
    alert(a)
    alert(b)
</script>
</body>
</html>

事件三要素

把等打开灯要做这样的事情。
我们用我们的手去按一下开关灯亮了。
事件源 事件 事件处理程序

事件源

一般情况下是个名词
被触发者开关按钮

事件

怎么触发的这个事情按
一般情况下这个是动词点击鼠标经过按键盘
事件名说明

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

事件处理程序

发生了什么事灯亮了
= function(){ }

总结

案例1 ：

事件三要素：
事件源： x 盒子
事件: 点击
事件处理程序：关闭这个大的banner
案例2 ：

  事件源：    关注京东的这个盒子
  事件：       鼠标滑过  经过
  事件处理程序：   下拉菜单就会显示出来

事件源.事件 = function(){ 事件处理函数 }

事件源：  按钮
事件  点击 
事件处理程序：  盒子的宽度改变  400

代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #demo {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="demo"></div>
<button id="btn">改变宽度</button>
<script>
    /*要操作先找人*/
    var demo = document.getElementById("demo");  //获得id为demo的div盒子给demo
    var btn = document.getElementById("btn"); // 获得按钮
    /*事件三要素*/
    /*事件源.事件 = fucntion(){}*/
    btn.onclick = function(){
        demo.style.width = "400px";
    }
</script>
</body>
</html>

再举一个例子：鼠标经过切换图片

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<img src="images/jd1.png" alt="" id="pic"/>
<script>
    //事件源：   被触发者  img
    var pic = document.getElementById("pic");
    pic.onmouseover = function(){
        pic.onmouseout = function(){
            pic.src = "images/jd1.png";
        }
        pic.src = "images/jd2.png";
    }
</script>
</body>
</html>

隐藏样式

display: none           
display: block ;  显示的意思 
visibility: hidden;       
visibility: visible  显示的意思
display  隐藏不占位置
visibility:hidden 隐藏占有位置   停职留心
overflow:hidden;   隐藏超出的部分。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width:100px;
            height:100px;
            background-color: pink;
            margin:100px;
        }
        .one {
            /*display: none;*/
            visibility: hidden;
        }
    </style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
</html>

入口函数

 window.onload = function(){ 
     内部放js
  }

这个函数的意思就是说，当我们页面加载完毕之后，采取执行函数体里面的js部分。
就是说等页面的结构样式节点等加载完毕。。。
所以，这句话也可以页面的顶端即可。

<script>
    window.onload = function(){
        /*要做事，先找人*/
        var pic1 = document.getElementById("pic1");
        var pic2 = document.getElementById("pic2");
        var pic3 = document.getElementById("pic3");
        pic1.onclick = function(){
            document.body.style.backgroundImage = "url(images/1.jpg)";
        }
        pic2.onclick = function(){
            document.body.style.backgroundImage = "url(images/2.jpg)";
        }
        pic3.onclick = function(){
            document.body.style.backgroundImage = "url(images/3.jpg)";
        }
    }
</script>

模态框

  <script type="text/javascript">
       window.onload = function(){
            //事件源:  登录
           var login = document.getElementById("login");
           var mask = document.getElementById("mask");
           var box = document.getElementById("box");
           login.onclick = function(){
              // 当我们点击登录，会弹出灰色的大盒子和白色的小盒子
               mask.style.display = "block";
               box.style.display = "block";
           }
          // 事件源 span x
           var close_all = document.getElementById("close_all");
           close_all.onclick = function(){
               mask.style.display = 'none';
               box.style.display = "none";
           }
       }
   </script>

padding

内边距会影响盒子大小
行内元素尽量不用上下的padding和margin
继承的宽度 padding不会挤开。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            /*padding-left: 20px;*/
        }
        .damao{
            background-color: purple;
            padding-left: 20px;
            padding-top: 20px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="damao">123</div>
</div>
</body>
</html>

Js 的书写位置

Js 的书写位置非常的自由。

也可以参照 css 的位置来分类:

行内式

<button onclick="alert('你好吗')">点击我</button>
一般情况，单双引号是一样的但是出现了包裹的情况。
我们一般采取的是 外双内单的格式。
<a href=”javascript:;”></a>
<a href=”javascript:void(0);”></a>

内嵌式

<script type=”text/javascript”> </script> 任何一个地方

外链式

<script type=”text/javascript” src=”xx.js”></script>
这对标记之间不能写任何的东西。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="my.js" type="text/javascript"></script>外链式
    <script>内嵌式
        function fun(){
            alert(1121313);
        }
    </script>
</head>
<body>
<div style="color:red;">123</div>
<button onclick="alert('你好吗')">点击我</button>行内式
<button onclick="fun();">欢迎</button>
</body>
</html>

数据类型

Js 的数据类型分为：
字符型数值型布尔型 null undefined
Js 是一个是一种弱数据类型。

var  Aa = 10;
var  aa:int = 10;

Js 的变量你给什么值，它就是什么数据类型。

字符型 (string)

String
转换为字符型:

①利用 “” (双引号)
加了引号的都是字符型。
②利用String(); 转换为字符型

布尔型 (boolean)

就两个值正确的和错误的 true 和 false
数据类型转换为布尔型：
1. 利用 !!
console.log(typeof !!num);
2. 利用 Boolean()
false、undefined 、null、0、”” 为 false
true、1、”somestring”、[Object] 为 true

数值型

var num = 10;
数值的前面带 0 表示八进制
var num = 020;
0*80+2*81 = 16
数值的前面带 0x 表示十六进制
var result = 0xb; 11
转换为数值型:
1. 利用- * / 都可以转换
2 利用Number( )

parseInt() parseFloat()

parseInt(值, 进制);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    console.log(parseInt(19.11));
    console.log(parseInt(19.99));
    console.log(parseInt("25px"));
    console.log(parseInt("px25px"));
    console.log(parseInt(110,2));
</script>
</body>
</html>

结果为：
19
19
25
NaN
6
parseInt(110,2)
表示2进制把10这个2进制转换为10进制即为6

var a="15.15abc" , b='10.15' , c='10.0abc';
alert(parseInt(a)+Number(b)+parseFloat(c));

结果为15+10.15+10.0=35.15

Null undefined

Null 空的没有值。
Undefined 未定义的应该有值，但是没有给。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var a;
    var b = null;
    console.log(a);     //undefined
    console.log(a==b);  //true
    console.log(a===b); //false
    console.log(b+10);  //10
    console.log(a+10);  //NaN
</script>
</body>
</html>