JavaScript①

最新推荐文章于 2024-09-10 22:55:56 发布

我是个菜鸡.

最新推荐文章于 2024-09-10 22:55:56 发布

阅读量180

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_45988242/article/details/113444954

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一.嵌入JavaScript代码

1.

1、要实现的功能:
用户点击以下按钮,弹出消息框。
2、Js是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。在Js中有很多事件，其中有一个事件叫做:鼠标单击，单词:click。并且任何事件都会对应一个事件句柄叫做: onclick。【注意:事件和事件句柄的区别是:事件句柄是在事件单词前添加一个on。】，而事件句柄是以T标签的属性存在的。
3、οnclick=“js代码”,执行原理是什么?
页面打开的时候，js代码并不会执行，只是把这段Js代码注册到按钮的c1ick事件上了。等这个按钮发生click事件之后，注册在onclick后面的js代码会被浏览器自动调用。
4、怎么使用Js代码弹出消息框﹖
在Js中有一个内置的对象叫做window，全部小写，可以直接拿来使用，window代表的是浏览器对象。window对象有一个函数叫做:alert，用法是: window.alert(“消息”);这样就可以弹窗了。
5、JS中的字符串可以使用双引号,也可以使用单引号。
6、JS中的一条语句结束之后可以使用分号";"，也可以不用。

在这里插入图片描述

2.

javascript的脚本块在一个页面当中可以出现多次。没有要求。javascript的脚本块出现位置也没有要求,随意。
在这里插入图片描述

3.

<!--在需要的位置引入s脚本文件-->
<!--引入外部独立的js文件的时候，js文件中的代码会遵循自上而下的顺序依次逐行执行。--><!--
<script type="text/javascript" src="js/1.js"></script>-->
<!--同一个js文件可以被引入多次。但实际开发中这种需求很少。--><!--
<script type="text/javascript" src="js/1.js"></script>-->
<!--这种方式不行,结束的script标签必须有。--><!--
<script type="text/javascript" src="js/1.js"/>-->
<!--
<script type="text/javascript" src="js/1.js"></script>-->

在这里插入图片描述

二.变量

字节口诀 byte short int long float double boolean char 1248 4812

javascript当中的变量?
怎么声明变量?
var变量名;怎么给变量赋值?|变量名=值;
javascript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行。
var i =100;
i = false;i = “abc”;
i = new 0bject();i =3.14;
重点:javascript是一种弱类型编程语言。

在这里插入图片描述

js的局部变量与全局变量

全局变量:
在函数体之外声明的变量属于全局变量,全局变量的生命周期是:
浏览器打开时声明，浏览器关闭时销毁，尽量少用。因为全局变量会一直在浏览器的内存当中.
耗费内存空间。
能使用局部变量尽量使用局部变量。
局部变量:
在函数体当中声明的变量,包括一个函数的形参都属于局部变量，
局部变量的生命周期是:函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。局部变量生命周期较短。

当一个变量声明的时候没有使用var关键字,那么不管这个变量是在哪里声明的,都是全局变量！！！

在这里插入图片描述

三.函数

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body>
        <script >
            function gg(){
                alert("我是gg()函数");
            }
            hh=function(){
                alert("我是hh()函数");
            }
         </script>
         <input type="button" value="点我是gg()" οnclick="gg()">
         <br>
         <input type="button" value="点我是hh()" οnclick="hh()">

</body>
</html>

在这里插入图片描述
其中函数同名的话谁后声明就执行谁！没有重载！

上边这个会执行第二个函数！
一一一一一一一一一一一一一一一一一一一一一一一一一一一一一
注意：看明白这几个例子！

！！！！！！！！！！！！！！！！！！！！！！

四.数据类型

