JavaScript入门

最新推荐文章于 2025-09-13 23:06:41 发布

转载最新推荐文章于 2025-09-13 23:06:41 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/oden/p/10133912.html

文章标签：

#python #javascript #ViewUI

JavaScript入门

1.javascript三个组成部分

ES: ECMAScript语法
DOM：document object model ;通过js代码与页面文档（body中所有可视化标签）交互
BOM：browser object model ; 通过js代码与浏览器自带功能进行交互

2.引入方式

行间式

出现在标签中的全局事件属性中

this代表该标签，可以访问全局属性，再访问具体操作对象(eg:this.style.color='red')

<!doctype html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>行间式</title>
    </head>
    <body>
        <div id='ddd' onmouseover='this.style.color="red" '
             onmouseleave='this.style.color="blue"'>
            这个是行间式引入
        </div>
    </body>
</html>
<!--鼠标悬浮，div中内容为红色;鼠标离开，div中内容为蓝色-->

内联式

1.出现在script标签中

2.可以通过标签的id(唯一标识),在js代码块中操作页面标签

3.js采用的是小驼峰命名规范,属于解释性语言(由上至下依次解释执行)

<!doctype html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>内联式</title>
    </head>
    <body>
        <div id='ddd' onmouseover='this.style.color="red" '
             onmouseleave='this.style.color="blue"'>
            这个是行间式引入
        </div>
    </body>
    <script>
      ddd.style.backgroundColor = 'pink';
    </script>
</html>
<!--给div中的文本加了一个pink的背景色-->

外联式

1.通过script标签中的src属性链接外部js文件,链接后,script标签本身内部的js代码块会

被屏蔽掉。

2.在任何位置都可以使用this对象，当this对象不指向任意一个标签时，代表的是window对

象。

<!doctype html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>内联式</title>
    </head>
    <body>
        <div id='ddd' onmouseover='this.style.color="red" '
             onmouseleave='this.style.color="blue"'>
            这个是行间式引入
        </div>
    </body>
    <script src='js/01.js'>
      ddd.style.backgroundColor = 'pink';  <!--会被屏蔽掉-->
    </script>
</html>

< js/01.js>

ddd.style.fontSize='50px';

js具体出现的位置

1.head标签底部：依赖性js库

2.body标签底部(body和html结束标签之间):功能性标签

3.变量的定义

定义变量的四种方式

语法：关键词 变量名 = 变量值

num = 10; 
//省略关键词,定义的为全局变量,在任何位置定义,在任何位置都可以访问,但是不建议使用

//(因为定义全局变量与重新赋值语法相同，容易混淆)。

var num = 20; 
// var关键词,无块级作用域,定义在块级作用域中的变量,外界也可以访问。

let num = 30;
// let关键词,有块级做哟个与,定义在块级作用域中的变量,外界无法访问;

const num = 40;
// const关键词(常量),有块级作用域,定义在块级作用域中的变量,外界无法访问,且变量的值不能再被二次修改,所以为常量。

产生块级作用域的方式

# 方式一：
{}

# 方式二：
if语句可以产生

# 方式三:
while语句

# 方式四:
for语句

# 函数可以产生局部作用域,出来定义再局部作用域中的全局变量(没有关键字的变量声明),外界可以访问,其他定义方式,外界都不可以访问。

  1.python  vs  javascript
    
    python: ①以换行来标识语句的结束；②以同缩进来标识附属关系
    
    js:①以分号(;)来标识语句的结束; ②以作用域({})来标识附属关系
    
  2.ES 5    VS      ES 6
  
    ES 5: ①var num=10;无块级作用域变量  ②num=10;全局变量
    
          ③只有函数才能产生局部变量  ④只有局部变量和全局变量,没有块级的概念
    
    ES 6: ①let num=10;局部变量      ②const NUM=10;常量
    
          ③块级作用域的范围都可以为局部作用域    ④块级作用域>=局部作用域

变量的命名规范

// 可以由哪些组成：字母,数字,下划线,$,中文(一般不考虑)

// 可以以什么开头：字母,下划线,$,中文

// 不能出现什么: 关键字    保留字

// 提倡书写规范: 小驼峰体,支持下划线链接

4.三种弹出框

// 普通弹出框

alert('hello')

// 输入框: 以字符串形式接收用户输入内容

var info = prompt('hello')

// 确认框: 根据用户旋转确认或取消,得到true | false 两个布尔结果

var res = confirm('yes or no')

5.基本数据类型

值类型

// Number

var a = 10;

// string

var a = 'aaa';

// boolean

var a = true

// undefined

var a = undefinde

引用类型

//函数：funcction

var a = function(){}

// 对象(类似字典方式来使用)

var a = {
    name:'Tom',
    age:18
}
console.log(typeof(a),a)

// null

var a = null

其他object具体体现
```
Array |   Date    |   RegExp
```

6.数据类型转换

// 1.通过类型声明转换

Number()
String()
Boolean()

// 2.方法(函数)
parseInt('10') | parseFloat('3.14') | 123..toString()

// 3.隐式转换

+'10' =>10
'' + 10 =>'10'

转载于:https://www.cnblogs.com/oden/p/10133912.html