JavaScript学习Day1

最新推荐文章于 2024-07-21 12:18:49 发布

OnMy22

最新推荐文章于 2024-07-21 12:18:49 发布

阅读量202

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_38654336/article/details/80153176

版权

JS 专栏收录该内容

4 篇文章

订阅专栏

一、JavaScript介绍

1.JavaScript是互联网上最流行的脚本语言

2.JavaScript脚本语言：轻量级、可插入HTML页面中

二、JavaScript实现

1. JavaScript的用法：

HTML中的脚本必须位于<script></script>标签之间

脚本可被放置在HTML页面的<body>和<head>部分中

2. JavaScript使用限制：

在HTML中，不限制脚本数量

通常会把脚本放置于<head>标签中，以不干扰页面内容

例子：打印一个hello,document.write是打印的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <script>
        document.write("hello!")
    </script>
</body>
</html>

作为外部引用：

js文件中：

document.write("hello!")

Html文件中对js文件进行引入：

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

三、JavaScript输出

1. JavaScript通常用来操作HTML

2. 文档输出：

Documen.write(<p>this is my first JavaScript</p>);

根据ID来对页面进行操作：document.getElementById

<p id="pid">Hello</p>
<script>
    document.getElementById("pid").innerHTML="jikexueyuan"
</script>

这样的情况下，就显示jikexueyuan而并非显示hello了，script用getElementById改变了内容

四、JavaScript语法与注释

1. JavaScript语句：

JavaScript语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

2. 分号：

语句之间的分割是分号

注意：分号是可选项，有时候看到不以分号隔开的。

3. JavaScript代码

按照编写顺序依次进行

4. 标识符：

JavaScript标识符必须以字母、下划线或美元符号开始

JavaScript关键字

5. JavaScript对大小写敏感

6. JavaScript会忽略到多余的空格

7. 代码换行：对换行也是敏感的

8. 保留字：

JavaScript注释

1. 单行注释://

2. 多行注释:/*...*/

五、变量和数据类型

变量代码：

<script>
    var i =10;   //var为声明，这里为变量声明
    var j =10;
    var m = i+j
    document.write(m); //输出m
</script>

页面上就输出20

JavaScript数据类型

1.字符串（string）2.数字（number）3.布尔（boolean）4.数组（array）5.对象（object）

6.空（null） 7.未定义 8.可以通过赋值为null的方式清除变量

<script>
    var string="hello";//字符串
    var i1=10;
    var flag = true;
    var arr=[1,2,3,4];
    document.write(arr[1]);
</script>

可以使用另一个方法来定义数组：

var arr= new Array("hello","jike","大家好");

六、运算符

（1）算数运算符：+、-、*、%、++、--

<body>
    <p>i=10,j=10;i+j=?</p>
    <p id="sumid"></p>
    <button οnclick="mysum()">结果</button> <!--点击时候调用mysum方法-->
    <script>
        function mysum() {
            var i = 10;
            var j = 10;
            var m = i + j;
            document.getElementById("sumid").innerHTML=m;//innerHTML的作用是：获取对象的内容或向对象插入内容；
        }
    </script>
</body>

点击button按钮之后调用mysum()方法，然后显示出m的结果

（2）赋值运算符：=、+=、-=、*=、/=、%=

（3）字符串操作

（4）比较运算符：==、===、!=、!==、>、<、>=、<=

比较运算符中：

“===”：必须满足字符类型也相同

（5）逻辑运算符：&&、||、!

（6）条件运算符：例:x<10?”(正确的值)”:”(错误的值)”

条件运算符例子代码：

<script>
        var i = 9;
        document.write(i>10?"i大于10":"i小于10");
</script>

七、js的条件语句

（1）if...else

<script>
    var i =19;
    if(i>=10){
        document.write("我就喜欢i>=10");
    }else{
        document.write("为什么i<10?");
    }
</script>

打印出write中的内容

当然也可以出现多种条件判断：

<script>
    var i =10;
    if(i>10){
        document.write("我就喜欢i>=10");
    }else if(i<10){
        document.write("为什么i<10?");
    }else{
        document.write("i到底是多少，原来是10")
    }
</script>

（2）switch

<script>
    var i=5;
    switch (i){
        case 1:
            document.write("i=1")
            break;//跳出当前
        case 2:
            document.write("i=2")
            break;
        default:        //当条件不满足任何一个case
            document.write("条件不满足case")
            break;
    }
</script>

八、for循环

迭代器

<script>
    var i =[1,2,3,4,5,6];
    for(var j=0;j<6;j++){
        document.write(i[j]+"<br/>");
    }
</script>

生成器

<script>
    var i =[1,2,3,4,5,6];
    for(j in i){
        document.write(i[j]+"<br/>");
    }
</script>

九、while循环

While循环

<script>
    var i =1;
    while(i<10){
        document.write("i="+i+"<br/>")
        i++;
    }
