day5-JavaScript基础语法
2018-12-07 本文已影响0人
2ez4ddf
一.js简介
有些地方建议手动加;来区别,js自带加;有的地方会坑~
-
什么是js
js是JavaScript的缩写，是web标准中的行为标准。负责网页中变化的部分 -
在哪儿写js代码
a.写标签的事件相关属性中，例如按钮的onclick属性
b.写在script标签中(将js代码作为script标签的内容)
注意：script标签理论上可以放在html中的任何位置，但是一般放在head或者body中
c.写在js文件中，在html中通过script标签将文件导入(src属性值就是要导入的js文件的路径) -
js能做什么
a.在网页的指定位置插入标签
b.修改网页中标签的内容
c.修改标签样式 -
怎么写js代码
JavaScript是一门编程语言，和python一样是动态语言也是脚本语言。但是和java没有关系
补充：
window.alert(信息) - js代码，在浏览器上弹出一个对话框。对话框中显示指定的信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--c.位置3-->
<!--<script type="text/javascript" src="js/index.js"></script>-->
<!--b.位置2-->
<!--<script type="text/javascript">
//在这儿写js代码
window.alert('水陆草木之花，可爱者甚蕃~')
</script>-->
</head>
<body>
<!--a.位置1-->
<!--<button onclick="window.alert('hello')">点我</button>-->
<script type="text/javascript">
arr = ['濯清涟而不妖','中通外直','不蔓不枝','香远益清']
for (index in arr){
message = '<h1>'+arr[index]+'</h1>'
//在网页中添加内容
document.write(message)
}
// for (i = 0;i< 100;i++){
// document.write('<h1>我是标题</h1>')
// }
</script>
<!--b.修改标签内容-->
<p id="p1">我是段落</p>
<button onclick="document.getElementById('p1').innerHTML='亭亭净植，可远观而不可亵玩焉'">修改内容</button>
<!--c.修改标签的样式-->
<button onclick="document.getElementById('p1').style='color:red;font-size:30px'">修改样式</button>
<img id="img1" src="img/2.jpg"/>
<button onclick="document.getElementById('img1').src='img/5.png'">修改图片</button>
</body>
</html>
二.基本语法
<script type="text/javascript">
//1.控制台输出
//console.log(输出的内容) - 和print的功能一样
console.log(100)
console.log('abc',998)
//2.注释
//单行注释
/*
* 多行注释
* 多行注释
*/
//3.标识符
//由字母数字下划线和$组成，数字不能开头
a = 10
a20 = 100
a_10 = 200
$12s = 998
// 9gg = 100 //Uncaught SyntaxError:
// as^ = 200//Uncaught SyntaxError:
//4.行与缩进
//从语法角度，js代码怎么换行和缩进都无所谓。js中通过{}来确定代码块，
//5.常见的数据类型:数字，布尔，字符串，数组，对象，函数
/* a.数字(Number) - 包含所有的数字，包括整数和小数。例如：100,-3.14,12.5,3e3
* 支持科学计数法，不支持虚数
* b.布尔(Boolean) - 只有两个值ture和false。这两个值是关键字；分别代表'真'和'假'
* c.字符串(String) - 使用单引号或者双引号引起来的字符集,'abc',"ddf"
* d.数组(Array) - 相当于python中的列表,[12,'ggg',true]
* e.对象(Object) - 相当于python中的字典和对象,{}
* f.函数(Function) - 相当于python中的函数
*
*/
console.log('予谓菊，花之隐逸者也',"牡丹，花之富贵者也",3e3)
obj1 = {name:'ddf',age:10}
console.log(obj1['name'],obj1.name)
//声明函数
function eat(food){
console.log('吃'+food)
}
eat('面条')
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本语法</title>
</head>
<body>
</body>
</html>
三.变量
<script type="text/javascript">
//1.变量的声明
/*语法1：变量名 = 值
* 变量名 - 标识符，不能是关键字；
* 驼峰式命名(第一个单词首字母小写，后面每个单词首字母大写);见名知义
*
* 语法2:var 变量名 = 值或var 变量名
* var - 声明变量的关键字
*
* 区别：声明的时候加var，变量可以不用赋值，默认是undefined；不加var就必须赋值，否则报错
*
* 补充：js中两个特殊的值 - undefined(没有,空)和null(清空)
*/
name = 'ddf'
console.log(name)
arr1 = [12,78,45]
console.log(arr1[10])
var age = 10
var sex//通过var声明变量的时候如果不赋值，默认是undefined
console.log(age,sex)
//重新给变量赋值
name = 'cyy'
age = 18
sex = '男'
console.log(name,age,sex)
//同时声明多个变量，赋一样的值
a1= a2 = a3 =10
console.log(a1,a2,a3)
//同时声明多个变量，赋不同的值
var b1=1,b2=2,b3=3,b4
console.log(b1,b2,b3,b4)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
四.运算符
<script type="text/javascript">
//1.数学运算符：+、-、*、/、%、++、--
/* 前四个运算符和python一模一样
*
* ++,--都是单目运算符，使用方式：变量++/--,++/--变量
* a.++ - 自加1运算；让变量本身的值加1
* b.-- - 自减1运算；让变量本身的值减1
*/
num = 10
num++
console.log(num) //11
++num
console.log(num) //12
num--
console.log(num) //11
--num
console.log(num) //10
//坑：用一个变量单独使用++/--的时候，++/--放前面和放后面效果一样；
// 如果是使用++/--运算的结果给另个变量赋值;
// ++/--放前面先自加/自减再赋值；++/--放后面是先赋值再自加/自减
num2 = 10
num = ++num2 //相当于：num2 += 1；num = num2
console.log(num,num2) // 11,11
num2 = 10
num = num2++ //相当于：num = num2;num2 += 1
console.log(num,num2) // 10,11
//2.比较运算符：<,>,==,!=,>=,<=,===,!==
/* 结果是布尔值
* 比较大小的和python一样
* a. ==:判断值是否相等(相等)
* b.===：判断值和类型是否相等(完全相等)，相当于python中的==,!==相当于python中的不等
*/
console.log(5 == 5) //true
console.log(5 == '5') //true
console.log(5 != 5) //false
console.log(5 != '5') //false
console.log(5 === 5) //true
console.log(5 === '5') //false
console.log(5 !== 5) //false
console.log(5 !== '5') //true
//3.逻辑运算符：&&(逻辑与)、||(逻辑或)、!(逻辑非)
//运算规则和使用方式和python的逻辑运算一摸一样
console.log('==============')
console.log(true && true) //true
console.log(true && false)//false
console.log(false || true) //true
console.log(false || false)//false
console.log(!true)//false
//4.赋值运算符：=，+=，-=，*=，/=，%=
//和python一样
//5.三目运算符 - ?:
//语法：
//条件语句?值1:值2 - 判断条件语句的值是否为true，为true整个表达式的结果是值1，否则是值2
age = 12
is_man = age>=18?'成人':'未成年'
console.log(is_man)
//6.运算顺序
//数学>比较>逻辑>赋值
//如果有括号，先算括号里面的
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
五.分支结构
<script type="text/javascript">
//js中的分之结构有两种：if和switch
/*
* 1.if语句
* a.if
* if(条件语句){
* 满足条件会执行的代码
* }
* b.if-else
* if(条件语句){
* 代码段1
* }
* else{
* 代码段2
* }
* c.if - else if - else
* if(条件语句){
* 代码段1
* }
* else if(条件语句2){
* 代码段2
* }
* else if(条件语句3){
* 代码段3
* }
* else{
* 代码段4
* }
* 执行过程和python一模一样
*
*
*/
num = 10
if(num % 2){
console.log('奇数')
}
else{
console.log('偶数')
}
age = 90
if(age<18){
console.log('未成年')
}
else if(age<60){
console.log('成年')
}
else{
console.log('老年')
}
/*
* 2.switch语句
* a.结构:
* switch(表达式){
* case 值1:代码段1
* case 值2:代码段2
* case 值3:代码段3
* ...
* default:代码段4
* }
* b.执行过程:
* 使用表达式的值依次和后面每个case后面的值进行比较，看是否相等。
* 找到第一个和表达式的值相等的case，将这个case作为入口，依次执行后面所有的代码，
* 直到执行完成或者遇到break为止。如果每个case的值都和表达式的值不相等，
* 就执行default后面的代码
*
* 注意：case后面必须是一个有结果的表达式
*
*/
a = 1
switch(a){
case 5:
console.log('表达式1')
case 6:
console.log('表达式2')
case 7:
console.log('表达式3')
case 10:
console.log('表达式4')
case 11:
console.log('表达式5')
break
default:
console.log('表达式6')
}
//练习：用一个变量保存10分制的成绩，根据成绩打印情况：
//0~5不及格 6及格 7-8良好 9-10优秀
score = 8
switch(score){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
console.log('不及格')
break
case 6:
console.log('及格')
break
case 7:
case 8:
console.log('良好')
break
default:
console.log('优秀')
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
六.循环结构
<script type="text/javascript">
//js中有for循环和while循环两种
//1.for循环
/*
* a.for-in
* 结构:
* for(变量 in 序列){
* 循环体
* }
* 执行过程和python一样，但是变量取到的不是元素，而是下标/key(属性名)
* 序列 - 字符串，数组，对象
*/
str1 = 'abc'
for(x in str1){
console.log('====')
console.log(x,str1[x])
}
arr1 = [1,'aaa',true,998]
for(index in arr1){
console.log(index,arr1[index])
}
person1 = {name:'小明',age:18,sex:'男'}
for(x in person1){
//typeof() - 获取值的类型
console.log(x,typeof(x))
console.log(person1[x])
}
/*
* b.c的for循环
* 结构:
* for(表达式1;表达式2;表达式3){
* 循环体
* }
* 执行过程：先执行表达式1；然后判断表达式2的值是否为true，如果为true就执行循环体，
* 执行完循环体再执行表达式3；然后再判断表达式2是否为true，如果为true就执行循环体，
* 执行完循环体再执行表达式3；...依次类推，直到表达式2的结果为false为止(循环结束)
*
*
* 表达式1
* while(表达式2){
* 循环体
* 表达式3
* }
*
* 表达式1
* for(;表达式2;){
* 循环体
* 表达式3
* }
*
*/
for (num=1,sum1=0;num<=100;num++) {
sum1 += num
}
console.log(sum1)
//2.while循环
/*
* a.while循环
* while(条件语句){
* 循环体
* }
* 执行过程和python一摸一样
*
* b.do-while循环
* do{
* 循环体
* }while(条件语句)
* 区别：do-while的循环体至少会执行一次
*/
//1+2+3+...+100(do-while)
num=1
sum=0
do{
sum +=num
num++
}while(num<101)
console.log(sum)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
七.函数
<script type="text/javascript" >
//1.函数的声明
/*
* function 函数名(参数列表){
* 函数体
* }
* js中的函数除了声明的关键字不一样，其他的都一样
*/
//参数可以设置默认值,也可以通过关键字参数来调用函数
function sum(num1,num2=3){
console.log('求两个数的和')
return num1+num2
}
//2，函数的调用
/*
* 函数名(实参列表)
*/
console.log(sum(10,20))
console.log(sum(17))
console.log(sum(num1=100,num2=200))
//js中所有的函数都有返回值，默认是undefind
function func1(){
console.log('我是js函数')
}
re = func1()
console.log(re,typeof(re))
//3.匿名函数(函数的字面量)
/*
* 函数名 = function(参数列表){函数体}
*/
func2 = function(a,b){
console.log(a,b)
return a*b
}
console.log(func2(10,20))
funcs_arr = [func1,function(a){console.log(a)}]
funcs_arr[0]()
funcs_arr[1]('abc')
//4.变量的作用域
/*
* a.全局变量：只要声明在函数外面的变量就是全局变量;在函数中以'变量名=值'的形式声明的变量也是全局的
* b.局部变量：以var关键字声明在函数中的变量，才是局部变量
*
*
*/
var1 = 1000//这是一个全局变量
var var2 = 'abc'//这是一个全局变量
for(xxx in 'hello'){
}
function abc(){
var var4 =222 //这个是局部变量
var3 = 111 //这是一个全局变量
console.log(var1,var2,xxx)
}
abc()
console.log(var3)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
八.字符串
<script type="text/javascript">
//1.字符串字面量
/*
* a.使用双引号或者单引号括起来的字符集
* b.除了普通字符以外还可以是转义字符：\n,\t,\\,\',\"
* c.\u4位16进制值对应的Unicode编码，\u4e00
*/
str1 = 'abc\n123'
str2 = "abc\"123"
str3 = "abc\u4e01"
console.log(str1)
console.log(str2)
console.log(str3)
//2.获取字符
/*
* 字符串[下标] - 获取单个字符
* 下标 -范围是0~长度-1；下标如果越界取到的值是undefined
* js中没有切片方法
*/
str1 = "hello js"
console.log(str1[1])
//3.相关运算： +
/*
* NaN - js中一个特殊的值,类似undefined、null，用来表示一个不存在的数值
* 字符串+数据 - 支持字符串和其他任何数据相加，是将其他数据全部转换成字符串，然后再去拼接
*
*/
str2 = 'abc'+123+true+[1,'ddf',666]
console.log(str2)
//补充:js中数据类型转换:类型名()
num_str = String(123)
str_num = Number('a23.45')
arr_str = String([1,true,'ddf'])
console.log(num_str,str_num,typeof(num_str),arr_str)
//4.字符串长度 - String 对象属性
console.log('hello world'.length)
str3 = 'abc'//str3是String类型
str4 = new String('abc')//object
console.log(str3==str4,str3===str4)
console.log(str3[1],str4[1])
//5.字符串相关方法 String 对象方法(见菜鸟教程:http://www.runoob.com/js/js-strings.html)
str1 = 'ddf666f'
//charAt() 返回指定索引位置的字符
console.log(str1.charAt(2))//f
//charCodeAt() 返回指定索引位置字符的 Unicode 值
console.log(str1.charCodeAt(2))//102
//fromCharCode() 将 Unicode 转换为字符串
console.log(String.fromCharCode(97))//a
//concat() 连接两个或多个字符串，返回连接后的字符串
console.log(str1.concat('cyy'))//ddf666fcyy
//indexOf() 返回字符串中检索指定字符第一次出现的位置
console.log(str1.indexOf('f'))//2
//lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
console.log(str1.lastIndexOf('f'))//6
/*
* match() 找到一个或多个正则表达式的匹配
* match() 方法将检索字符串 String Object，以找到一个或多个与 regexp 匹配的文本。
* 这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。
* 如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。
* 如果没有找到任何匹配的文本， match() 将返回 null。
* 否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。
*/
console.log('abcd12abc23hhh123'.match(/\d+/g))//(3) ["12", "23", "123"]
//replace(searchvalue,newvalue) 替换与正则表达式匹配的子串
console.log('abcd12abc23hhh123'.replace(/\d+/g,'*'))//abcd*abc*hhh*
/*
* search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
* 如果没有找到任何匹配的子串，则返回 null。
*/
console.log('abcd12abc23hhh123'.match(/\d+/g))//(3) ["12", "23", "123"]
console.log('ddfnbbb'.match(/\d+/g))//null
//slice(start,end) - 提取字符串的片断，并在新的字符串中返回被提取的部分
//start 必须. 要抽取的片断的起始下标。
console.log('ddf666nb'.slice(3))//666nb
//split(separator,limit) - 把字符串分割为字符串数组。
//separator 可选。字符串或正则表达式，从该参数指定的地方分割 string Object.
console.log('abcd12abc23hhh123d'.split(/\d+/))//(4) ["abcd", "abc", "hhh", "d"]
//toLowerCase() 把字符串转换为小写。
console.log('DDF666nb'.toLowerCase())//ddf666nb
//toUpperCase() 把字符串转换为大写。
console.log('ddf666nb'.toUpperCase())//DDF666NB
//trim() 去除字符串两边的空白
console.log(' ddf666nb '.trim())//ddf666nb
//substr() 从起始索引号提取字符串中指定数目的字符。
console.log('ddf666nb'.substr(-1))//b
console.log('ddf666nb'.substr(4))//66nb
//substring() 提取字符串中两个指定的索引号之间的字符。
console.log('ddf666nb'.substring(1,7))//df666n
//6.js中的数组只需要关注：a.怎么获取数组中的元素 b.数组对应的方法 c.元素可以是任何类型
arr = [1, 'abc', true] // arr = {0: 1, 1: 'abc', 2: true}
console.log(arr)
nums = [1, 34, 67, 2, 344]
new_nums = nums.sort(function(a,b) {return b-a})
console.log(new_nums)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
