2018-09-22JS基础
2018-09-23 本文已影响0人
naruto711
一、认识js
1.什么是js
- js是JavaScript的缩写，是一门专门用来控制网页内容的行为的脚本语言
- js是web标准中的行为标准版
2.在哪儿写js代码
- a.写在标签内容中(写在标签的行为相关的属性中,比如按钮的onclicked)
- b.写在script标签中，(script标签可以放在html中的任何位置，但是一般情况还是放在head或者body中)
- c.写在外部的js文件中，通过script标签来倒入，通过设置src属性为js文件的路径
3.js能做什么事情
- a.可以在网页中插入html代码
- b.可以修改标签的内容
- c.可以修改标签的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--内部js-->
<script type="text/javascript">
//这里也可以写js
window.alert('你好，李涵')
</script>
<!--外部js-->
<script type="text/javascript" src="js/index.js">
</script>
</head>
<body>
<script type="text/javascript">
document.write('<p>中秋节快乐</p>')
</script>
<button onclick="window.alert('你好,python')" >点我</button>
<input type="text" onfocus="window.alert('你好,javascript')" />
</body>
</html>
二、js基础语法
1.注释
- 单行注释加//
- 多行注释加/*
2.标识符
- 要求是由数字、字母、下划线、和$符组成，数字不能开头
3.js中大小写敏感
4.基本数字类型
- a.Number(数字-包含所有的数字)、Bollean(布尔类型)、String(字符串)、Array(数组)、object(对象....)
- b.常用的特殊的值：NaN(表示不存在的数字)，null(空，一般用来清空变量中的内容),undefined(变量没有赋值的时候，默认是undefined)
注意：js中没有元祖和集合
5.字面量
-
Number字面量：所有的数字（支持科学计数法，不支持复数）
-
Boolean字母量：只有true和false
-
String字面量：用单引号或者双引号引起来的字符集，支持转义字符（和python相同）
-
Array字面量：js中数组相当于python的列表
-
Object对象字面量：相当于python中字典+对象（key相当于属性，value相当于属性的值）
-
typeof：查看数据类型
6.js中的语句
- a.一条语句结束后可以写分号，也可以不写，如果一行写多条语句就必须写分号
- b.js中没有缩进语法的要求，需要使用代码块的时候使用{}
三、js中的变量
1.js中变量的声明
- 语法：var 变量名 或者 var 变量名 = 初值
- a.var:是js中声明变量的关键字
- b.变量名：标识符，不能是js中的关键字；驼峰式命名(第一个单词首字母小写，后面每个单词首字母大写)见名知义
- c.初值：声明的时候可以赋初值，也可以不赋
注意：变量名一定先声明在使用
四、js中的运算符
js中的运算符包含：数学运算符、比较运算符、逻辑运算符、赋值运算符、三目运算符、(位运算)
1.数学运算符：+、-、、/、%、*(js7中才有)、++、--
- 其中：+、-、/、、%、*和python相同
- 注意：js中整除对应的运算符
a.++：自加一
语法：变量++，++变量(让变量的值加1)
b.--:自减1
语法：变量--，--变量(让变量的值减1)
c.赋值的时候，++/--写在变量的后面，是先赋值，然后再让变量的值加1/减1
++/--写在变量的前面，就先加1/减1然后在赋值
2.比较运算符：>,<,==,!=,>=,<=,===,!==,>==,<==
- 结果都是布尔值
- 相等(==)：只判断值是否相等
- 完全相等(===)：判断值和类型是否相等
3.逻辑运算符：&&(与)、||(或)、!(非)
- 逻辑运算符除了形式不同，其他都和python一样
4.赋值运算符：=、+=、-=、*=、/=、%- 等和python一样
5.三目运算符：?：
语法：表达式1?值1:值2 ---> 判断表达式1的值是否为真，为真整个运算的结果就是值1，否则就是值2
6.运算顺序：和python基本一致(数学>比较>逻辑>三目>赋值)，也可以通过加括号来改变运算顺序
五、js中的分支结构
js中的分之结构：if语句，switch语句
1.if语句
a.结构：
* if(条件语句)
* {
* 代码段
* }
* 执行过程：先判断条件语句是否为true，为true就执行代码段
b.if-else结构：
if(条件语句){
代码段1
}else{
代码段2
}
c.if-else if-else:(相当于python的elif)
if(条件语句1){
代码段1
}else if(条件语句2){
代码段2
}else{
代码段3
}
2.switch语句
a.结果：
switch(表达式){
case 值1{
代码段1
}
case 值2{
代码段2
}
……
defalut:{
}
}
b.执行过程：先计算表达式的值，然后再用这个值去和后边case关键字后面的值一一对比，看是否相等。 找到第一个和表达式的值相等的case，然后将这个case作为入口，一次执行后边所有的代码，直到遇到break或者switch结束。如果没有找到和表达式的值相等的case就执行finally后面的代码
注意：default可有可无，case可以有若干个
六、js中的循环结构
js中的循环结构分为：for和while
1.for-in循环(和python相同)
for var 变量 in 序列{
循环体
}
- 执行过程：依次从序列中去元素对应的索引，取完为止，每取一个执行依次循环体
- 遍历字符串，取得是字符对应的下标
- 遍历数组，取得是元素对应的下标
- 遍历对象，取得是属性名(key)
2.for循环(和C语言一样)
for(语句1；表达式2；语句3){
循环体
}
- 执行过程：先执行表达式1，然后再判断表达式2的结果是否为true，如果为true，就执行循环体。执行完循环体再执行表达式3。然后再判断表达式2的结果是否为true，如果为true，又执行循环体，执行完循环体再执行表达式3，依次循环，直到表达式2的结果为false为止
3.while循环(和python相同)
while(条件语句){
循环体
}
4.do-while循环
do{
循环体
}while(条件语句)
- 执行：先执行一次循环体，然后再判断条件语句是否为true，为true又执行循环体，依次类推，直到条件语句为false，循环就结束
七、js中的函数
1.函数的声明
function 函数名(参数列表){
函数体
}
说明
a.function：是js中声明函数的关键字
b.函数名：标识符，不能是关键字；见名知义，驼峰式命名
c.参数列表：参数名1，参数名2……； 形参；将数据从函数的外面传到函数中
d.函数体：实现函数的功能
注意：函数体只有在函数调用的时候才执行
2.函数的调用(和python相同)
- 函数调用的时候要保证每个参数都有值
- 支持位置参数、参数设置默认值(js6)
注意：js不支持不定长参数
3.函数的返回值
- js中函数如果没有遇到return，函数的返回值是undefined
注意：js中不能同时返回多个值(有元祖语法的语言才支持多个返回值)
4.js中，函数也可以作为变量
5.另外一种声明函数的方式
var 变量 = function(参数列表){
函数体
}
八、js中的数据类型
new 类型名(值) ---> 可以将其他的类型的数据转换成相应类型的值
1.数字类型(Number)：所有的数字对应的类型
- 不能转换的结果是NaN
console.log(typeof(10))
var num1 = 100
var num2 = new Number('12')
console.log(num2+100,num1)
2.布尔：true和false
- 数字 ---> ：NaN和0是false,其他的都是true
- 字符串 --->：空串是false，其他的是true
总结：所有的0为空的转换成布尔是false，NaN，null和undefind都是false；其他的都是true
var bool = new Boolean(23)
console.log(bool)
3.字符串(String)
- a.获取单个字符：通过字符串[下标]
- b.
js不支持切片
js所有的下标只支持0-长度减1，不支持负值
var str1 = 'dasdas'
console.log(str1[2])
- c.长度:字符串.length
console.log(str1.length)
- d.运算符：比较和+
- 比较和python一样
- +:如果是其他的数据类型和字符串相加，都是现将其他数据类型转换成字符串，然后做字符串加操作
console.log('abc'+'123') //'abc123'
console.log(123+'abc') //'123abc'
- e.其他的方法（自己查）
- String对象方法：字符串.方法
console.log('wdqdw'.charCodeAt(1))
4.数组（相当于python中的列表）
- 1.可变的，元素的类型可以是任意类型的数据
array = [1,'abc',true,[1,2,3]]
//查：
console.log(array[1])
//增
array.push('aa')
console.log(array)
//删除
//删除最后一个元素
array.pop()
console.log(array)
//删除最后一个元素
array.shift()
console.log(array)
//splice(删除的开始下标，删除的元素的个数)
var array = [1,'abc',true,[1,2,3]]
array.splice(1,1)
console.log(array)
//splice（被删除的下标/添加的开始下标，添加个数，被添加的元素列表）
var array = [1,'abc',true,[1,2,3]]
array.splice(4,2,'aa','bb')
console.log(array)
