• JavaScript


    一、js基础

    很多人都会问:为何要学习javaScript?

    1. 所有主流浏览器都支持JavaScript。

    2. 目前,全世界大部分网页都使用JavaScript。

    3. 它可以让网页呈现各种动态效果。

    4. 做为一个Web开发师,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。

    二、易学性

    1.学习环境无外不在,只要有文本编辑器,就能编写JavaScript程序。

    2.我们可以用简单命令,完成一些基本操作。

    三、从哪开始学习呢?

    学习JavaScript的起点就是处理网页,所以我们先学习基础语法和如何使用DOM进行简单操作。

    我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分。
    放在<head>部分
    最常用的方式是在页面中head部分放置<script>元素,浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分。
    放在<body>部分
    JavaScript代码在网页读取到该语句的时候就会执行。

    基本语法:

    1 每一句JavaScript代码格式: 语句;

    单行注释,在注释内容前加符号 “//”;多行注释以"/*"开始,以"*/"结束。

    3 什么是变量? 从字面上看,变量是可变的量;从编程角度讲,变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子,为了区分盒子,可以用BOX1,BOX2等名称代表不同盒子,BOX1就是盒子的名字(也就是变量的名字)。

    定义变量使用关键字var,语法如下:

    var 变量名

    变量名可以任意取名,但要遵循命名规则:

        1.变量必须使用字母、下划线(_)或者美元符($)开始。

        2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。

        3.不能使用JavaScript关键词与JavaScript保留字。

    变量要先声明再赋值,如下:

    var mychar;
    mychar="javascript";
    var mynum = 6;

    变量可以重复赋值,如下:

    var mychar;
    mychar="javascript";
    mychar="hello";

    注意:

    a. 在JS中区分大小写,如变量mychar与myChar是不一样的,表示是两个变量。

    b. 变量虽然也可以不声明,直接使用,但不规范,需要先声明,后使用。

    给变量取个名字(变量命名)

    我们为了区分盒子,可以用BOX1,BOX2等名称代表不同盒子,BOX1就是盒子的名字(也就是变量的名字)。

    我们赶快给变量取个好名字吧!变量名字可以任意取,只不过取名字要遵循一些规则:

    1.必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。如下:

    正确:           
        mysum            
        _mychar         
        $numa1          
    错误:
      6num  //开头不能用数字
      %sum //开头不能用除(_ $)外特殊符号,如(%  + /等)
      sum+num //开头中间不能使用除(_ $)外特殊符号,如(%  + /等)
    

    2.变量名区分大小写,如:A与a是两个不同变量。

    3.不允许使用JavaScript关键字和保留字做变量名。

    4 if...else语句是在指定的条件成立时执行代码,在条件不成立时执行else后的代码

    5 什么是函数?函数是完成某个特定功能的一组语句. 函数的调用。

    如何定义一个函数呢?基本语法如下:

    function 函数名()
    {
         函数代码;
    }

    说明:

    a. function定义函数的关键字。

    b. "函数名"你为函数取的名字。

    c. "函数代码"替换为完成特定功能的代码。

    输出内容(document.write)。可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。

    第一种:输出内容用“”括起,直接输出""号内的内容。

    第二种:通过变量,输出内容

    第三种:输出多项内容,内容之间用+号连接。

    第四种:输出HTML标签,并起作用,标签使用“”括起来。

    JS中如何输出空格

    在写JS代码的时候,大家可以会发现这样现象:

    document.write("   1      2                3  ");
    结果: 1 2 3

    无论在输出的内容中什么位置有多少个空格,显示的结果好像只有一个空格。

    这是因为浏览器显示机制,对手动敲入的空格,将连续多个空格显示成1个空格。

    解决方法:

    1. 使用输出html标签&nbsp;来解决

     document.write("&nbsp;&nbsp;"+"1"+"&nbsp;&nbsp;&nbsp;&nbsp;"+"23");
     结果:  1    23

    2. 使用CSS样式来解决

     document.write("<span style='white-space:pre;'>"+"  1        2    3    "+"</span>");
     结果:  1       2     3    

     在输出时添加“white-space:pre;”样式属性。这个样式表示"空白会被浏览器保留"

    7 alert消息对话框。alert(字符串或变量);  

    8 confirm 确认消息对话框。confirm(str);参数说明:str:在消息对话框中要显示的文本   返回值: Boolean值

    9 prompt提问消息对话框。prompt(str1, str2);参数说明:str1: 要显示在消息对话框中的文本,不可修改  str2:文本框中的内容,可以修改

    10 window.open与window.close

    open() 方法可以查找一个已经存在或者新建的浏览器窗口。

    语法:

    window.open([URL], [窗口名称], [参数字符串])

    参数说明:

    URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
    窗口名称:可选参数,被打开窗口的名称。
        1.该名称由字母、数字和下划线字符组成。
        2."_top"、"_blank"、"_selft"具有特殊意义的名称。
           _blank:在新窗口显示目标网页
           _self:在当前窗口显示目标网页
           _top:框架网页中在上部窗口中显示目标网页
        3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。
        4.name 不能包含有空格。
    参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。

    参数表:

    close()关闭窗口

    用法:

    window.close();   //关闭本窗口

    <窗口对象>.close();   //关闭指定的窗口

    11 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)

    将HTML代码分解为DOM节点层次图:

    HTML文档可以说由节点构成的集合,三种常见的DOM节点:

    1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。

    2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。

    3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。

    DOM,即document object Model ,文档对象模型,定义访问和处理HTML文档的标准方法,是一种方法!DOM将HTML文档呈现为带有元素、属性和文本的树形结构.

    12 通过ID获取元素  注:获取的元素是一个对象,如想对元素进行操作,我们要通过它的属性或方法。

    13 innerHTML 属性用于获取或替换 HTML 元素的内容。

    语法:

    Object.innerHTML

    注意:

    1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。

    2.注意书写,innerHTML区分大小写。

    14

    HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢?

    语法:

    Object.style.property=new style;

    注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

    基本属性表(property):

    注意:该表只是一小部分CSS样式属性,其它样式也可以通过该方法设置和修改。

    15显示和隐藏display属性。

    语法:

    Object.style.display = value

    注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

    value取值:

    16控制类名className属性。

    语法:

    object.className = classname

    作用:

    1.获取元素的class 属性

    2. 为网页内的某个元素指定一个css样式来更改该元素的外观

    17

    JavaScript能做什么?

    1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)

    2.实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)

    18 

    什么是事件

    JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

    比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果。

    主要事件表:

    19 鼠标单击事件onclick

    鼠标经过事件onmouseover

    鼠标移开事件onmouseout

    光标聚焦事件(onfocus)

    失焦事件(onblur)

    内容选中事件(onselect)

    文本框内容改变事件(onchange)

    加载事件(onload)

    卸载事件(onunload)

    20javasript内置象

    21浏览器对象

    22dom对象,控制html元素

    后面三个就不意义给出了。可以到慕课网网站学习www.imooc.com

  • 相关阅读:
    JS 缓冲运动 带运动的留言本 小案例
    ===>===>===>特色思TERSUS元件学习整理
    TERSUS无代码开发(笔记29)-分页(转载)
    TERSUS无代码开发(笔记28)-英文日期改成中文日期设置
    TERSUS无代码开发(笔记27)-按钮加图标
    TERSUS无代码开发(笔记26)-复杂表格中字体通过逻辑设置颜色
    TERSUS无代码开发(笔记25)-弹窗的样式设置
    TERSUS无代码开发(笔记24)-排序显示和高级查询
    TERSUS无代码开发(笔记23)-数据库字段设置
    TERSUS无代码开发(笔记22)-利用CSS制作一个悬浮子菜单(转载)
  • 原文地址:https://www.cnblogs.com/linxiu-0925/p/4999417.html
Copyright © 2020-2023  润新知