1.什么是js
js是javascript的缩写,是web标准中的行为标准.负责网页中变化的部分
2.在哪儿写js代码
a.写标签的事件相关属性中名,例如按钮的onvliced属性
b.写在script标签中(将js代码作为script标签的内容)
注意,script标签理论上可以放在html中的任何位置,但是一般放在head或者body中
3js能做什么
a.在网页的指定位置插入标签
b.修改网页中标签的内容
c.修改标签样式
4怎么写js代码
javasscript是一门编程语言,和python是一样是一样动态语言也是脚本语言.但是和java没有关系
补充:
window.alert(信息)
- js代码,在浏览器上弹出一个对话框,对话框中显示指定信息
window.alert(信息) - js代码，在浏览器上弹出一个对话框，对话框中显示指定的信息
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--1.js代码写在哪儿-->
<!--<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
//在这儿写js代码
window.alert('python and js!')
</script>
<button onclick="window.alert('你好!')">点我啊~</button>-->
<h1>我是标题</h1>
<!--2.js能做什么-->
<!--a.插入内容-->
<script type="text/javascript">
arr = ['海贼王', '火影', '魁拔', '一拳超人']
for (index in arr){
mesaage = '<h1>'+arr[index]+'</h1>'
//在网页中添加内容
document.write(mesaage)
}
</script>
<!--b.修改标签内容-->
<p id="p1">我是段落</p>
<button onclick="document.getElementById('p1').innerHTML='我是javascript!'">修改内容</button>
<!--c.修改标签的样式-->
<button onclick="document.getElementById('p1').style = 'color:red;font-size:30px;'">修改样式</button>
<img id="img1" src="img/luffy.jpg"/>
<button onclick="document.getElementById('img1').src = 'img/luffy4.jpg'">修改图片</button>
</body>
</html>
1基础语法
1.控制台输出
console.log(100)
console.log(abc,200)
2.注释 - 和 C一样
单行注释 //
多行注释 /*
3标识符
由字母数字和下划线和$组成,数字不能开头.
a = 10
a20 = 100
a_10 = 200
$12S = 23
12abc = 100 报错
as^ = 200 报错
4.行和缩进
从语法角度看,js代码怎么换行和缩进都无所谓,js中通过{}来确定代码块
常见的数据类型:数字,布尔,字符串,数组,对象,函数.
数字(Number) - 包含所有的数字,包括整数和小数
布尔(Boolean) - 只有两个值 true和 false
字符串(String) - 使用单引号或者双引号引起来的字符集"abc" 'an'
数组(Array) - 相当于python中的列表[12,'abs',true]
对象(Object) - 相当于python中的字典和对象
函数(Function) - 相当于python中的函数
2变量的声明
语法1: 变量名 = 值
变量名 - 标识符,不能是关键字;
驼峰式命名(第一个单词首字母小写,后面每个单词大写);
语法2:var 变量名 = 值 或 var变量名
var- - 声明变量的关键字
区别:声明的时候加var,变量可以不用赋值,默认是undefined;不加var就必须赋值
补充:js中有两个特殊的值 - undefined(没有,空) 和 null(清空)
3运算符
1.数学运算符: + - * / % ++ --
前面四个和python一模一样
++ --都是单目运算符,使用方式:变量++/--, ++/--变量
++ 自加1运算让变量本身的值加1 (放前面是先自加 放后面是后自加)
-- 自检1运算
2.比较运算符:< > == != >= <= === !==
结果是布尔值
比较大小的和python一样
a. ==:判断值是否相等
b. ===:判断值和类型是否完全相等,相当于python中的==.!==相当于python中的!=.
3.逻辑运算符:&&逻辑与 ||逻辑或 !逻辑非
运算规则和使用方式和python的逻辑一模一样
4.赋值运算符: = += -= *= /= %=
和python一模一样
5.三目运算符 ?
语法:
条件语句 值1:值2 判断条件语句的值是否为true,为true整个表达式的结果是值1,为false,结果是值2.
age = 16
is_man = age>=18 ? '成年':'未成年'
6运算顺序
数学>比较>逻辑>赋值
如果有,括号里面的
4分之结构
js的分之结构有两种 : if 和switch
1.if
if(条件语句){
满足条件会执行的代码
}
b.if - else
if(条件语句){
代码段1
}else{
代码段2
}
c. if - else if - else
if(条件语句){
代码段1
}else if(条件语句2){
代码段2
}else if(条件语句3){
代码段3
}
2.switch语句
a.结构:
switch(表达式){
case值1:
代码段1
case值2:
代码段2
...
default:
代码段3
}
b.执行过程:
使用表达式的值依次和后面每个case后面的值进行比较，看是否相等。
找到第一个和表达式的值相等的case,将这个case作为入口，依次执行后面所有的代码，
直到执行完成或者遇到break为止。如果每个case的值都和表达式的值不相等，
就执行default后面的代码
注意：case后面必须是一个有结果的表达式
a = 15
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')
}
5
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, 12.5]
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
}
*/
2.while循环
a.while循环
while(条件语句){
循环体
}
执行过程和python一模一样
b.do-while循环
do{循环体}
while(条件语句)
区别:do-while的循环体至少会执行一次
6函数
1.函数的声明
function 函数名(参数列表){
函数体
}
js中的函数除了声明的关键字不一样,其他都一样
参数可以设置默认值,也可以通过关键字参数来调用函数
function sum(num1, num2=3){
console.log('求两个数的和')
return num1+num2
}
2.函数的调用
函数名(实参列表)
console.log(sum(10, 20))
js中所有的函数多有返回值,默认是undefined
``
function func1(){
console.log('我是js函数')
}
re = func1()
console.log(re)
##3.匿名函数(函数的字面量)
函数名 = function(参数列表){函数体}
func2 = function(a,b){
console.log(a, b)
return a*b
}
console.log(func2(3, 4))
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(){
var2 = 'abcabc'
var3 = 111 //这个是一个全局变量
var var4 = 222 //这是一个局部变量
console.log(var1, var2, xxx)
}
abc()
console.log(var3)
console.log(var2)
```
网友评论