1、虽然s中的变量在声明的时候不需要指定数据类型，但是在赋值，每一个数据还是有类型的，所以这里也需要学习一下s包括哪些数据类型?
5中数据类型有:原始类型、引用类型。
原始类型:Undefined、Number、String、Boolean、Null引用类型:objec t以及object的子类
2、Es规范(ECNATcript规范)，在Es6之后，又基于以上的6种类型之外添加了一种新的类型: Symbol
3、Js中有一个运算符叫做typeof，这个运算符可以在程序的运行阶段动态的获取变量的数据类型。
typeof运算符的语法格式:
typeof 变量名
typeof运算符的运算结果是以下6个字符串之一:注意字符串都是全部小写。
“undefined”
“number”“string”“boolean”“object”“function”
4、在s当中比较字符串是否相等使用“==”'完成。没有equals。

Undefined

Undefined类型只有一个值,这个值就是undefined当一个变量没有手动赋值，系统默认赋值undefined或者也可以给一个变量手动赋值undefined。

Number

Number类型包括哪些值?
-1 01 22.3 3.14100 … NaN Infinity
整数、小数、正数、负数、不是数字、无穷大都属于Number类型。

关于NaN(表示Not a Number，不是一个数字，但属于Number类型)什么情况下结果是一个NaN呢?
运算结果本来应该是一个数字,最后算完不是一个数字的时候,结果是NaN.

Infinity(当除数为e的时候，结果为无穷大)alert(10/ 0);
思考:在s中10 / 3 =?
alert(10 / 3); 3.3333333333333335
在这里插入图片描述

boolean

在这里插入图片描述

String

在这里插入图片描述
注意String与string他们的属性和函数都是通用的

在这里插入图片描述

Object

在这里插入图片描述
扩展函数：

null NaN undefined的区别

在这里插入图片描述

== 与 = = =

两个等号等同运算符只判断值
三个等号判断值和类型

五.JS事件

js中的事件:
blur失去焦点focus获得焦点
click鼠标单击dblclick鼠标双击
keydown键盘按下keyup键盘弹起
mousedown鼠标按下mouseover鼠标经过mousemove鼠标移动mouseout鼠标离开mouseup鼠标单起
reset表单重置
submit表单提交
change下拉列表选中项改变，或文本框内容改变select文本被选定
load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生。

六.注册事件两种方式

1.

在这里插入图片描述

2.使用document

在这里插入图片描述

七.JS代码的执行顺序

<script type="text/javascript">
//页面加载的过程中,将a函数注册给了load事件
//页面加载完毕之后,load事件发生了,此时执行回调函数a
//回调函数a执行的过程中,把b函数注册给了id="btn"的click事件
//当id="btn"的节点发生click事件之后, b函数被调用并执行.window.onload = function(){
//这个回调函数叫做a
document.getElementById("btn").onclick = function()R//这个回调函数叫做b
alert( "hello js.......... ") ;
</script>
<input type="button" value="hello" id="btn"/>

load函数是当页面加载完成后执行的
因为我现在input标签是在script的后面所以它的那些属性id获取不到必须要加上一个load。

JS结点属性的设置

<script type="text/javascript">
window.onload = function(){
document.getElementById( "btn" ).onclick = function()
{
var mytext = document.getElementById( "mytext" );//一个节点对象中只要有的属性都可以”."
mytext.type = "checkbox";
	}
}</script>
<input type="text" id="mytext"/>
<input type="button" value="将文本框修改为复选框" id="btn"/>

八.捕捉键值

在登录的时候我们往往会按回车键登录所以这我们要捕捉键值
event名字随意起的，它主要是会给你传来一个事件然后看看他的keycode值为多少
ps：回车是 13 esc是 27

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body>
        <script >
           window.onload=function(){
               var k=document.getElementById("good");
               k.onkeydown=function(event){
                   if(event.keyCode===13)
                   {
                       alert("正在验证.......");
                   }
               }
           }
         </script>
        <input type="text" id="good">
</body>
</html>

九.void运算符

<a href="javascript:void(0)" onclick="window.alert('test')">
        既保留超链接样式，同时点击超链接执行js代码 且页面不跳转
        </a>

十.JS的控制语句

基本语句和java的一样
for…in
with
这个两个语句作为了解
数组命名如图：
遍历也如图：
在这里插入图片描述

我是个菜鸡.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录