细说Javascript

最新推荐文章于 2023-11-19 23:56:10 发布

运行成功！

最新推荐文章于 2023-11-19 23:56:10 发布

阅读量458

点赞数

分类专栏： javaweb 文章标签： javascript 前端开发语言 java html

本文链接：https://blog.youkuaiyun.com/m0_61203856/article/details/122824096

版权

javaweb 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了JavaScript的引入方式、基本语法、变量、数据类型、运算符、类型转换、流程控制语句、函数及对象。重点讨论了Array和String对象的常用方法，以及事件监听和事件绑定。JavaScript作为网页行为的控制语言，对于网页交互至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页交互

w3c标准：网页主要由三部门组成

结构：Html

表现：CSS、

行为：JavaScript

JavaScript引入方式

1.内部脚本：将JS代码定义在HTML页面中

JavaScript代码必须位于<script>与</script>标签之间

<script>
    alert("hello JS");
</script>

提示：

·在HTML文档中可以在任意地方，放置任意数量的<script>

`一般把脚本置于<body>元素的底部，可改善显示速度，因为脚本执行会拖慢显示

2.外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

·外部文件：demo.js

alert("hello JS");

·引入外部JS文件

<script src="../js/demo.js"></script>

注意：

·外部脚本不能包含<script>标签

·<script>标签不能自闭合

书写语法

注释：

·单行注释：//注释内容

·多行注释：/*注释内容*/

大括号表示代码块

if(count==3){
    alert(count);
}

输出语句

使用window.alert()写入警告框

使用document.write()写入HTML输出

使用console.log()写入浏览器控制台

变量

JavaScript中用var关键字（variable的缩写）来声明变量

·JavaScript是一门弱类型的语言，变量可以存放不同类型的值

·变量的需要遵循的规则：

1.组成字符可以是任意字母、数字、下划线(_)或美元符号($)

2.数字不能开头

3.建议使用驼峰命名

let关键字定义变量，类似var，但是所声明的变量只能在let关键字所在的代码块有效，且不允许重复声明

const关键字用来声明一个只读的常量，一旦声明，常量的值就不能改变

数据类型

number：数字

string：字符、字符串、单双引号皆可

boolean：布尔。true,false

null:对象为空

undefined：当声明的变量末初始化时，该变量的默认值为undefined

使用typeof运算符可以获取数据类型

alert(typeof age); //弹出数据类型

运算符

==：1.判断类型是否一样，如果不一样，则进行类型转换

2.再去比较其值

===：1.判断类型是否一样，如果不一样，则直接返回false

2.再去比较其值

类型转换

·其他类型转换成number：

1.string:按照字符的字面值，转为数字，如果字面值不是数字，则转为NaN,一般使用parseInt

2.boolean:true转为1，false转为0

var str="20";
alert(parseInt(str)+1);

·其他类型转为boolean:

1.number:0和NaN转为false，其他数字转为true

var flag=0;//3
if(flag){
    alert("转为true");
}else{
    alert("转为false");
}

2.string:空字符串转为false,其他字符串转为true

var flag="abc";//""
if(flag){
    alert("转为true");
}else{
    alert("转为false");
}

3.null:转为false

4.undefined：转为false

var flag=null;//undefined
if(flag){
    alert("转为true");
}else{
    alert("转为false");
}

常用

//健壮性判断
//if(str != null && str.length > 0){
if(str){
    alert("转为true");
}else{
    alert("转为false");
}

流程控制语句

<script>
//1.if
var count=3;
if(count==3){
    alert(count);
}
//2.switch
var num=3;
switch(num){
    case 1:{
        alert("星期一");
        break;
}
case 2:{
        alert("星期二");
        break;
}
//...
default: {
        alert("输入的星期有误");
        break;
}
}
//3.for
var sum=0;
for(let i=1;i<=100;i++){
    sum+=i;
}
alert(sum);
//4.while
var sum=0;
var i=1;
while(i<=100){
    sum+=i;
    i++;
}
alert(sum);
//5.do...while
var sum=0;
var i=1;
do{
sum+=i;
i++;
}
while(i<=100);
alert(sum);

</script>

函数（方法）

函数（方法）是被设计为执行特定任务的代码块

定义：JavaScript函数通过function关键词进行定义，语法为：

function functionName(参数1，参数2...){

要执行的代码

}

注意：

形式参数不需要类型。因为JavaScript是弱类型语言

返回值也不需要定义类型，可以在函数内部直接使用return返回即可

function add(a,b){

return a+b;

}

调用：函数名称（实际参数列表）；

let result=add(1,2);

例：

<script>
    function add(a,b){
        return a+b;
    }
    var result =add(1,2);
    alert(result);
</script>

定义方式二：

var functionName=function(参数列表){

要执行的代码

}

var add=function(a,b){

return a+b;

}

调用：JS中，函数调用可以传递任意个数参数

let result =add(1,2,3);

<script>
    var add=function (a,b){
        return a+b;
    }
    var result =add(1,2,3);
    alert(result);
</script>

javascript对象

Array

array对象用于定义数组

定义：

var 变量名=new Array(元素列表)；//方式一

var arr=new Array(1,2,3);

var 变量名=[元素列表];//方式二

var arr=[1,2,3];

访问

arr[索引]=值；

arr[0]=1;

注意：JS数组类似于Java集合，长度，类型都可变

<script>
var arr=[1,2,3];
arr[0]=10;
alert(arr);
</script>
//弹出10，2，3

依次弹出1，2，3(length)

<script>
var arr=[1,2,3];
for(let i=0;i<arr.length;i++){
    alert(arr[i]);
}
</script>

常用方法

<script>
    //push:添加方法
    var arr =[1,2,3];
    arr.push(10);
    alert(arr);
    //弹出1，2，3，10
</script>

<script>
    //splice：删除元素
    var arr =[1,2,3];
    arr.splice(0,1);//从0元素开始删，删一个
    alert(arr);
    //弹出2，3
</script>

String

定义

var 变量名= new String(s);//方式一

var str=new String("hello");

var 变量名=s;//方式二

var str="hello";

var str='hello';

length属性

alert(str.length);

trim();去除字符串前后两端的空白字符

alert(1+str.trim()+1);

常用方法

charAt();返回在指定位置的字符

indexOf();检索字符串

自定义对象

格式：

var 对象名称={

属性名称1：属性值1，

                        属性名称2：属性值2，

                        ...

                        函数名称：function（形参列表）{

...

}

}

<script>
var person={
    name:"zhangsan",
    age:20,
    eat:function (){
        alert("干饭·");
    }
};
alert(person.name);
alert(person.age);
person.eat();
</script>

window对象

window：浏览器窗口对象

获取：直接使用window,其中window.可以省略

window.alert("abc");

参考文档：https://www.w3school.com.cn/jsref/obj_window.asphttps://www.w3school.com.cn/jsref/obj_window.aspWindow 对象

<script type="text/javascript">
function disp_confirm()
  {
  var r=confirm("Press a button")

  if (r==true)
    {
    document.write("You pressed OK!")
    }
  else
    {
    document.write("You pressed Cancel!")
    }
  }
</script>

<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>

<body>
<form>
<input type="button" value="显示计时的消息框！" onClick = "timedMsg()">
</form>
<p>点击上面的按钮。5 秒后会显示一个消息框。</p>
</body>

</html>

location对象

<script>
document.write("3秒后跳转到首页...");
setTimeout(function(){
    location.href="https://www.baidu.com"
},3000);
</script>

获取Element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="light" src="../imgs/IMG_6154.jpg"><br>
<div class="cls">努力学习</div>
<div class="cls">linlin</div>
<input type="checkbox"name="hobby">电影
<input type="checkbox"name="hobby">游戏
<input type="checkbox"name="hobby">跳舞
<br>

<script>
   var img = document.getElementById("light");
alert(img);
</script>
</body>
</html>

事件监听

·事件：HTML事件是发生在HTML元素上的“事情”。比如：

1.按钮被点击

2.鼠标移动到元素上

3.按下键盘按键

·事件监听：JavaScript可以在事件被侦测到时执行代码

事件绑定

方式一：通过HTML标签中的事件属性进行绑定

<input type="button" onclick='on()'>

function on(){
alert("我被点了");

}

方式二：通过DOM元素属性绑定

<input type="button" id="btn">

document.getElementById("btn").onclick=function(){

alert("我被点了");

}

例：

<body>
<input type="button" value="点我" onclick="on()"><br>
<input type="button" value="再点我"id="btn">

<script>
    function on(){
        alert("我被点了");
    }
    document.getElementById("btn").onclick=function (){
        alert("我再被点了");
    }

</script>