JavaScript初探一（认识JavaScript）

JavaScript 初探

JavaScript插入HTML中

内嵌的Js代码

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title> JS </title>
    <script type="text/javascript">
        // Js代码区域
    </script>
</head>
</html>

在HTML中，利用< Script >标签可以将js代码嵌入在HTML语句中，在< Script >标签中，会执行标签中的Js程序。

外嵌的Js代码

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title> JS </title>
    <!--内嵌的JS-->
    <script type="text/javascript">
        // Js代码区域
    </script>
    <!-- 外部引入的js -->
    <script type="text/javascript" src="js/index.js">
    </script>
</head>
</html>

代码 11~12 行的外部引入js是从当前文件的绝对路径下引入的；这里引入的js文件是独立以 *.js 文件存在的js文件，可以被任意的引入。

JavaScript的输出

显示方案

window.alert() //写入警告框
document.write() //写入HTML输入
innerHTML // 写入HTML元素
console.log() // 写入浏览器控制台

innerHTML

访问HTML元素，JavaScript可以使用document.getElementById(id)

id：属性定义HTML元素

innerHTML属性定义HTML内容

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title> javascript </title>
</head>
<body>
    <h1>Hello,world!</h1>
    <p id="demo"></p>

    <script>
        document.getElementById("id").innerHTML = 5+6;
    </script>

</body>
</html>

document.wriet()

出于测试目的化，使用 document.wriet()

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title> javascript </title>
</head>
<body>
    <h1>Hello,world!</h1>
    <script>
        document.write(5+6);
    </script>

</body>
</html>

window.alert()

警告框显示数据

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title> javascript </title>
</head>
<body>
    <h1>Hello,world!</h1>
    <script>
        window.alert(5+6);  
    </script>

</body>
</html>

console.log()

在浏览器中的F12控制台中可以看见 console.log()的显示数据

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title> javascript </title>
</head>
<body>
    <h1>Hello,world!</h1>
    <script>
        console.log(5+6);
    </script>

</body>
</html>

JavaScript 语句

构成

值、运算符、表达式、关键词、注释等

告诉浏览器在id=“demo”的HTML元素中输出“Hello，World！”

document.getElementById("demo").innerHTML = "Hello,World!"；

大多数Js程序都包含许多Js语句，这些语句会被按顺序的逐一被浏览器执行。

语句结束（；）

JavaScript的每一条语句，以分号作为结束标志。

ps：每一行，可以写多条js语句

JavaScript代码块

js语句可以使用花括号 {……} 组合在代码块中

代码块的作用就是定义同一时刻执行的语句。

function myFunction() { //JavaScript函数
    document.getElementById("demo").innerHTML = "Hello World.";
    document.getElementById("myDiv").innerHTML = "How are you ?";
}

JavaScript关键字

关键字	描述
break	终止循环或结束当前结构体
continue	跳出循环并从顶端（起点）开始
debugger	停止执行JavaScript，并调用调试函数
do … while	执行语句块，并在满足条件的时候重复执行代码块
for	标记需要被执行的语句块，只要条件为真（true）
function	声明函数
if … else	表姐需要被执行的语句块，根据某个满足的条件
return	退出函数
switch	标记需要被执行的语句块，根据不同的条件
try … catch	异常处理
var	声明变量

JavaScript 语法

JavaScript语法是一套规则

JavaScript 值

JavaScript语句定义两种类型的值：混合值和变量值：

混合值就是字面量

变量值就是变量

JavaScript字面量

15.90
10011

写数值有无小数点均可

字符串是文本，由双引号或单引号括起来：

"Bill Gates"
'Bill Gates'

JavaScript变量

JavaScript 使用 var关键字声明变量；

= 符号等同于变量赋值

// 本例中，x被定义为变量；x被赋值7。
var x ;
x = 7 ;

JavaScript运算符

JavaScript 算数运算符 （+ - * /）来计算值

( 7 + 8 ) * 10

JavaScript 赋值运算符 （=）向变量赋值

var x , y ;
var x = 7 ;
var y = 8 ;

JavaScript表达式

表达式是值、变量和运算符组合，计算的结果是值

JavaScript关键字

JavaScript关键字 var 告知浏览器创建一个新的变量