</script>

Do while

do {
    document.write("i="+i+"<br/>")
    i++;
}
while(i<10)

While和do while的区别：

While是先判断后执行，do while是先执行后判断

十、跳转语句

（1）break

<script>
    for(var i=0;i<10;i++){
        if(i==5){
            break;
        }
        document.write("i="+i+"<br/>")
    }
</script>

break跳出了当前的循环

（2）continue：结束本次循环，进行下一次循环

<script>
    for(var i=0;i<10;i++){
        if(i==5){
            continue;
        }
        document.write("i="+i+"<br/>")
    }
</script>

结束当前的循环，i=5不输出了；

十一、函数

1.函数：函数是由时间驱动的或者当它被调用时执行的可重复使用的代码块。

<script>
    function demo(a,b) {
        var  sum =a+b;
        return sum
    }
    var v1=demo(20,10);
    alert(v1)   //弹出一个窗口
</script>

十二、定义函数

1.定义函数：

Function 函数名(){

函数体; (代码块)

}

2.注意：

javascript对大小写十分敏感，所以这里的function必须小写。在函数调用时，也必须按照函数的相同名称来调用函数

<script>
    function demo() {
        var a=10;
        var b=10;
        var sum =a+b;
        alert(sum);
    }
    function tell() {
        var n=10;
        var m =10;
        var vl = n*m
        alert(vl)
    }
    tell()
</script>

十三、调用函数

1.函数调用：

函数在定义好之后，不能自动执行，需要进行调用

2.调用方式

（1）在<script>标签内调用

<script>
    function demo() {
        var a =10;
        var b=20;
        var sum=a+b;
        alert(sum)
    }
    demo();//调用函数
</script>

（2）在HTML文件中调用

<form>
    <input type="button" value="按钮" οnclick="demo()">
</form>

十四、带参数的函数

1.函数参数

在函数的调用中，也可以传递值，这些值被称为参数

例：demo(arg1,arg2)

2.参数的个数可以为任意多，每个参数通过”,”隔开

3.注意：

参数在传递时，其顺序必须一致

4.参数意义

通过传递参数的个数以及参数的类型不同完成不同的功能

<body>
    <script>
        function demo(name,age) {
            alert("Hello:"+name+",我的年龄是:"+age);
        }

    </script>
    <button οnclick="demo('iwen',20)">按钮</button>
</body>

十五、JavaScript的异常捕获

1.异常捕获

Try{

发生异常的代码块;

}catch(err){

错误信息处理;

}

<script>
    function demo() {
        try{
            alert(str);
        }catch(err){
            alert(err)
        }
    }
    demo()
</script>

2.Throw语句：创建一个自定义的错误

<script>
    function demo() {
        try {
            var e = document.getElementById("txt").value;
            if (e == ""){
                throw "请输入";
            }

        }catch(err){
            alert(err);
        }
    }
</script>

十六、DOM简介

（一）简介

1.DOM简介：当网页被加载时，浏览器会创建页面的文档对象模型

2.DOM操作HTML：

（1）JavaScript能够改变页面中所有的HTML元素

（2）JavaScript能够改变页面中所有HTML属性

（3）JavaScript能够改变页面中的所有CSS样式

（4）JavaScript能够对页面中的所有时间做出反应

（二）DOM操作HTML

1.改变HTML输出流90

注意：绝对不要在0文档加载完成之后使用document.write()。这会覆盖该文档

错误示范：

<body>
    <p>Hello</p>
    <button οnclick="demo()">按钮</button>
    <script>
        function demo() {
            document.write("world");
        }
    </script>
</body>

2.寻找元素:

通过id找到HTML元素

通过标签名找到HTML元素

3.改变HTML内容

使用innerHTML（替换标签id所在标签内的内容）

<body>
    <p id="pid">Hello</p>
    <button οnclick="demo()">按钮</button>
    <script>
        function demo() {
            document.getElementById("pid").innerHTML("WS");//通过ID找到HTML元素
            document.getElementsByTagName("p");//通过标签名找到HTML元素
        }
    </script>
</body>

4.改变HTML属性：

使用属性：attribute

<body>
    <a id="aid" href="http://www.baidu.com">Hello</a>
    <button οnclick="demo()">按钮</button>
    <script>
        function demo() {
            document.getElementById("aid").href="http://www.jikexueyuan.com" //改变了属性href的内容
        }
    </script>
</body>

（三）DOM操作CSS

1.通过DOM对象改变CSS

语法：document.getElementById(id).style.property=new style

<body>
    <div class="div" id="div">
        HELLO
    </div>
    <button οnclick="demo()">按钮</button>
    <script>
        function demo() {
            document.getElementById("div").style.background = "blue";//更改背景颜色
            document.getElementById("div").style.color = "red";//更改文字颜色
        }
    </script>
</body>