Python JavaScript1: 变量和操作元素

一、JavaScript 介绍

• 1.1、JavaScript 是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。
• 1.2、前端三大块
  • HTML：页面结构
  • CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
  • JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能
• 1.3、JavaScript嵌入页面的方式

  • 方式一：行间事件（主要用于事件）

    例如：

  • 方式二：页面script标签嵌入

    举例如下：

  • 方式三：外部引入

    举例如下：

    外部引入

二、JavaScript：变量

• 2.1、JavaScript 是一种弱类型语言，Javascript 的变量类型由它的值来决定。 定义变量需要用关键字 'var',如下

  var iNum = 100;
  var sSTr = 'IronMan';
  

  同时定义多个变量(优点是：性能更高一些),可以用 "," 隔开，共用一个 ‘var’ 关键字，入下

  var iNum = 100,var sSTr = 'IronMan',sCount='20';
  

  提示：JS 里面没有严格的缩进
  JavaScript 注释的方式如下：单行注释 与 多行注释

  一条javascript语句应该以“;”结尾

• 2.2、变量类型：5种基本数据类型 和 1种复合类型

  • 5种基本数据类型
    • <1>、number 数字类型
    • <2>、string 字符串类型
    • <3>、boolean 布尔类型 true 或 false
    • <4>、undefined undefined类型，变量声明未初始化，它的值就是undefined
    • <5>、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
  • 1种复合类型：object

• 2.3、变量、函数、属性、函数参数命名规范

  • 1、区分大小写
  • 2、第一个字符必须是 字母、下划线 _ 或者美元符号 $
  • 3、其他字符可以是字母、下划线、美元符或数字

  匈牙利命名风格：
  对象o Object 比如：oDiv
  数组a Array 比如：aItems
  字符串s String 比如：sUserName
  整数i Integer 比如：iItemCount
  布尔值b Boolean 比如：bIsComplete
  浮点数f Float 比如：fPrice
  函数fn Function 比如：fnHandler
  正则表达式re RegExp 比如：reEmailCheck

三、获取元素方法

提示：id 是给 JS 来使用的，下面我们会用id与JS结合来获取来获取一个标签对象,可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html(标签对象)对象，然后将它赋值给一个变量，

• 3.1、获取元素后操作元素的方法一：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行,比如：

  
  
  
     
     
     
  
  
     
  这是一个div
  
  
  

• 3.2、获取元素后操作元素的方法二：不使用 window.onload,直接把JS代码放到对应标签下面，如下

  
  
  
     
     
  
   
      
  这是一个div
      
  
  
  

四、操作元素属性
获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括 属性的读和写。操作属性的方法： 1、“.” 操作和2、“[ ]”操作

• 4.1、属性写法

  • 1、html 的属性和js里面属性写法一样

  • 2、“class” 属性写成 “className”

  • 3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

  • 通过 “.” 操作属性：

    
    
    
       
       
       
        
    
    
       
    这是一个div元素
       这是一个链接
    
       
    这是一个div元素
    
    
    

  • 通过 “[ ]” 操作属性：

    
    ......
    
    
    百度
    

    提示：属性用变量来代替的话需要用 [] 来操作

• 4.2、innerHTML 可以读取或者写入标签包裹的内容

  
  
  ......
  
  这是一个div元素