JavaScript标识符

标识符是名称

在Js中，标识符用于命名变量、关键字、函数、标签等

在Js中，首字符必须是字母、下划线或者美元符号

JavaScript 大小写敏感
JavaScript 数据类型

JavaScript变量可存放数值，比如 100，以及文本值，比如“Bill Gates”。

js中，文本值被称为字符串

JavaScript可处理多种数据类型（目前只关注 数值和字符串值）

字符串包围在双引号或单引号中；数值不用引号。

ps：数值放在引号内，会被认为文本字符串。

|-- 字符串之间可以用 + 符号来连接多个字符串

JavaScript 运算符

运算符	描述
+	加法
-	减法
	乘法
/	除法
%	系数
**	取幂
++	自加
--	自减
=	赋值 x = y
+=	x = x + y
-=	x = x - y
*=	x = x * y
/=	x = x / y
%=	x = x % y
==	等于
===	等值等型（数据和类型都相等）
！=	不等于
！==	不等值不等型
>	大于
<	小于
>=	大于等于
<=	小于等于
？：	三元运算符
&&	逻辑与
\|\|	逻辑或
！	逻辑非
typeof	返回变量的类型
instanceof	如果对象是实例，返回true
&	与
\|	或
~	非
^	异或
<<	零填充左位移
>>	有符号右位移
>>>	零填充右位移

JavaScript数据类型

分类：

JavaScript分：数值、字符串、数组、对象等多种数据类型。

var length = 7 ;	//数值
var lastName = "Gates";		//字符串
var cars = ["Porsche","Volvo","BMW"];		//数组
var x = {firstName:"Bill",lastName:"Gates"};		//对象

动态类型

JavaScript拥有动态类型，每次变量被赋予不同类型的数据类型，变量就会被改变数据类型。

JavaScript 布尔值

布尔值只有两个值：true 或 false

var x = true ;
var y = false ;

JavaScript 数组

Js数组用方括号书写，数组项目由逗号分隔

var cars = ["Porsche","Volvo","BMW"] ;

JavaScript 对象

Js对象用花括号书写，对象属性是 name:value 键值对，由逗号分隔。

var person = {firsName:"Bill",lastName:"Gates",age:62,eyeColor:"blue"} ;

typeof 运算符

可以使用JavaScript的 typeof 来确定JavaScript的变量类型；

typeof运算符返回变量或表达式的类型

typeof ""		//返回 String
typeof "bill"	//返回 String
typeof 110		//返回 number
var person ;
person = undefined ; // 任何的变量设置为undefined 都可以对变量进行清空，变量类型也就变成了undefined	
//ps：空值和 undefined不是一回事，空值是有类型的。

NULL

在JavaScript中，null是“nothing"。被看做不存在的事物。

但js中，NULL的数据类型是对象。

可以把NULL看做是一个js的bug

可以通过设置值是 null 清空对象。

var person = null ;  // 值是null，但是类型仍然是对象。

同样可以通过设置值是 undefined 清空对象

var person = undefined ; //值是undefined，类型是undefined

Undefined 与 Null 的区别

undefined 与 null 的值相等，但是类型是不同的。

原始数据

原始数据是一种没有额外属性和方法的单一简单数据值。
typeof 运算符可以返回以下原始类型之一：
- String（字符串）
- number（数值）
- boolan（布尔值）
- undefined

复杂数据

typeof返回以下以下复杂两个类型：
- function （函数类型）
- object
typeof 运算符把对象、数组或null返回 object

typeof 运算符不会把函数返回 object

ps：因为JavaScript中数组即是对象，所以 typeof [数组] 返回为”object“

JavaScript 函数

定义：

JavaScript 函数是被设计为执行特定任务的代码块

JavaScript 函数会在某代码调用它的时候被执行

function myFunction (p1 , p2) {
    return p1 * P2 ;    
}

函数语法：

JavaScript 函数通过 function 关键字进行定义，其后是函数名和括号。

function name(参数1，参数2，参数3) {
    JavaScript代码 ；
}

函数调用：

当事件发生的时候（用户点击）

当JavaScript代码调用时

自动（程序内调用）
函数返回：

