前段--JavaScript

前段基础--javascript

JS(javaScript):


基本语法(ECMA)

对象

DOM--- document object model (*****)
BOM--- browser object model

======================================


JS的基本语法

1、变量

2、运算符

3、数据类型

4、流程控制语句(if else while for)

if 表达式:
语句体
else:
语句体


JS:
if (表达式){
语句体
}
else
{
语句体
}

5、函数

6、对象


python

实例化对象=类名()
JS

实例化对象= new 类名()





BOM--- browser object model: js操作浏览器的行为

// 定时器

(1) setInterval
(2) setTimeout


DOM--- document object model (*****)


DOM功能: 定义了访问(查找)和操作HTML文档的标准方法


DOM树的目的在于标签导航


html的每一个标签都是一个节点对象(Node)

节点主要有两个:document element


一 查找


// 直接定位
var ele=document.getElementById("d1"); // 标签对象
var ele_class=document.getElementsByClassName("c1"); // 数组对象 [ele,ele,....]
var ele_p=document.getElementsByTagName("p");



// 导航查找

previous: 上一个
next: 下一个
sibling: 兄弟姐妹


parentElement // 父节点标签元素

children // 所有子标签

firstElementChild // 第一个子标签元素

lastElementChild // 最后一个子标签元素

nextElementtSibling // 下一个兄弟标签元素

previousElementSibling // 上一个兄弟标签元素



二 操作HTML文档

1、属性操作

(1) 文本操作:

ele.innerText
ele.innerText="Egon";

ele.innerHTML;
ele.innerHTML="<a href=''>click</a>";


(2)属性操作
// 取属性值
// console.log(ele.getAttribute("id"));
// console.log(ele.id);

// 属性赋值:
//ele.setAttribute("id","d2")
//ele.id="d2";

// class属性

console.log(ele.className);
ele.classList.add("hide");
ele.classList.remove("hide");
一个完整的js代码由三部分组成
一、ECMAScript
二、DOM
三、BOM

ECMAscript描述了以下内容:
语法
类型
语句
关键字
保留字
运算符
对象(封装、继承、多态)基于对象的语言使用对象

二、javascript基础
js的引入方式
1直接编写
<script>
alert('hello yuan')
</script>
2 导入文件
<script src='hello.js'></script>
2 js的变量、常量和标识符
1 js的变量
在js中声明变量时不用声明变量类型,全部使用var关键字;
var a;<br> a=3;
一行可以声明多个变量,并且可以是不同类型
var name='de',age=20,job='ceo'
声明变量时,可以不用var,如果不用var,那么他是全局变量
变量命名,首字母只能是字母,下划线,$符号,三选一,余下的字符可以是下划线、美元符号或任意字母或者数字字符且区分大小写,x于X是两个变量

####命名规范####

Camel 标记法
首字母是小写的,接下来的字母都以大写字符开头。例如:
var myTestValue = 0, mySecondValue = "hi";
Pascal 标记法
首字母是大写的,接下来的字母都以大写字符开头。例如:
Var MyTestValue = 0, MySecondValue = "hi";
匈牙利类型标记法
在以 Pascal 标记法命名的变量前附加一个小写字母(或小写字母序列),说明该变量的类型。例如,i 表示整数,s 表示字符串,如下所示“
Var iMyTestValue = 0, sMySecondValue = "hi";
2 常量和标识符
常量:直接出现在程序中的数据值
标识符
由不以数字开头的字母、数字、下划线、$组成
常用于表示函数、变脸等的名称
例如:_abc,$abc,abc123是标识符,而1abc不是
javaScript语言中代表特定含义的词称为保留字,不允许程序在定义为标识符
3 js的数据类型
基本数据类型
number--数值
boolean--布尔值
string--字符串
undefined--undefined
null--null
(1)数字类型
var num=10; //表示整数10;
var num1=10.1; //表示的是浮点数10.1
var num=.1; //表示的是0.1
var num=10.0; //表示整数10
var num=10.; // 表示10
var num=3.124e7 //表示3140000,科学计数法
不区分整形数值和浮点型数值;
所有数字都采用64位浮点格式存储,相当于java和c语言中的double格式
能表示的最大值是±5x10-324
整数:
在js中10进制的整数有素质的序列组成
(2)字符串类型
是由unicode字符、数字、标点符号组成的序列;字符串常量收尾由单引号或双引号扩起;js中没有字符类型;常用特殊字符在字符串中的表达;字符串中部分特殊字符必须加上右划线;常用的转义字符
3 布尔类型(boolean)

Boolean类型仅有两个值:true和false,也代表1和0,实际运算中true=1,false=0
布尔值也可以看作on/off、yes/no、1/0对应true/false
Boolean值主要用于JavaScript的控制语句
4 Null & Undefined类型

Undefined类型

Undefined 类型只有一个值,即 undefined。当声明的变量未初始化时,该变量的默认值是 undefined。

当函数无明确返回值时,返回的也是值 "undefined";

Null类型

另一种只有一个值的类型是 Null,它只有一个专用值 null,即它的字面量。值 undefined 实际上是从值 null 派生来的,因此 ECMAScript 把它们定义为相等的。

尽管这两个值相等,但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值,null 则用于表示尚未存在的对象(在讨论 typeof 运算符时,简单地介绍过这一点)。如果函数或方法要返回的是对象,那么找不到该对象时,返回的通常是 null。
2.4运算符
算术运算符:
+ - * / % ++ --

比较运算符:
> >= < <= != == === !==

逻辑运算符:
&& || !

赋值运算符:
= += -= *= /=

字符串运算符:
+ 连接,两边操作数有一个或两个是字符串就做连接运算

2.4.1 算术运算符

注意1: 自加自减

假如x=2,那么x++表达式执行后的值为3,x--表达式执行后的值为1;i++相当于i=i+1,i--相当于i=i-1;
递增和递减运算符可以放在变量前也可以放在变量后:--i
var i=10;
console.log(i++);
console.log(i);
console.log(++i);
console.log(i);
console.log(i--);
console.log(--i);

注意2: 单元运算符
- 除了可以表示减号还可以表示负号 例如:x=-y

+ 除了可以表示加法运算还可以用于字符串的连接 例如:"abc"+"def"="abcdef"
j s不同于python,是一门弱类型语言
2.5 流程控制
顺序结构(从上向下顺序执行)
分支结构
循环结构
①顺序结构
<script>
console.log('星期一');
console.log('星期二');
console.log('星期三');
</script>
②分支结构
if-else结构:
if (表达式){
语句一;
......
} else{
语句二;
......
}
功能说明:如果表达式的值为true,则执行语句1,否则执行语句2
if-elif-else结构;
if (表达式1){
语句1;
}else if (表达式2){
语句2;
}else if (表达式3){
语句3;
} else{
语句4;
}
switch-case结构
switch基本格式
switch (表达式) {
case 值1:语句1;break;
case 值2:语句1;break;
case 值3:语句1;break;
default:语句4;

switch比else if结构更加简洁清晰,使程序可读性更强效率更高。

原文地址:https://www.cnblogs.com/DE_LIU/p/7598724.html