2019-01-25js基础语法
2019-01-25 本文已影响0人
遥远的她197
一 什么是JS
<!--
1.什么是js
js的全称是:javascript,是web标准中的行为标准，主要负责网页中内容的变化。
js和python一样是脚本语言
2.js代码写在什么地方
a.内联js - 写在标签的事件相关属性中，例如:onclick属性
b.内部js - 写在script标签中国。script标签可以放在head和body
c.外部js - 写在一个js文件中，然后再html中通过script标签导入
console.log() 相当于python中的print (在网页上打开，F12有个console，按了按钮就是100)
window.alert() 弹出弹框 (在网页上打开，按了按钮就会弹出'你好！')
3.js能做什么
a.可以修改标签内容
b.修改标签属性
c.修改标签样式
d.添加网页内容
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--外部的js
在script标签的src中设置要导入的js文件路径(可以是本地的，也可以是网络的)
-->
<script type="text/javascript" src="js/index.js">
</script>
<!--内部的-->
<script type="text/javascript">
//这儿写js代码(注释和C语言一样)
//进网页就会弹出
window.alert('内部js')
</script>
</head>
<body>
<!--内联的-->
<button onclick="window.alert('你好！')">按钮</button>
<p id="p1">我是段落!</p>
<!--这步是修改上面p标签的内容(也可以修改图片),变成hello js!-->
<button onclick="document.getElementById('p1').innerText = 'hello js!'">修改内容</button>
<button onclick="document.getElementById('p1').style.color = '#00ff00'">修改颜色</button>
</body>
</html>
二，js基础语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.注释
//单行注释 - 注释前加两个注释
/* 多行注释
* 第二行
* 第三行
*/
//2.标识符
//有数字, 字母, 下划线和$组成, 数字不能开头, 命名一般不用$,$有特殊功能
num = 10
str1 = 'abc'
$user_ = 'tanghao'
// 12abc = 12.5 数字不能开头,会报错
//3.关键字
// for, in, while, if, else, true, false, var, function等, 有特殊功能的标识符都是关键字
//4.数据类型和字面量
//a.类型和字面量
//Number, String, Boolean, Array(数组像python的列表), Object(对象像python的字典),function等
//Number - 表示所有数字；23, 12.45(支持科学计数法), NaN(不存在的数字)
console.log(12/0) // Infinity无穷大
//String - 表示所有字符串，用单引号或者双引号括起来；'abc', "abc"
//Boolean - true和false两个值
//数组 - 相当于python中的列表；[23, -23.9,'abc',true]
console.log([23, -23.9,'abc',true,{'name':'tanghao'}])
//对象 - 相当于python中的字典+对象；{属性名:属性值, 属性名2:属性值2...},属性值可以是任何类型
// 属性名可以使用引号也可以不使用引号
obj1 = {'name':'lalala'}
obj2 = {name:'lllaaa'}
//Function - 相当于python中的函数
//b.查看类型和类型转换
//查看类型:typeof(数据)
console.log(typeof(100))
//类型转换:类型名()
int1 = parseInt(12.4) // 12
num = Number('abc')
console.log(num) // NaN(不存在数字)
</script>
三，变量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.基本语法
//格式1: 变量名 = 值
//格式2: var 变量名 = 值
name = '小明'
var name2 = '小花'
//同时声明多个变量赋一样的值
a = b = c = 10
console.log(a,b,c)
//同时声明多个变量赋不同的值；注意, 使用var声明变量的时候,可以不给变量赋初值，默认是undefined
a1=10, b1=20 // c1 会报错
console.log(a1,b1)
var a2, b2=10, c2
console.log(a2,b2,c2) //undefined 10 undefined 在上面a1那里写c1会报错
</script>
四, 运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//js支持:数学运算符 比较运算符 逻辑运算符 赋值运算符 位运算符
//1.数学运算符：+, -, *, /, %, ++, --(和python比少了整除和幂运算,多了++,--)
//+, -, *, /, %和python一样
//++(自加1), --(自减1)
//变量++, ++变量 - 让变量自己的值加1
//变量--, --变量 - 让变量自己的值减1
num = 10
num++ //相当于: num += 1
++num
num-- //相当于: num -= 1
console.log(num)
//坑!!!!不要这样用
num1 = 10
//先赋值再加1
num2 = num1++
num11 = 10
//先加1再赋值
num22 = ++num11
console.log(num2, num22) // 10 11
//比较运算符: >, <, >=, <=, ==, !=, ===, !==
//结果都是布尔
//比较大小和python一样
// ==判断值是否相等, !=判断值是否不相等
// ===判断值和类型是否相等, !==判断值和类型是否不相等(相当于python的==和!=)
console.log(5 == 5) //true
console.log(5 == '5') //true 只是看值
console.log(5 === 5) //true
console.log(5 === '5') //false 类型必须一样
//3.逻辑运算符: &&(逻辑与)， ||(逻辑或)， ！(逻辑非)
// 运算规则和python一样
//4.赋值运算符: =,+=,-=,*=,/=,%=
//运算规则和python一样
num = 10
num %= 2 // num = num%2 = 10%2 = 0
console.log(num)
//5.位运算符: &, |, ~，^
//和python一样
//6.符号运算和python一样
//7.三目运算符
// ?: - 条件语句?值1:值2 (条件语句成立结果是值1,否则是值2)
age = 20
console.log(age>=18?'成年':'未成年')
</script>
五，分之结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
// js中的循环结构有两种: for循环， while循环
//1.for循环
//1）python中for循环: for in
/*
for(变量 in 序列){
循环体
}
注意: 不管序列是什么类型，变量取得都是下标/属性名(相当于key)
*/
str1 = 'abc'
for(index in str1){
console.log(index, str1[index])
}
array1 = [100, false, 'abc', [1,2,3]]
for(index in array1){
console.log(index, array1[index])
}
//2)C的for循环
/*
a.语法：
for(表达式1;表达式2;表达式3){
循环体
}
表达式1
while(表达式2){
循环体
表达式3
} 和上面的for(表达式1;表达式2;表达式3)执行过程一样
*/
num = 1
sum = 0
while(num <= 100){
sum += num
num ++
}
for(num=1,sum1=0;num <= 100;num++){
sum1 += num
}
console.log(sum1)
//2.while循环
//1）python的while循环
/*while(条件语句){
循环体
} */
//2）C的do-while
//执行过程:会先执行一次循环体,再判断条件语句是否为true
/*
do{
循环体
}while(条件语句)
*/
</script>