当JavaScript到达 return 语句，函数将会停止执行。

var x = myFunction(4,5);
function myFunction(a,b){
    return a * b ;
}

运算符调用函数：

toCelsius 引用的是函数对象，而 toCelsius() 引用的是函数返回的结果。

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title> javascript </title>
</head>
<body>
    <h1>Hello,world!</h1>
    <p id="demo"></p>
    <script>
        document.getElementById("demo").innerHTML = toCelsius(88); 
    
    function toCelsius (f) {
        return (5/9) * (f-32) ;
    }
    </script>

</body>
</html>

局部变量：

JavaScript函数中声明的变量，会成为函数的局部变量！

即：只会在函数{}内生效！

function myFunction(){
    var carName = "Volvo" ;
}

JavaScript 对象

定义：

JavaScript 是被命名的的容器。
```
var car = {type:"porsche" , model:"999" , color:"white"} ;
```
对象的书名定义，以 键值对 表示。
对象属性：

对象中的 键值对 被称为属性

|-- 键 == 属性名

|-- 值 == 属性值（内容）

对象方法：

对象也可以有方法，方法是对象上的执行动作

方法—以 函数定义 被存储在属性值中。

var person = {
    firstName:"Bill",
    lastName:"Gates",
    idName:999 ,
    funllName:function() {
        return this.firstName + " " + this.lestName ;
   }
};

this 关键字：

在函数定义中，this 引用该函数的属性内容

对象定义：

创建一个JavaScript对象

var person ={
    firstName : "Bill" , 
    lastName : "Gates" ,
    age : 999 ,
    eyeColor : "Blue" 
};

访问对象属性：

访问方式一

objectName.propertyName
    对象名 . 对象属性名

访问方式二

objectName["propertyName"]

实例：

person.lastName; //访问对象中的lastName属性值

访问对象方法：

方法：

objectName.methodName(); // 方法对象名.方法名称()

PS： 所有对象的调用均可调用（结果赋值）给一个标识符使用。

数据类型声明new对象！

var x = new String () ;
var y = new Number () ; 
var z = new Boolean() ;

我们要避免出现以上的声明现象哦！

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title> javascript </title>
</head>
<body>
    <h1>Hello,world!</h1>
    <p id="demo"></p>
    <p id="demo1"></p>
    <script>
        var person = { // 对象定义
            firstName : "Bill" ,
            lastName  : "Gates" ,
            age       : 999 , 
            eyeColor  : "Blue" ,
            fullName  : function() {
                return this.firstName + " " + this.lastName ;
            }
        };

        document.getElementById("demo").innerHTML=person.lastName; //访问对象中的lastName属性值
        document.getElementById("demo1").innerHTML=person.fullName();

    </script>

</body>
</html>

posted @ 2019-06-18 18:54 Mirror王宇阳阅读(404) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Mirror王宇阳

在学习的道路上不断努力，用技术和实力证明自己存在的意义！

JavaScript初探一（认识JavaScript）

JavaScript 初探

JavaScript插入HTML中

内嵌的Js代码

外嵌的Js代码

JavaScript的输出

显示方案

innerHTML

document.wriet()

window.alert()

console.log()

JavaScript 语句

JavaScript关键字

JavaScript 语法

JavaScript 运算符

JavaScript数据类型

JavaScript 布尔值

JavaScript 数组

JavaScript 对象

typeof 运算符

NULL

原始数据

复杂数据

JavaScript 函数

JavaScript 对象

数据类型声明new对象！

公告

Mirror王宇阳

在学习的道路上不断努力，用技术和实力证明自己存在的意义！

JavaScript初探 一（认识JavaScript）

JavaScript 初探

JavaScript插入HTML中

内嵌的Js代码

外嵌的Js代码

JavaScript的输出

显示方案

innerHTML

document.wriet()

window.alert()

console.log()

JavaScript 语句

JavaScript关键字

JavaScript 语法

JavaScript 运算符

JavaScript数据类型

JavaScript 布尔值

JavaScript 数组

JavaScript 对象

typeof 运算符

NULL

原始数据

复杂数据

JavaScript 函数

JavaScript 对象

数据类型声明new对象！

公告

JavaScript初探一（认识JavaScript）