1.js引入
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>js引入</title>
<style type="text/css">
.span1{ color: red;}
</style>
<!--外链式-->
<!--<script src="./1.js"></script>-->
</head>
<body>
<!-- dom == document object model 有属性 有方法 行内式引入 -->
<p class="" id="" onclick="clickhandler()">123</p>
<span>234</span>
</body>
<!-- 内部式 引入 建议引入时候在body之后，因为要等待所有dom元素标签加载完成后再去执行相应得js操作-->
<script type="text/javascript">
// window.document.write()
// document.write('有一首歌叫123')
document.write('<span class="span1">233</span>');
// windows.console.log()
console.log('我很好');
console.error('错误ss');
console.dir(window);
console.clear();
var a = prompt('输入姓名');
console.log(a);
function clickhandler(){
// 弹出警告框
/*
这是一个方式
一个很好得方法
*/
window.alert(1);
alert(1)
}
</script>
</html>
<!--
总结：
引入js 三种方式； 行内式 内部式 外链式
做项目时：css js 一般使用外链式引入；
javascript得输出方式：
1.document.write('有一首歌叫123')
document.write('<span class="span1">233</span>');
window.document.write()
2.console.log('我很好');
console.error('错误');
console.clear();
windows.console.log()
3.alert(1);
window.alert(1);
4.innerHTML/innerText
...
5.var a = prompt('输入姓名');
console.log(a);
-->
2.变量的声明和定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量得声明和定义</title>
</head>
<body>
</body>
<script type="text/javascript">
// 变量得声明
//js 中代码得执行顺序 自上往下
//1.先声明在定义
var dog;
// alert(dog); //undefined 未定义
dog='小黄';
// alert(dog)
// alert(dog)
// alert(dog)
//2.声明立刻定义
var dog2='小红';
// alert(dog2);
var $='aa';
alert($);
//建议使用驼峰标识 来命名
var myHousePrice = '$1234';
/*
变量命名规范：
1.严格区分大小写
2.命名时名称可以出现字母、数字、下划线、$ ,但是不能数字开头，也不能纯数字，不能包含关键字和保留字。
关键字：var number等
除了关键字 top name 也尽量不使用。
3.推荐驼峰命名法：有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其余的单词首字母大写
4.匈牙利命名：就是根据数据类型单词的的首字符作为前缀
*/
</script>
</html>
3.五种基本数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本数据类型</title>
</head>
<body>
<script type="text/javascript">
/*
js中有两种数据类型
1.基本数据类型
number string boolean null undefined
2.引用数据类型
对象
Array object 正则
函数
*/
//1.number 数字类型
var a = 123;
console.log(a);
console.log(typeof a);
//2.string 字符串类型
var str = '123';
console.log(str);
console.log(typeof str);
//3.boolean 布尔类型
var b1 = false; //true/false
console.log(b1);
console.log(typeof b1);
//4.null
var c1 = null; //空对象
console.log(c1);
console.log(typeof c1);
//5.undefined
var d1;
console.log(d1);
console.log(typeof d1);
//特殊：分母为0；
// Infinity
// number
var e1 = 5/0;
console.log(e1);
console.log(typeof e1);
</script>
</body>
</html>
4.运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运算符</title>
</head>
<body>
<script type="text/javascript">
//1.赋值运算符
// var money = prompt('请输入金额...');
// var saveMoney = money * (1+0.02);
// console.log(saveMoney);
//2.算数运算
var a = 10;
var b = 3;
var sum = a + b;
var min = a - b;
var t1 = a * b;
var t2 = a / b;
var t3 = a % b; // 余数
console.log(sum,min,t1,t2,t3); // 13 7 30 3.3333333333333335 1
//3.复合运算符
var c = 7, d = 8;
// d = c + d;
d += c;
console.log(c,d); // 7 15
// 自增 自减
var e1 = d++; //先赋值后+++
var e2 = ++d; //先++后赋值
console.log(e1,e2);
var f1 = d--;
var f2 = --d;
console.log(f1,f2);
//4.比较运算符 > < >= <= == === !=
console.log(5>6); //false
console.log(4==4); //true
console.log(4==5); //false
// 隐式转换 浏览器会将数值转成字符串； === 类型和值都比较
console.log('5'==5); // true
console.log('5'===5); // false
console.log(4!=3) // true
//5.逻辑运算符 &&（and） ||(or)
console.log('xxx:',false && false)
// console.log(true && true)
console.log(true || false) // true
</script>
</body>
</html>
5.字符串处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串处理</title>
</head>
<body>
<script type="text/javascript">
//字符串运算
var firstName = 'alice';
var lastNmae = 'B';
var fullName = firstName + " " + lastNmae;
console.log(fullName); // 字符串拼接
//字符串拼接
var str1 = '飞行员';
var str2 = '航空公司';
var str = '该法院受理的'+str1+'离职纠纷案件中，'+str2+'要求离职飞行';
console.log(str);
// 对字符串 + 是拼接 其他得运算可以 - * /
var a1='1';
var a2='2';
console.log(a1+a2); // 12 拼接 不是数值
console.log(typeof(a1+a2)); // string
console.log(parseInt(a1)+parseInt(a2)); // 3
console.log(a1*a2); // 2
console.log(typeof (a1*a2)); //number
var b1 = 'one';
var b2 = 'two';
console.log(b1*b2); // NaN == not a number
console.log(typeof (b1*b2)) // number
</script>
</body>
</html>
6.数据类型转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型转换</title>
</head>
<body>
<script type="text/javascript">
//1.将数字类型转换成字符串类型 隐式转换 String() num.toString()
var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
// 123 隐式转换 将数字转换成 string 进行拼接
console.log(n3); // 123123
console.log(typeof n3) // string
//强制类型转换 String() toString()
console.log(':',typeof n1)
var str1 = String(n1)
console.log(str1);
console.log(typeof str1)
var num = 234;
console.log(num.toString())
//2.将 字符串 类型转换成 数字 类型 Number() parseInt() parseFloat()
var stringNum = '789.123as';
var num2 = Number(stringNum);
console.log(num2)
console.log(typeof num2);
// parseInt() 解析一个字符串 并且返回一个整数
console.log(parseInt(stringNum));
console.log(typeof parseInt(stringNum));
console.log(parseFloat(stringNum))
console.log(typeof parseFloat(stringNum)) //number
// 在js中所有得数据类型 都会被转换为boolean类型
// 0 NaN null undefined 为false 其他得为true
var b1 = '123';
var b2 = -123;
var b3 = Infinity; //无穷大
var b4 = 0;
var b5 = NaN;
var b6; //undefined
var b7 = null;
console.log(':',Boolean(b1)) //true
console.log(Boolean(b2)) // true
console.log(Boolean(b3)) // true
console.log(Boolean(b4)) // false
console.log(Boolean(b5)) // false
console.log(Boolean(b6)) // false
console.log(Boolean(b7)) // false
</script>
</body>
</html>
7.if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>if</title>
</head>
<body>
<script type="text/javascript">
//if 语句
var ji = 10;
if(ji>=20){
console.log('大吉大利')
}else{
console.log('下次努力')
}
if(true){
}else if(true){
}else if(true){
}else{
}
// alert(222)
// 浏览器解析代码得顺序 是 从上往下 执行
// 考试系统录入
var math = 90;
var english = 85;
var sum = 485;
//1.模拟 总分 > 400 并且(&&两个条件都成立才成立)数学 > 89 被清华录入
if(sum>400 && math>90){
console.log('录入成功')
}else{
alert('高考失利')
}
//2.模拟 总分>400或者（|| 只要有一个成立就成立）英语>85 就被复旦录入
if(sum>500 || english>85){
alert('录入')
}else{
alert('失利')
}
if(sum>500 || (math+english)>170){
alert(22)
}
</script>
</body>
</html>
8.switch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch</title>
</head>
<body>
<script type="text/javascript">
//switch
var gameScore = 'good';
// case 表示一个条件 满足条件走进去 遇到break 跳出
switch(gameScore){
case 'good':
console.log('good 玩得很好');
break; // 一定要加 break 否则会打印 better 下得内容
case 'better':
console.log('better 很好');
break;
case 'best':
console.log('best');
break;
default:
console.log('很遗憾');
// break; // 不需要些 走到最后了
}
// alert(11)
</script>
</body>
</html>
9.while
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>while</title>
</head>
<body>
<script type="text/javascript">
// while 循环
//1.初始化循环变量 2.判断循环条件 3.更新循环变量
var i = 1;
while(i<=9){
// console.log(i);
i+=1;
}
//练习
// 1-100 之间 是3得倍数 输出出来
var j = 1;
while(j<=100){
if(j%3===0){
console.log(j)
}
j++;
}
</script>
</body>
</html>
10.do while
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>do_while</title>
</head>
<body>
<script type="text/javascript">
// do while
//1.初始化循环变量 2.判断循环条件 3.更新循环变量
// 不管有没有满足while，do里面得代码都会执行一次
var i = 3;
do{
console.log(i);
i++;
}while(i<5);
</script>
</body>
</html>
11.for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for</title>
</head>
<body>
<script type="text/javascript">
//for 循环
//1.初始化 2.循环条件 3.更新循环变量
// for(var i = 1; i < 10; i++){
// console.log(i);
// }
//1-100 偶数
// for(var i=1;i<=100;i++){
// if(i%2===0){
// //偶数
// console.log(i)
// }
// }
//1.练习
//1-100之间所有数得和
// var sum = 0;
// for(var i=1;i<=100;i++){
// sum += i;
// }
// console.log(sum)
//2.练习
/*
******
******
******
*/
// 双重for 循环
// for(var i=1;i<=3;i++){ // 行
// for(var j=1;j<=6;j++){ //列
// document.write('*')
// }
// document.write('<br>')
// }
//作业： 在浏览器中输出直角三角形 6行 等边三角形 使用python 和js 语言输出
/*
*
* *
* * *
* * * *
* * * * *
* * * * * *
*/
for(var i=1;i<=6;i++){
for(var j=1;j<=i;j++){
document.write('*')
}
document.write('<br>')
}
document.write('<br><br>');
/*
* 2*1-1
*** 2*2-1
***** 2*3-1
******* 2*4-1
********* 2*5-1
*********** 2*6-1
*/
/*
* 2*1-1
*** 2*2-1
***** 2*3-1
******* 2*4-1
********* 2*5-1
*********** 2*6-1
*********
*******
*****
***
*
*/
//等边三角形
for(var m=1;m<=6;m++){
for(var n1=m;n1<6;n1++){
document.write(' ')
}
for(var n2=1;n2<=2*m-1;n2++){
document.write('*')
}
document.write('<br>')
}
document.write('<br>');
//菱形
for(var a=1;a<=11;a++){
if(a<=6) {
for (var a1 = a; a1 < 6; a1++) {
document.write(' ')
}
}else{
for(var a2=7;a2<=a; a2++){
document.write(' ')
}
}
if(a<=6){
for(var a3=1;a3<=2*a-1;a3++){
document.write('*')
}
}else{
for(var a4=a*2-1;a4<22;a4++){
document.write('*')
}
}
document.write('<br>')
}
</script>
</body>
</html>
