01-编程语言
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
alert ( '我是编程语言,来控制电脑网页弹出你好' ) ;
alert ( '我是编程语言,来控制电脑网页弹出你好' ) ;
< / script>
< / head>
< body>
< / body>
< / html>
02-JS初体验
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< style> < / style>
< ! -- 2. 内嵌式的js -- >
< script>
< / script>
< ! -- 3. 外部js script 双标签 -- >
< script src= "my.js" > < / script>
< / head>
< body>
< ! -- 1. 行内式的js 直接写到元素的内部 -- >
< ! -- < input type= "button" value= "唐伯虎" onclick= "alert('秋香姐')" > -- >
< / body>
< / html>
03-JS注释
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
< / script>
< / head>
< body>
< / body>
< / html>
04-JS输入输出语句
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
prompt ( '请输入您的年龄' ) ;
alert ( '计算的结果是' ) ;
console. log ( '我是程序员能看到的' ) ;
< / script>
< / head>
< body>
< / body>
< / html>
05-变量
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
var age;
age = 18 ;
console. log ( age) ;
var myname = 'pink老师' ;
console. log ( myname) ;
< / script>
< / head>
< body>
< / body>
< / html>
06-变量案例
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
var myname = '旗木卡卡西' ;
var address = '火影村' ;
var age = 30 ;
var email = 'kakaxi@itcast.cn' ;
var gz = 2000 ;
console. log ( myname) ;
console. log ( address) ;
console. log ( age) ;
console. log ( email) ;
console. log ( gz) ;
< / script>
< / head>
< body>
< / body>
< / html>
07-变量案例弹出用户名
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
var myname = prompt ( '请输入您的名字' ) ;
alert ( myname) ;
< / script>
< / head>
< body>
< / body>
< / html>
08-变量的语法扩展
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
var myname = 'pink老师' ;
console. log ( myname) ;
myname = '迪丽热巴' ;
console. log ( myname) ;
var age = 18 ,
address = '火影村' ,
gz = 2000 ;
var sex;
console. log ( sex) ;
qq = 110 ;
console. log ( qq) ;
< / script>
< / head>
< body>
< / body>
< / html>
09-变量命名规范
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
var app = 10 ;
var App = 100 ;
console. log ( app) ;
console. log ( App) ;
console. log ( name) ;
< / script>
< / head>
< body>
< / body>
< / html>
10-交换两个变量值
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
var temp;
var apple1 = '青苹果' ;
var apple2 = '红苹果' ;
temp = apple1;
apple1 = apple2;
apple2 = temp;
console. log ( apple1) ;
console. log ( apple2) ;
< / script>
< / head>
< body>
< / body>
< / html>
11-变量的数据类型
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
var num = 10 ;
var str = 'pink' ;
var x = 10 ;
x = 'pink' ;
< / script>
< / head>
< body>
< / body>
< / html>
12-数字型Number
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
var num = 10 ;
var PI = 3.14
var num1 = 010 ;
console. log ( num1) ;
var num2 = 012 ;
console. log ( num2) ;
var num3 = 0x9 ;
console. log ( num3) ;
var num4 = 0xa ;
console. log ( num4) ;
console. log ( Number. MAX_VALUE ) ;
console. log ( Number. MIN_VALUE ) ;
console. log ( Number. MAX_VALUE * 2 ) ;
console. log ( - Number. MAX_VALUE * 2 ) ;
console. log ( 'pink老师' - 100 ) ;
< / script>
< / head>
< body>
< / body>
< / html>
13-isNaN
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
console. log ( isNaN ( 12 ) ) ;
console. log ( isNaN ( 'pink老师' ) ) ;
< / script>
< / head>
< body>
< / body>
< / html>
14-字符串型String1
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
var str = '我是一个"高富帅"的程序员' ;
console. log ( str) ;
var str1 = "我是一个'高富帅'的\n程序员" ;
console. log ( str1) ;
< / script>
< / head>
< body>
< / body>
< / html>
15-弹出警示框案例
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
alert ( '酷热难耐,火辣的太阳底下,我挺拔的身姿,成为了最为独特的风景。\n我审视四周,这里,是我的舞台,我就是天地间的王者。\n这一刻,我豪气冲天,终于大喊一声:"收破烂啦~"' ) ;
< / script>
< / head>
< body>
< / body>
< / html>
16-字符串拼接
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
var str = 'my name is andy' ;
console. log ( str. length) ;
console. log ( '沙漠' + '骆驼' ) ;
console. log ( 'pink老师' + 18 ) ;
console. log ( 'pink' + true ) ;
console. log ( 12 + 12 ) ;
console. log ( '12' + 12 ) ;
< / script>
< / head>
< body>
< / body>
< / html>
17-字符串拼接加强
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
console. log ( 'pink老师' + 18 ) ;
console. log ( 'pink老师' + 18 + '岁' ) ;
var age = 19 ;
console. log ( 'pink老师age岁' ) ;
console. log ( 'pink老师' + age + '岁' ) ;
console. log ( 'pink老师' + age + '岁' ) ;
< / script>
< / head>
< body>
< / body>
< / html>
18-显示年龄案例
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
var age = prompt ( '请输入您的年龄' ) ;
var str = '您今年已经' + age + '岁了' ;
alert ( str) ;
< / script>
< / head>
< body>
< / body>
< / html>
19-布尔型Boolean
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
var flag = true ;
var flag1 = false ;
console. log ( flag + 1 ) ;
console. log ( flag1 + 1 ) ;
var str;
console. log ( str) ;
var variable = undefined ;
console. log ( variable + 'pink' ) ;
console. log ( variable + 1 ) ;
var space = null ;
console. log ( space + 'pink' ) ;
console. log ( space + 1 ) ;
< / script>
< / head>
< body>
< / body>
< / html>
20-获取变量数据类型
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
var num = 10 ;
console. log ( typeof num) ;
var str = 'pink' ;
console. log ( typeof str) ;
var flag = true ;
console. log ( typeof flag) ;
var vari = undefined ;
console. log ( typeof vari) ;
var timer = null ;
console. log ( typeof timer) ;
var age = prompt ( '请输入您的年龄' ) ;
console. log ( age) ;
console. log ( typeof age) ;
< / script>
< / head>
< body>
< / body>
< / html>
21-字面量
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
console. log ( 18 ) ;
console. log ( '18' ) ;
console. log ( true ) ;
console. log ( undefined ) ;
console. log ( null ) ;
< / script>
< / head>
< body>
< / body>
< / html>
22-转换为字符型
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
var num = 10 ;
var str = num. toString ( ) ;
console. log ( str) ;
console. log ( typeof str) ;
console. log ( String ( num) ) ;
console. log ( num + '' ) ;
< / script>
< / head>
< body>
< / body>
< / html>
23-转换为数字型
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
console. log ( parseInt ( '3.14' ) ) ;
console. log ( parseInt ( '3.94' ) ) ;
console. log ( parseInt ( '120px' ) ) ;
console. log ( parseInt ( 'rem120px' ) ) ;
console. log ( parseFloat ( '3.14' ) ) ;
console. log ( parseFloat ( '120px' ) ) ;
console. log ( parseFloat ( 'rem120px' ) ) ;
var str = '123' ;
console. log ( Number ( str) ) ;
console. log ( Number ( '12' ) ) ;
console. log ( '12' - 0 ) ;
console. log ( '123' - '120' ) ;
console. log ( '123' * 1 ) ;
< / script>
< / head>
< body>
< / body>
< / html>
24-计算年龄案例
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
var year = prompt ( '请您输入您的出生年份' ) ;
var age = 2018 - year;
alert ( '您今年已经' + age + '岁了' ) ;
< / script>
< / head>
< body>
< / body>
< / html>
25-简单加法器案例
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
var num1 = prompt ( '请您输入第一个值:' ) ;
var num2 = prompt ( '请您输入第二个值:' ) ;
var result = parseFloat ( num1) + parseFloat ( num2) ;
alert ( '您的结果是:' + result) ;
< / script>
< / head>
< body>
< / body>
< / html>
26-转换为布尔型
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< script>
console. log ( Boolean ( '' ) ) ;
console. log ( Boolean ( 0 ) ) ;
console. log ( Boolean ( NaN ) ) ;
console. log ( Boolean ( null ) ) ;
console. log ( Boolean ( undefined ) ) ;
console. log ( '------------------------------' ) ;
console. log ( Boolean ( '123' ) ) ;
console. log ( Boolean ( '你好吗' ) ) ;
console. log ( Boolean ( '我很好' ) ) ;
< / script>
< / head>
< body>
< / body>
< / html>