01 JavaScript基础教程

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hxdeng/article/details/52228498 1. JavaScript基础1.1 JavaScript介绍 JavaScript 是互联网上最流行额脚本语言;JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hxdeng/article/details/52228498

1. JavaScript基础

1.1 JavaScript介绍

    JavaScript 是互联网上最流行额脚本语言;JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能
    在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
    为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。

1.2 JavaScript 用法

HTML中脚本必须位于<script type="text/script"></script>标签之间,脚本可被放置在body中

范例

1.3 JavaScript输出

document.write("Hell Word!");    
document.write("<h1>沁园春·雪</h1>");  
document.getElementById();

1.4 JavaScript语法

1. JavaScript语句向浏览器发出的命名。语句的作用是告诉浏览器该做什么。
2. JavaScript按照编写的顺序执行
3. 标识符   
    JavaScript的标识符必须以字母,下划线或美元符号开始。
4. JavaScript对大小写敏感
5. 空格
    空格对JavaScript没影响,他的代码结束通过行结束
6. 关键字
    ![这里写图片描述](https://img-blog.csdn.net/20160816002930699)
7. 注释
    单行注释   //   
    多行注释   /*  */

1.5 变量数据类型

1. 变量通过var声明[JS是一门弱语言,所有的变量都是通过var声明]
2. 数据类型   
    2.1 字符串(String2.2 数字(Number2.3 布尔(boolean)
    2.4 数组(Array)
    2.5 对象(Object2.6 空(null2.7 未定义
注意:可以通过赋值null来清除变量

2. JS语法详解

1. 运算符
    1.1 算数运算符
        +,-,*,/,%,++,--

    1.2 赋值运算符
        =

    1.3 拼接运算符
        +

    1.4 关系运算符
        > , < , == , != , >= , <= , ===

    注意:关系运算符返回的是一个boolean类型的值;===个等号也是比较是否相等,只有数据类型相同的时候才返回true

    1.5 逻辑运算符
        && , || , !

    1.6 条件运算符 
        ? :
2. 条件语句
    2.1 if

    2.2 if...else

    2.3 switch

3. 循环语句
    3.1 for

    3.2 while

    3.2 do...while

4. 跳转语句
    4.1 break
    4.2 continut
    4.3 return

3. JavaScript函数

    alert();函数

    1. 函数语法
        function 方法名称(参数列表){
            //代码块
        }
    注意:JavaScript对大小十分敏感,所以在这里的function必须全部小写。在函数调用的时候,也必须按照函数的相同名称来调用函数。
    2. 函数的调用
        2.1 在JavaScript中调用
        直接通过调用函数名称调用

        2.2 在HTML标签中调用
        通过HTML的事件调用
    3. 带参数的函数
        function demo(a,b){
            var sum = a + b;
            alert(sum);
        }
        注意:JS中的参数没有数据类型这一说法。调用的时候也需要按照参数的顺序赋值;
    4. 全局变量和局部变量
        在函数中申明的变量是局部变量,在函数外申明的变量就是全局变量

4. JavaScript异常处理和事件处理,事件介绍

    1. 异常处理
        try{

        }catch(err){

        }
    2. Throw语句
        可以通过Throw语句创建自定义的错误
        <form>
            <input type="text" id="txt" />
            <input type="button" onoclick="demo();" />
        </form>
        function demo(){
           try{
                var e = document.getElementById("txt").value;
                if(e == ""){
                    throw "请输入数据";
                }
           }catch(err){
                alert(err);
           }
        }
    3. 事件
事件 描述
onClick 单击事件
onMouseOver 鼠标经过事件
onMouseOut 鼠标移除事件
onChange 文本内容修改事件
onSelect 文本框选中事件
onFocus 光标聚集事件、获得焦点事件
onBlur 移开光标事件、失去焦点事件
onLoad 网页加载事件
onUnload 关闭网页事件

5. JavaScript DOM对象

1. HTML DOM 
    当网页被加载时,浏览器会创建页面的文档对象模型(DocumentObjectModel)
                            Document
                                |
                            Root ELement/html
            Elelent/head                                Element/body
            Element/title    Attribut:href<---Element/a           Element/h1
            Text-MyNewHtml                      Text:MyLink         Text/MyHeader
2. DOM操作HTML
    2.1 改变HTML输出流(document.write())
    注意:绝对不要在文档紧挨在完成之后使用document.write()。这会覆盖该文档
    2.2 寻找元素
        通过ID找到HTML元素
        通过标签名找到HTML元素
    2.3. 改变HTML内容
        使用innerHTML
3. DOM 操作CSS
    3.1 通过DOM 对象改变CSS
    语法:document.getElementById(id).style.property=new style;

    范例:document.getElementById("div1").style.color="red";
4.  添加句柄和移除句柄
    document.getElementById().addEventListener("click",function(){

    });
    document.getElementById().removeEventListener("click",方法名);
5. 带返回值的函数
    1. 返回值:有的时候需要将函数的值返回给调用他的地方;可以通过return语句实现
    注意:在使用return语句的时候,执行了return语句函数就会停止,后续的代码就不在执行,同时返回值; 

6. JavaScript内置对象


7. JavaScript DOM对象控制HTML元素


8. JavaScript 浏览器对象


9. JavaScript 瀑布流


10. JavaScript面向对象详解


11. JavaScript正则表达式


12. JavaScript面向对象

相关文章
|
11天前
|
JavaScript 前端开发 网络协议
​Node.js 教程(一) 基本概念与基本使用
​Node.js 教程(一) 基本概念与基本使用
|
11天前
|
JavaScript Android开发
AutoJs4.1.0实战教程---js文件打包发布成APK文件
AutoJs4.1.0实战教程---js文件打包发布成APK文件
196 0
AutoJs4.1.0实战教程---js文件打包发布成APK文件
|
11天前
|
JavaScript 前端开发
手把手教你学会js的原型与原型链,猴子都能看懂的教程
手把手教你学会js的原型与原型链,猴子都能看懂的教程
|
11天前
|
JavaScript 前端开发 网络安全
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
26 4
|
11天前
|
Web App开发 JavaScript 前端开发
《手把手教你》系列技巧篇(三十九)-java+ selenium自动化测试-JavaScript的调用执行-上篇(详解教程)
【5月更文挑战第3天】本文介绍了如何在Web自动化测试中使用JavaScript执行器(JavascriptExecutor)来完成Selenium API无法处理的任务。首先,需要将WebDriver转换为JavascriptExecutor对象,然后通过executeScript方法执行JavaScript代码。示例用法包括设置JS代码字符串并调用executeScript。文章提供了两个实战场景:一是当时间插件限制输入时,用JS去除元素的readonly属性;二是处理需滚动才能显示的元素,利用JS滚动页面。还给出了一个滚动到底部的代码示例,并提供了详细步骤和解释。
35 10
|
11天前
|
存储 JavaScript 前端开发
Javascript教程
Javascript教程
14 0
|
11天前
|
JavaScript 前端开发 Java
《手把手教你》系列技巧篇(四十)-java+ selenium自动化测试-JavaScript的调用执行-下篇(详解教程)
【5月更文挑战第4天】本文介绍了如何使用JavaScriptExecutor在自动化测试中实现元素高亮显示。通过创建并执行JS代码,可以改变元素的样式,例如设置背景色和边框,以突出显示被操作的元素。文中提供了一个Java示例,展示了如何在Selenium中使用此方法,并附有代码截图和运行效果展示。该技术有助于跟踪和理解测试过程中的元素交互。
18 0
|
11天前
|
JavaScript 前端开发 网络架构
JavaScript的数组教程(最详细,更新至es6新语法)
JavaScript的数组教程(最详细,更新至es6新语法)
|
11天前
|
域名解析 JavaScript 关系型数据库
使用宝塔面板安装wiki.js详细教程
使用宝塔面板安装wiki.js详细教程
|
11天前
|
前端开发 JavaScript 容器
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
52 1
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList